Untitled

<!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...