Untitled
unknown
plain_text
a year ago
5.1 kB
4
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Infinite Car Race Game</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; margin: 0; } .game-container { position: relative; width: 80%; height: 600px; border: 1px solid #000; background-color: #fff; overflow: hidden; background-image: linear-gradient(to bottom, #444 50%, #555 50%); background-size: 100% 50px; } .car { position: absolute; width: 50px; height: 100px; background-color: blue; bottom: 10px; left: 50%; transform: translateX(-50%); } .obstacle { position: absolute; width: 50px; height: 50px; background-color: black; } #score { position: absolute; top: 10px; left: 10px; font-size: 20px; } </style> </head> <body> <div class="game-container" id="gameContainer"> <div class="car" id="car1"></div> <div id="score">Score: 0</div> </div> <audio id="backgroundMusic" loop> <source src="your-music-file.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <script> document.addEventListener('DOMContentLoaded', () => { const car = document.getElementById('car1'); const gameContainer = document.getElementById('gameContainer'); const scoreElement = document.getElementById('score'); const backgroundMusic = document.getElementById('backgroundMusic'); const containerWidth = gameContainer.offsetWidth; const containerHeight = gameContainer.offsetHeight; let carSpeed = 7; let carPosition = containerWidth / 2 - 25; let score = 0; let obstacles = []; let backgroundPosition = 0; function moveCar(event) { if (event.key === 'ArrowLeft' && carPosition > 0) { carPosition -= carSpeed; } else if (event.key === 'ArrowRight' && carPosition < containerWidth - 50) { carPosition += carSpeed; } car.style.left = carPosition + 'px'; } function createObstacle() { const obstacle = document.createElement('div'); obstacle.classList.add('obstacle'); obstacle.style.top = '0px'; obstacle.style.left = Math.random() * (containerWidth - 50) + 'px'; gameContainer.appendChild(obstacle); obstacles.push(obstacle); } function moveObstacles() { obstacles.forEach((obstacle, index) => { let top = parseInt(obstacle.style.top); top += carSpeed; obstacle.style.top = top + 'px'; if (top > containerHeight) { gameContainer.removeChild(obstacle); obstacles.splice(index, 1); score++; scoreElement.textContent = 'Score: ' + score; } if (checkCollision(car, obstacle)) { gameOver(); } }); } function checkCollision(car, obstacle) { const carRect = car.getBoundingClientRect(); const obstacleRect = obstacle.getBoundingClientRect(); return !( carRect.top > obstacleRect.bottom || carRect.bottom < obstacleRect.top || carRect.right < obstacleRect.left || carRect.left > obstacleRect.right ); } function gameOver() { backgroundMusic.pause(); alert('Game Over! Your score is: ' + score); document.location.reload(); } function gameLoop() { moveObstacles(); backgroundPosition += carSpeed; gameContainer.style.backgroundPositionY = backgroundPosition + 'px'; requestAnimationFrame(gameLoop); } document.addEventListener('keydown', moveCar); setInterval(createObstacle, 1500); // Start the game loop and music gameLoop(); backgroundMusic.play(); }); </script> </body> </html>
Editor is loading...
Leave a Comment