const gameContainer = document.querySelector('.
game-container');
const car = document.getElementById('car');
const scoreDisplay = document.getElementById('score');
const gameOverDisplay = document.getElementById('gameOver');
const carSpeed = 5;
const obstacleSpeed = 3;
let score = 0;
let gameOver = false;
let carX = gameContainer.offsetWidth / 2 - car.offsetWidth / 2; // Initial car
position
// Car Movement
document.addEventListener('keydown', (e) => {
if (gameOver) return;
if (e.key === 'ArrowLeft' && carX > 0) {
carX -= carSpeed;
} else if (e.key === 'ArrowRight' && carX < gameContainer.offsetWidth -
car.offsetWidth) {
carX += carSpeed;
}
car.style.left = carX + 'px';
});
// Create Obstacles
function createObstacle() {
const obstacle = document.createElement('div');
obstacle.classList.add('obstacle');
obstacle.style.left = Math.random() * (gameContainer.offsetWidth - 40) + 'px';
gameContainer.appendChild(obstacle);
moveObstacle(obstacle);
}
// Move Obstacles
function moveObstacle(obstacle) {
const interval = setInterval(() => {
if (gameOver) return;
const obstacleTop = parseInt(obstacle.style.top);
if (obstacleTop > gameContainer.offsetHeight) {
clearInterval(interval);
obstacle.remove();
score++;
scoreDisplay.textContent = `Score: ${score}`;
}
const carRect = car.getBoundingClientRect();
const obstacleRect = obstacle.getBoundingClientRect();
if (
obstacleRect.bottom > carRect.top &&
obstacleRect.top < carRect.bottom &&
obstacleRect.right > carRect.left &&
obstacleRect.left < carRect.right
) {
gameOver = true;
clearInterval(interval);
gameOverDisplay.style.display = 'block';
}
obstacle.style.top = obstacleTop + obstacleSpeed + 'px';
}, 20);
}
// Generate obstacles every 2 seconds
setInterval(() => {
if (!gameOver) {
createObstacle();
}
}, 2000);
// Restart the game
function restartGame() {
gameOver = false;
score = 0;
scoreDisplay.textContent = `Score: 0`;
gameOverDisplay.style.display = 'none';
const obstacles = document.querySelectorAll('.obstacle');
obstacles.forEach((obstacle) => obstacle.remove());
carX = gameContainer.offsetWidth / 2 - car.offsetWidth / 2;
car.style.left = carX + 'px';
// Restart obstacle creation
setInterval(() => {
if (!gameOver) {
createObstacle();
}
}, 2000);
}
// Handle restart on game over
gameOverDisplay.addEventListener('click', restartGame);
