Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Catch the Falling Objects Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        #game-container {
            position: relative;
            width: 400px;
            height: 600px;
            background-color: #87ceeb;
            border: 2px solid #000;
            overflow: hidden;
        }

        #basket {
            position: absolute;
            bottom: 20px;
            width: 80px;
            height: 30px;
            background-color: #8b4513;
            border-radius: 5px;
        }

        .falling-object {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #ff0000;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="basket"></div>
    </div>
    <script>
        const gameContainer = document.getElementById('game-container');
        const basket = document.getElementById('basket');
        const basketSpeed = 10;
        let basketPosition = 160; // Initial position of the basket
        basket.style.left = basketPosition + 'px';

        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft' && basketPosition > 0) {
                basketPosition -= basketSpeed;
            } else if (e.key === 'ArrowRight' && basketPosition < (gameContainer.clientWidth - basket.clientWidth)) {
                basketPosition += basketSpeed;
            }
            basket.style.left = basketPosition + 'px';
        });

        function createFallingObject() {
            const fallingObject = document.createElement('div');
            fallingObject.classList.add('falling-object');
            fallingObject.style.left = Math.random() * (gameContainer.clientWidth - 20) + 'px';
            fallingObject.style.top = '0px';
            gameContainer.appendChild(fallingObject);

            let fallInterval = setInterval(() => {
                fallingObject.style.top = parseInt(fallingObject.style.top) + 5 + 'px';

                if (parseInt(fallingObject.style.top) > gameContainer.clientHeight) {
                    clearInterval(fallInterval);
                    gameContainer.removeChild(fallingObject);
                }

                const basketRect = basket.getBoundingClientRect();
                const objectRect = fallingObject.getBoundingClientRect();

                if (
                    objectRect.bottom >= basketRect.top &&
                    objectRect.top <= basketRect.bottom &&
                    objectRect.right >= basketRect.left &&
                    objectRect.left <= basketRect.right
                ) {
                    clearInterval(fallInterval);
                    gameContainer.removeChild(fallingObject);
                    // Increase score or perform other actions when object is caught
                }
            }, 50);
        }

        setInterval(createFallingObject, 2000);
    </script>
</body>
</html>
Editor is loading...