Simple car race game

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);

Apr 12, 2025 - 16:33

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);