const gameArea = document.getElementById("gameArea");
const player = document.getElementById("player");
const scoreElement = document.getElementById("score");

let playerX = 175;
let score = 0;
let gameRunning = true;

// Move the player
document.addEventListener("keydown", (e) => {
if (e.key === "ArrowLeft" && playerX > 0) {
playerX -= 10;
} else if (e.key === "ArrowRight" && playerX < 350) {
playerX += 10;
}
player.style.left = playerX + "px";
});

// Create road lines
for (let i = 0; i < 5; i++) {
const line = document.createElement("div");
line.classList.add("line");
line.style.top = i * 120 + "px";
gameArea.appendChild(line);
}

// Move road lines
function moveLines() {
const lines = document.querySelectorAll(".line");
lines.forEach(line => {
let top = parseInt(line.style.top);
top += 5;
if (top > 600) top = -100;
line.style.top = top + "px";
});
}

// Generate enemy cars
function createEnemy() {
const enemy = document.createElement("div");
enemy.classList.add("enemy");
enemy.style.left = Math.floor(Math.random() * 350) + "px";
enemy.style.top = "-100px";
gameArea.appendChild(enemy);
}

// Move enemies and check collision
function moveEnemies() {
const enemies = document.querySelectorAll(".enemy");
enemies.forEach(enemy => {
let top = parseInt(enemy.style.top);
top += 6;
enemy.style.top = top + "px";

// Collision detection
if (
  top + 100 > 500 &&
  top < 600 &&
  Math.abs(parseInt(enemy.style.left) - playerX) < 50
) {
  gameRunning = false;
  alert("Game Over! Final Score: " + score);
  location.reload();
}

// Remove enemy if off-screen
if (top > 600) {
  enemy.remove();
  score++;
  scoreElement.innerText = "Score: " + score;
}

});
}

// Main game loop
setInterval(() => {
if (gameRunning) {
moveLines();
moveEnemies();
}
}, 30);

// Create enemy cars periodically
setInterval(() => {
if (gameRunning) {
createEnemy();
}
}, 1000);