Car Racing Game
Score: 0
Game Over
/* styles.css */
body {
margin: 0;
overflow: hidden;
background-color: #333;
}
.game-container {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
background-color: #000;
overflow: hidden;
}
.track {
position: absolute;
width: 10px;
height: 100%;
background-color: #fff;
left: 50%;
transform: translateX(-50%);
}
.car {
position: absolute;
width: 40px;
height: 80px;
bottom: 10px;
background-color: #fff;
}
.player {
left: 50%;
transform: translateX(-50%);
}
.competitor {
left: 40%;
transform: translateX(-50%);
}
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
background-color: #00ff00;
color: #000;
font-size: 18px;
cursor: pointer;
}
.score {
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 24px;
}
.game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: red;
font-size: 36px;
display: none;
}
// script.js
const playerCar = document.querySelector('.player');
const competitorCar = document.querySelector('.competitor');
const startButton = document.getElementById('start-button');
const scoreDisplay = document.querySelector('.score');
const gameOverText = document.querySelector('.game-over');
let gameIsRunning = false;
let score = 0;
let playerSpeed = 5;
let competitorSpeed = 3;
startButton.addEventListener('click', startGame);
function startGame() {
gameIsRunning = true;
score = 0;
playerCar.style.left = '50%';
competitorCar.style.left = '40%';
scoreDisplay.textContent = 'Score: ' + score;
gameOverText.style.display = 'none';
// Move the cars
moveCars();
// Update the score
setInterval(() => {
if (gameIsRunning) {
score++;
scoreDisplay.textContent = 'Score: ' + score;
}
}, 1000);
}
function moveCars() {
const gameContainer = document.querySelector('.game-container');
const containerWidth = gameContainer.offsetWidth;
const moveInterval = setInterval(() => {
if (gameIsRunning) {
const playerPosition = parseFloat(getComputedStyle(playerCar).left);
const competitorPosition = parseFloat(getComputedStyle(competitorCar).left);
if (playerPosition > 0) {
playerCar.style.left = playerPosition - playerSpeed + 'px';
} else {
endGame();
}
if (competitorPosition > -40) {
competitorCar.style.left = competitorPosition - competitorSpeed + 'px';
} else {
// Respawn the competitor car
competitorCar.style.left = containerWidth + 'px';
}
if (checkCollision(playerCar, competitorCar)) {
endGame();
}
}
}, 10);
}
function checkCollision(car1, car2) {
const rect1 = car1.getBoundingClientRect();
const rect2 = car2.getBoundingClientRect();
return !(
rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom
);
}
function endGame() {
gameIsRunning = false;
gameOverText.style.display = 'block';
}
टिप्पणियाँ
एक टिप्पणी भेजें