Untitled
unknown
plain_text
18 days ago
2.6 kB
3
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Click the Box Game</title> <style> body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } #gameArea { width: 500px; height: 500px; margin: 0 auto; position: relative; background-color: #f0f0f0; border: 2px solid #333; } #box { width: 50px; height: 50px; background-color: red; position: absolute; cursor: pointer; border-radius: 10px; } #scoreBoard { margin-top: 20px; font-size: 20px; } #startButton { margin-top: 10px; padding: 10px 20px; font-size: 18px; } </style> </head> <body> <h1>Click the Box Game</h1> <div id="gameArea"> <div id="box"></div> </div> <div id="scoreBoard">Score: 0 | Time Left: 30s</div> <button id="startButton">Start Game</button> <script> const box = document.getElementById('box'); const gameArea = document.getElementById('gameArea'); const scoreBoard = document.getElementById('scoreBoard'); const startButton = document.getElementById('startButton'); let score = 0; let timeLeft = 30; let gameInterval; let timerInterval; function moveBox() { const maxX = gameArea.clientWidth - box.offsetWidth; const maxY = gameArea.clientHeight - box.offsetHeight; const randomX = Math.floor(Math.random() * maxX); const randomY = Math.floor(Math.random() * maxY); box.style.left = randomX + 'px'; box.style.top = randomY + 'px'; } box.addEventListener('click', () => { if (timeLeft > 0) { score++; scoreBoard.textContent = `Score: ${score} | Time Left: ${timeLeft}s`; moveBox(); } }); startButton.addEventListener('click', () => { score = 0; timeLeft = 30; scoreBoard.textContent = `Score: ${score} | Time Left: ${timeLeft}s`; moveBox(); clearInterval(gameInterval); clearInterval(timerInterval); gameInterval = setInterval(moveBox, 800); timerInterval = setInterval(() => { timeLeft--; scoreBoard.textContent = `Score: ${score} | Time Left: ${timeLeft}s`; if (timeLeft <= 0) { clearInterval(gameInterval); clearInterval(timerInterval); scoreBoard.textContent = `Game Over! Final Score: ${score}`; } }, 1000); }); </script> </body> </html>
Editor is loading...
Leave a Comment