Car Driving Game

by FrostEagle69
233 lines4.3 KB
<!DOCTYPE html>
<html>
<head>
  <title>Car Driving Game</title>
  <style>
    body {
      margin: 0;
      background: #222;
      font-family: Arial, sans-serif;
      text-align: center;
      color: white;
    }

    h1 {
      margin: 15px;
    }

    #game {
      position: relative;
      width: 400px;
      height: 600px;
      margin: auto;
      overflow: hidden;
      background: #555;
      border: 5px solid white;
    }

    /* Road lines */
    .line {
      position: absolute;
      width: 8px;
      height: 80px;
      background: white;
      left: 196px;
    }

    /* Player car */
    #car {
      position: absolute;
      width: 55px;
      height: 90px;
      background: red;
      border-radius: 12px;
      bottom: 30px;
      left: 172px;
    }

    #car::before {
      content: "";
      position: absolute;
      width: 35px;
      height: 30px;
      background: lightblue;
      left: 10px;
      top: 12px;
      border-radius: 6px;
    }

    /* Coin */
    .coin {
      position: absolute;
      width: 28px;
      height: 28px;
      background: gold;
      border: 3px solid orange;
      border-radius: 50%;
      box-sizing: border-box;
    }

    #score {
      font-size: 22px;
      margin: 10px;
    }

    button {
      font-size: 25px;
      padding: 10px 25px;
      margin: 8px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
    }

    #restart {
      font-size: 18px;
      background: #28a745;
      color: white;
    }
  </style>
</head>

<body>

<h1>🚗 Car Drive</h1>

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

<div id="game">
  <div id="car"></div>
</div>

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

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

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

  let carX = 172;
  let score = 0;
  let gameRunning = true;

  // Move car
  function moveLeft() {
    if (carX > 5) {
      carX -= 25;
      car.style.left = carX + "px";
    }
  }

  function moveRight() {
    if (carX < 340) {
      carX += 25;
      car.style.left = carX + "px";
    }
  }

  document.getElementById("left").onclick = moveLeft;
  document.getElementById("right").onclick = moveRight;

  // Keyboard controls
  document.addEventListener("keydown", function(event) {
    if (event.key === "ArrowLeft") {
      moveLeft();
    }

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

  // Create road lines
  let lines = [];

  for (let i = 0; i < 6; i++) {
    let line = document.createElement("div");
    line.className = "line";
    line.style.top = (i * 120) + "px";
    game.appendChild(line);
    lines.push(line);
  }

  // Create coins
  let coins = [];

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

    let coin = document.createElement("div");
    coin.className = "coin";

    coin.style.left = Math.floor(Math.random() * 350) + "px";
    coin.style.top = "-30px";

    game.appendChild(coin);
    coins.push(coin);
  }

  setInterval(createCoin, 1200);

  // Game animation
  function gameLoop() {

    // Move road
    lines.forEach(line => {
      let y = parseInt(line.style.top);
      y += 5;

      if (y > 600) {
        y = -80;
      }

      line.style.top = y + "px";
    });

    // Move coins
    coins.forEach((coin, index) => {
      let y = parseInt(coin.style.top);
      y += 5;
      coin.style.top = y + "px";

      // Coin collision
      let coinX = parseInt(coin.style.left);

      if (
        coinX < carX + 55 &&
        coinX + 28 > carX &&
        y < 540 &&
        y + 28 > 480
      ) {
        score++;
        scoreText.innerText = "Coins: " + score;

        coin.remove();
        coins.splice(index, 1);
      }

      // Remove old coins
      if (y > 600) {
        coin.remove();
        coins.splice(index, 1);
      }
    });

    requestAnimationFrame(gameLoop);
  }

  gameLoop();

  // Restart
  document.getElementById("restart").onclick = function() {
    location.reload();
  };
</script>

</body>
</html>
Game Source: Car Driving Game

Creator: FrostEagle69
Libraries: none
Complexity: complex (233 lines, 4.3 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: car-driving-game-frosteagle69" to link back to the original. Then publish at arcadelab.ai/publish.