0% found this document useful (0 votes)
96 views

Java Script For Car Racing Game

java script for car racing game

Uploaded by

muryum29
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
96 views

Java Script For Car Racing Game

java script for car racing game

Uploaded by

muryum29
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

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

You might also like