Creating a Simple Car Racing Game with HTML, CSS, Javascript

In this post, we will create a simple car racing game using HTML, CSS, and JavaScript. This game will feature a player car, an opponent car, and a score counter. The player can move their car left and right to avoid collisions with the opponent car. Let's dive into the code!

HTML Structure

The HTML structure consists of a game area that contains the road, player car, opponent car, and score display:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Car Racing Game</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="gameArea">
        <div class="road"></div>
        <div class="playerCar"></div>
        <div class="opponentCar"></div>
        <div class="score">Score: 0</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Styling

The CSS styles define the appearance of the game area, road, and cars. We also add animations to make the road scroll smoothly:

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #ffff0b;
    font-family: Arial, sans-serif;
}

.gameArea {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #05ff71;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.road {
    position: absolute;
    top: 0;
    width: 500px;
    height: 200vh;
    background: linear-gradient(#333 25%, #555 25%, #555 50%, #333 50%);
    background-size: 100% 100px;
    animation: scrollRoad 3s linear infinite;
}

@keyframes scrollRoad {
    0% { top: -100vh; }
    100% { top: 0; }
}

.playerCar, .opponentCar {
    position: absolute;
    width: 50px;
    height: 100px;
    background: red;
    border-radius: 10px;
}

.playerCar {
    bottom: 20px;
    left: calc(50% - 25px);
    background-color: red;
    background-size: contain;
}

.opponentCar {
    top: 0;
    left: calc(50% - 25px);
    background: rgb(0, 255, 255);
    background-size: contain;
}

.score {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 24px;
    color: white;
}

JavaScript Functionality

The JavaScript code handles the movement of the cars, collision detection, and score updating. The player can use the arrow keys to move the car left and right:

document.addEventListener("DOMContentLoaded", () => {
  const playerCar = document.querySelector(".playerCar");
  const opponentCar = document.querySelector(".opponentCar");
  const road = document.querySelector(".road");
  const scoreDisplay = document.querySelector(".score");

  let playerCarLeft = road.offsetLeft + road.offsetWidth / 2 - 25;
  let opponentCarTop = 0;
  let score = 0;
  let playerCarSpeed = 10;
  let opponentCarSpeed = 5;
  const roadLeftBoundary = road.offsetLeft;
  const roadRightBoundary = roadLeftBoundary + road.offsetWidth;

  function moveOpponentCar() {
    opponentCarTop += opponentCarSpeed;
    if (opponentCarTop > window.innerHeight) {
      opponentCarTop = -100;
      opponentCar.style.left = `${
        Math.random() * (road.offsetWidth - 50) + roadLeftBoundary
      }px`;
      score++;
      scoreDisplay.textContent = `Score: ${score}`;
      opponentCarSpeed = 5 + Math.floor(score / 5);
    }
    opponentCar.style.top = `${opponentCarTop}px`;
  }

  function movePlayerCar(e) {
    if (e.key === "ArrowLeft") {
      playerCarLeft -= playerCarSpeed;
      if (playerCarLeft < roadLeftBoundary) playerCarLeft = roadLeftBoundary;
    } else if (e.key === "ArrowRight") {
      playerCarLeft += playerCarSpeed;
      if (playerCarLeft > roadRightBoundary - 50)
        playerCarLeft = roadRightBoundary - 50;
    }
    playerCar.style.left = `${playerCarLeft}px`;
  }

  function detectCollision() {
    const playerCarRect = playerCar.getBoundingClientRect();
    const opponentCarRect = opponentCar.getBoundingClientRect();

    return !(
      playerCarRect.bottom < opponentCarRect.top ||
      playerCarRect.top > opponentCarRect.bottom ||
      playerCarRect.right < opponentCarRect.left ||
      playerCarRect.left > opponentCarRect.right
    );
  }

  function gameLoop() {
    moveOpponentCar();
    if (detectCollision()) {
      alert(`Game Over! Your final score is ${score}`);
      window.location.reload();
    } else {
      requestAnimationFrame(gameLoop);
    }
  }

  document.addEventListener("keydown", movePlayerCar);
  gameLoop();
});

This basic game is a great way to practice your HTML, CSS, and JavaScript skills. Feel free to enhance it with more features and improve its functionality!

Sky Code82

Search This Blog