Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Catch the Box!</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f0f0;
        }

        #score {
            font-size: 24px;
            margin-top: 20px;
        }

        #timer {
            font-size: 24px;
            margin: 10px;
        }

        #box {
            width: 60px;
            height: 60px;
            background-color: red;
            position: absolute;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div id="score">Score: 0</div>
    <div id="timer">Time: 20</div>
    <div id="box"></div>

    <script>
        let score = 0;
        let timeLeft = 20;

        const box = document.getElementById("box");
        const scoreDisplay = document.getElementById("score");
        const timerDisplay = document.getElementById("timer");

        function moveBox() {
            const x = Math.random() * (window.innerWidth - 60);
            const y = Math.random() * (window.innerHeight - 60);
            box.style.left = x + "px";
            box.style.top = y + "px";
        }

        box.addEventListener("click", function() {
            score++;
            scoreDisplay.textContent = "Score: " + score;
            moveBox();
        });

        function countdown() {
            timeLeft--;
            timerDisplay.textContent = "Time: " + timeLeft;

            if (timeLeft <= 0) {
                alert("Game Over! Your score: " + score);
                location.reload();
            }
        }

        moveBox();
        setInterval(countdown, 1000);
    </script>

</body>
</html>
Editor is loading...