Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Mini Racing Game</title>
  <style>
    body {
      margin: 0;
      background: #333;
      overflow: hidden;
    }

    canvas {
      display: block;
      margin: 0 auto;
      background: #111;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>

  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

    const roadWidth = 200;
    const roadX = canvas.width / 2 - roadWidth / 2;
    const roadY = 0;
    const laneCount = 2;
    const laneWidth = roadWidth / laneCount;

    let player = {
      x: roadX + laneWidth / 2 - 20,
      y: canvas.height - 100,
      width: 40,
      height: 80,
      color: "red",
      speed: 5
    };

    let keys = {};
    document.addEventListener("keydown", (e) => keys[e.key] = true);
    document.addEventListener("keyup", (e) => keys[e.key] = false);

    let enemyCars = [];
    let score = 0;

    function drawRoad() {
      ctx.fillStyle = "#444";
      ctx.fillRect(roadX, roadY, roadWidth, canvas.height);

      ctx.strokeStyle = "#fff";
      ctx.lineWidth = 2;
      for (let i = 1; i < laneCount; i++) {
        const x = roadX + i * laneWidth;
        for (let y = 0; y < canvas.height; y += 40) {
          ctx.beginPath();
          ctx.moveTo(x, y);
          ctx.lineTo(x, y + 20);
          ctx.stroke();
        }
      }
    }

    function drawCar(car) {
      ctx.fillStyle = car.color;
      ctx.fillRect(car.x, car.y, car.width, car.height);
    }

    function spawnEnemy() {
      const lane = Math.floor(Math.random() * laneCount);
      const x = roadX + lane * laneWidth + laneWidth / 2 - 20;
      const car = {
        x: x,
        y: -80,
        width: 40,
        height: 80,
        color: "blue",
        speed: 4 + Math.random() * 2
      };
      enemyCars.push(car);
    }

    function detectCollision(a, b) {
      return (
        a.x < b.x + b.width &&
        a.x + a.width > b.x &&
        a.y < b.y + b.height &&
        a.y + a.height > b.y
      );
    }

    function update() {
      // Move player
      if (keys["ArrowLeft"] && player.x > roadX) {
        player.x -= player.speed;
      }
      if (keys["ArrowRight"] && player.x + player.width < roadX + roadWidth) {
        player.x += player.speed;
      }

      // Update enemy cars
      for (let i = 0; i < enemyCars.length; i++) {
        let car = enemyCars[i];
        car.y += car.speed;

        if (detectCollision(player, car)) {
          alert("💥 Game Over! Your score: " + score);
          document.location.reload();
        }

        if (car.y > canvas.height) {
          enemyCars.splice(i, 1);
          i--;
          score++;
        }
      }

      // Spawn enemy cars
      if (Math.random() < 0.02) {
        spawnEnemy();
      }
    }

    function drawScore() {
      ctx.fillStyle = "#fff";
      ctx.font = "20px Arial";
      ctx.fillText("Score: " + score, 10, 30);
    }

    function loop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawRoad();
      drawCar(player);
      enemyCars.forEach(drawCar);
      drawScore();
      update();
      requestAnimationFrame(loop);
    }

    loop();
  </script>
</body>
</html>
Editor is loading...