Scribd
Upload
136 views

Java Script For Car Racing Game

java script for car racing game

Uploaded by

muryum29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
136 views

Java Script For Car Racing Game

java script for car racing game

Uploaded by

muryum29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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