Racing Car Game

<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Racing Car Game</title>

<style>
* { box-sizing: border-box; }

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

h1 { color: #facc15; }

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

#game {
  position: relative;
  width: 320px;
  height: 500px;
  max-width: 95vw;
  margin: auto;
  overflow: hidden;
  background: #444;
  border-left: 7px solid #22c55e;
  border-right: 7px solid #22c55e;
}

.road-line {
  position: absolute;
  left: 50%;
  width: 6px;
  height: 60px;
  background: white;
  transform: translateX(-50%);
}

.car {
  position: absolute;
  width: 42px;
  height: 68px;
  border-radius: 10px 10px 6px 6px;
  border: 3px solid white;
}

#player {
  background: #ef4444;
  bottom: 20px;
  left: 132px;
}

.enemy {
  background: #3b82f6;
  top: -80px;
}

.car::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: #bae6fd;
  top: 10px;
  left: 7px;
  border-radius: 4px;
}

#message {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000b;
  z-index: 5;
  padding: 15px;
}

button {
  padding: 12px 22px;
  margin: 8px;
  border: none;
  border-radius: 10px;
  background: #facc15;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.controls {
  display: flex;
  justify-content: center;
  gap: 45px;
}

.controls button {
  width: 90px;
  background: #374151;
  color: white;
  font-size: 28px;
  touch-action: none;
}
</style>
</head>

<body>
<h1>🏎️ Racing Car</h1>
<div id="score">Score: 0</div>

<div id="game">
  <div id="player" class="car"></div>
  <div id="message">
    <h2>🏁 Car Racing</h2>
    <p>Traffic से बचकर चलें!</p>
    <button id="start">START GAME</button>
  </div>
</div>

<div class="controls">
  <button id="left">⬅️</button>
  <button id="right">➡️</button>
</div>
<p>Keyboard: ← → या A / D</p>

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

let x = 132;
let score = 0;
let speed = 4;
let enemies = [];
let running = false;
let lastTime = 0;
let spawnTimer = 0;
let animationId;

const roadWidth = 320;

for (let i = 0; i < 6; i++) {
  const line = document.createElement("div");
  line.className = "road-line";
  line.style.top = (i * 100) + "px";
  game.appendChild(line);
}

const lines = document.querySelectorAll(".road-line");

function movePlayer(direction) {
  if (!running) return;
  x += direction * 25;
  x = Math.max(7, Math.min(game.clientWidth - 49, x));
  player.style.left = x + "px";
}

document.addEventListener("keydown", e => {
  if (e.key === "ArrowLeft" || e.key.toLowerCase() === "a")
    movePlayer(-1);
  if (e.key === "ArrowRight" || e.key.toLowerCase() === "d")
    movePlayer(1);
});

function setupButton(id, direction) {
  const btn = document.getElementById(id);
  btn.addEventListener("pointerdown", e => {
    e.preventDefault();
    movePlayer(direction);
  });
}

setupButton("left", -1);
setupButton("right", 1);

function spawnEnemy() {
  const enemy = document.createElement("div");
  enemy.className = "car enemy";
  const laneWidth = game.clientWidth / 3;
  const lane = Math.floor(Math.random() * 3);
  enemy.style.left = (lane * laneWidth + laneWidth / 2 - 21) + "px";
  enemy.style.top = "-80px";
  game.appendChild(enemy);
  enemies.push(enemy);
}

function collision(a, b) {
  const A = a.getBoundingClientRect();
  const B = b.getBoundingClientRect();

  return A.left < B.right - 5 &&
         A.right > B.left + 5 &&
         A.top < B.bottom - 5 &&
         A.bottom > B.top + 5;
}

function endGame() {
  running = false;
  cancelAnimationFrame(animationId);
  message.style.display = "flex";
  message.innerHTML = `
    <h2>💥 GAME OVER!</h2>
    <p>Your Score: ${score}</p>
    <button id="restart">PLAY AGAIN</button>
  `;
  document.getElementById("restart").onclick = startGame;
}

function loop(time) {
  if (!running) return;

  const dt = Math.min((time - lastTime) / 16.67 || 1, 2);
  lastTime = time;

  lines.forEach(line => {
    let top = parseFloat(line.style.top);
    top += speed * dt;
    if (top > 500) top -= 600;
    line.style.top = top + "px";
  });

  spawnTimer += dt;
  if (spawnTimer > 45) {
    spawnEnemy();
    spawnTimer = 0;
  }

  for (let i = enemies.length - 1; i >= 0; i--) {
    const enemy = enemies[i];
    enemy.style.top =
      (parseFloat(enemy.style.top) + speed * dt) + "px";

    if (collision(player, enemy)) {
      endGame();
      return;
    }

    if (parseFloat(enemy.style.top) > 510) {
      enemy.remove();
      enemies.splice(i, 1);
      score++;
      scoreText.textContent = "Score: " + score;
      speed = Math.min(9, 4 + score * 0.08);
    }
  }

  animationId = requestAnimationFrame(loop);
}

function startGame() {
  cancelAnimationFrame(animationId);
  enemies.forEach(enemy => enemy.remove());
  enemies = [];
  score = 0;
  speed = 4;
  spawnTimer = 0;
  x = (game.clientWidth - 42) / 2;
  player.style.left = x + "px";
  scoreText.textContent = "Score: 0";
  message.style.display = "none";
  running = true;
  lastTime = performance.now();
  animationId = requestAnimationFrame(loop);
}

startBtn.onclick = startGame;
</script>
</body>
</html>