Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poop Dodgeball</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        #game {
            position: relative;
            width: 100vw;
            height: 100vh;
            background-color: #87ceeb;
            overflow: hidden;
        }
        .player {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-color: #f4a261;
            border-radius: 50%;
        }
        .poop {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: #8b4513;
            border-radius: 50%;
        }
        .score {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="game">
        <div class="score">Score: 0</div>
        <div class="player"></div>
    </div>

    <script>
        const game = document.getElementById('game');
        const player = document.querySelector('.player');
        const scoreDisplay = document.querySelector('.score');

        let playerX = game.offsetWidth / 2;
        let score = 0;
        let isGameOver = false;

        // Handle player movement
        document.addEventListener('keydown', (e) => {
            if (isGameOver) return;

            if (e.key === 'ArrowLeft' && playerX > 0) {
                playerX -= 20;
            } else if (e.key === 'ArrowRight' && playerX < game.offsetWidth - 50) {
                playerX += 20;
            }
            player.style.left = `${playerX}px`;
        });

        // Create falling poop
        function createPoop() {
            const poop = document.createElement('div');
            poop.classList.add('poop');

            const startX = Math.random() * (game.offsetWidth - 30);
            poop.style.left = `${startX}px`;
            poop.style.top = '0px';

            game.appendChild(poop);
            movePoop(poop);
        }

        // Move poop downward
        function movePoop(poop) {
            let poopY = 0;
            const poopInterval = setInterval(() => {
                if (isGameOver) {
                    clearInterval(poopInterval);
                    poop.remove();
                    return;
                }

                poopY += 5;
                poop.style.top = `${poopY}px`;

                // Collision detection
                const poopRect = poop.getBoundingClientRect();
                const playerRect = player.getBoundingClientRect();
                if (
                    poopRect.bottom >= playerRect.top &&
                    poopRect.top <= playerRect.bottom &&
                    poopRect.right >= playerRect.left &&
                    poopRect.left <= playerRect.right
                ) {
                    endGame();
                }

                // Remove poop if it exits the screen
                if (poopY > game.offsetHeight) {
                    poop.remove();
                    clearInterval(poopInterval);
                    score++;
                    scoreDisplay.textContent = `Score: ${score}`;
                }
            }, 30);
        }

        // End the game
        function endGame() {
            isGameOver = true;
            alert(`Game Over! Your score: ${score}`);
            window.location.reload();
        }

        // Game loop
        setInterval(() => {
            if (!isGameOver) createPoop();
        }, 1000);
    </script>
</body>
</html>
Editor is loading...