1D Car Game

by FrostEagle69
223 lines4.4 KB
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1D Car Game</title>

  <style>
    body {
      margin: 0;
      background: #111;
      color: white;
      font-family: Arial, sans-serif;
      text-align: center;
    }

    h1 {
      margin: 20px 0 10px;
    }

    #game {
      width: 90%;
      max-width: 800px;
      height: 220px;
      margin: 20px auto;
      background: #333;
      border: 4px solid white;
      position: relative;
      overflow: hidden;
    }

    .road-line {
      position: absolute;
      top: 105px;
      width: 100%;
      height: 5px;
      background: #fff;
    }

    #car {
      position: absolute;
      left: 50px;
      top: 75px;
      font-size: 55px;
      transition: left 0.05s;
    }

    .enemy {
      position: absolute;
      left: 800px;
      top: 75px;
      font-size: 55px;
    }

    #score {
      font-size: 24px;
    }

    button {
      padding: 12px 25px;
      margin: 5px;
      font-size: 20px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      background: #00aaff;
      color: white;
    }

    button:hover {
      background: #0088cc;
    }

    #message {
      font-size: 22px;
      color: yellow;
      min-height: 30px;
    }
  </style>
</head>

<body>

  <h1>🏎️ 1D Car Racer</h1>

  <div id="score">Score: 0</div>

  <div id="game">
    <div class="road-line"></div>
    <div id="car">🏎️</div>
  </div>

  <div>
    <button id="left">⬅️ Left</button>
    <button id="right">Right ➡️</button>
  </div>

  <button id="restart">🔄 Restart</button>

  <div id="message">Avoid the 🚙 cars!</div>

  <script>
    const game = document.getElementById("game");
    const car = document.getElementById("car");
    const scoreText = document.getElementById("score");
    const message = document.getElementById("message");

    let carX = 50;
    let score = 0;
    let gameRunning = true;
    let enemy = null;
    let enemyX = 800;

    function moveCar(amount) {
      if (!gameRunning) return;

      carX += amount;

      if (carX < 0) carX = 0;
      if (carX > game.clientWidth - 65) {
        carX = game.clientWidth - 65;
      }

      car.style.left = carX + "px";
    }

    document.getElementById("left").addEventListener("click", () => {
      moveCar(-30);
    });

    document.getElementById("right").addEventListener("click", () => {
      moveCar(30);
    });

    document.addEventListener("keydown", function(event) {
      if (event.key === "ArrowLeft") {
        moveCar(-30);
      }

      if (event.key === "ArrowRight") {
        moveCar(30);
      }
    });

    function createEnemy() {
      enemy = document.createElement("div");
      enemy.className = "enemy";
      enemy.innerHTML = "🚙";

      enemyX = game.clientWidth;

      enemy.style.left = enemyX + "px";
      game.appendChild(enemy);
    }

    function collision() {
      const carLeft = carX;
      const carRight = carX + 55;

      const enemyLeft = enemyX;
      const enemyRight = enemyX + 55;

      return (
        carLeft < enemyRight &&
        carRight > enemyLeft
      );
    }

    function gameLoop() {
      if (!gameRunning) return;

      if (!enemy) {
        createEnemy();
      }

      enemyX -= 5;
      enemy.style.left = enemyX + "px";

      if (collision()) {
        gameOver();
        return;
      }

      if (enemyX < -70) {
        enemy.remove();
        enemy = null;

        score++;
        scoreText.innerText = "Score: " + score;
      }

      requestAnimationFrame(gameLoop);
    }

    function gameOver() {
      gameRunning = false;
      message.innerText = "💥 GAME OVER! Score: " + score;
    }

    document.getElementById("restart").addEventListener("click", function() {
      if (enemy) {
        enemy.remove();
        enemy = null;
      }

      carX = 50;
      score = 0;
      enemyX = game.clientWidth;

      car.style.left = carX + "px";
      scoreText.innerText = "Score: 0";
      message.innerText = "Avoid the 🚙 cars!";

      gameRunning = true;
      requestAnimationFrame(gameLoop);
    });

    gameLoop();
  </script>

</body>
</html>
Game Source: 1D Car Game

Creator: FrostEagle69
Libraries: none
Complexity: complex (223 lines, 4.4 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: 1d-car-game-frosteagle69" to link back to the original. Then publish at arcadelab.ai/publish.