JSFiddle - React, Tailwind, and code Playground

by highwayoflife

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Oregon Trail Lite</title>
</head>
<body>
  <header>
    <h1>Oregon Trail Lite</h1>
  </header>
  <main>
    <section class="game-container">
      <div class="distance-bar">
        <div class="distance-progress"></div>
      </div>
      <div class="landscape">
        <div class="ox"></div>
        <div class="wagon"></div>
      </div>
    </section>
    <section class="controls">
      <button id="start">Start</button>
      <button id="move">Move</button>
      <button id="rest">Rest</button>
      <button id="trade">Trade</button>
      <button id="repair">Repair</button>
      <button id="hunt">Hunt</button>
    </section>
  </main>
  <footer>
    <p>High Scores</p>
    <!-- Add high score list here -->
  </footer>
  <script src="script.js"></script>
</body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f3f3f3;
}

header {
  background-color: #2c3e50;
  padding: 20px;
}

header h1 {
  color: #ecf0f1;
  text-align: center;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.distance-bar {
  width: 100%;
  background-color: #bdc3c7;
  height: 20px;
  margin-bottom: 10px;
}

.distance-progress {
  height: 20px;
  background-color: #27ae60;
  width: 0%;
}

.landscape {
  width: 100%;
  height: 300px;
  background-image: url('landscape.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.ox,
.wagon {
  position: absolute;
  bottom: 0;
}

.ox {
  width: 60px;
  height: 60px;
  background-image: url('ox.png');
  background-size: cover;
}

.wagon {
  width: 80px;
  height: 60px;
  background-image: url('wagon.png');
  background-size: cover;
  left: 60px;
}

.controls {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 20px;
}

button {
  background-color: #2980b9;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #3498db;
}

button:active {
  background-color: #2471a3;
}

footer {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 20px;
  text-align: center;
  margin-top: 20px;
}

JavaScript

const startBtn = document.getElementById('start');
const moveBtn = document.getElementById('move');
const restBtn = document.getElementById('rest');
const tradeBtn = document.getElementById('trade');
const repairBtn = document.getElementById('repair');
const huntBtn = document.getElementById('hunt');

const ox = document.querySelector('.ox');
const wagon = document.querySelector('.wagon');
const distanceProgress = document.querySelector('.distance-progress');

let oxHealth = 100;
let wagonHealth = 100;
let distanceTraveled = 0;
let gameInProgress = false;

function updateDisplay() {
  ox.style.left = `${distanceTraveled}%`;
  wagon.style.left = `${distanceTraveled + 5}%`;
  distanceProgress.style.width = `${distanceTraveled}%`;
}

async function move() {
  if (!gameInProgress) return;

  distanceTraveled += 5;
  oxHealth -= 5;

  if (oxHealth <= 0) {
    gameOver('Your ox has died.');
    return;
  }

  if (distanceTraveled >= 100) {
    gameInProgress = false;
    alert('Congratulations! You have reached the destination.');
  } else {
    await moveOx();
    await moveWagon();
    updateDisplay();
    // Implement obstacle encounters and other game events here
  }
}

async function moveOx() {
  return new Promise((resolve) => {
    ox.style.transition = 'left 0.5s';
    setTimeout(() => {
      ox.style.left = `${distanceTraveled}%`;
      setTimeout(resolve, 500);
    }, 100);
  });
}

async function moveWagon() {
  return new Promise((resolve) => {
    wagon.style.transition = 'left 0.5s';
    setTimeout(() => {
      wagon.style.left = `${distanceTraveled + 5}%`;
      setTimeout(resolve, 500);
    }, 100);
  });
}

function rest() {
  if (!gameInProgress) return;

  oxHealth += 10;
  if (oxHealth > 100) oxHealth = 100;
}

function trade() {
  if (!gameInProgress) return;
  // Implement trading logic here
}

function repair() {
  if (!gameInProgress) return;
  // Implement repair logic here
}

function hunt() {
  if (!gameInProgress) return;
  // Implement...