Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Click the Box Game</title> | |
| <meta charset="UTF-8" /> | |
| <style> | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| margin: 0; | |
| font-family: sans-serif; | |
| background-color: #f0f0f0; | |
| } | |
| h1 { | |
| margin-bottom: 10px; | |
| } | |
| #gameArea { | |
| width: 300px; | |
| height: 300px; | |
| background-color: #fff; | |
| border: 2px solid #333; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| #box { | |
| width: 50px; | |
| height: 50px; | |
| background-color: #ff0066; | |
| position: absolute; | |
| cursor: pointer; | |
| } | |
| #score, #timer, #level { | |
| margin: 8px; | |
| font-weight: bold; | |
| } | |
| #level-up-msg { | |
| font-size: 24px; | |
| color: green; | |
| margin-top: 10px; | |
| height: 30px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>🎯 Click the Box!</h1> | |
| <div id="score">Score: 0</div> | |
| <div id="level">Level: 1</div> | |
| <div id="timer">Time: 30s</div> | |
| <div id="level-up-msg"></div> | |
| <div id="gameArea"> | |
| <div id="box"></div> | |
| </div> | |
| <!-- Sound effect --> | |
| <audio id="click-sound" src="https://www.soundjay.com/buttons/sounds/button-16.mp3" preload="auto"></audio> | |
| <script> | |
| let score = 0; | |
| let timeLeft = 30; | |
| let level = 1; | |
| let speed = 1000; // box movement interval in ms | |
| let interval; | |
| const scoreDisplay = document.getElementById("score"); | |
| const timerDisplay = document.getElementById("timer"); | |
| const levelDisplay = document.getElementById("level"); | |
| const box = document.getElementById("box"); | |
| const gameArea = document.getElementById("gameArea"); | |
| const levelUpMsg = document.getElementById("level-up-msg"); | |
| const clickSound = document.getElementById("click-sound"); | |
| function moveBox() { | |
| const maxX = gameArea.clientWidth - box.clientWidth; | |
| const maxY = gameArea.clientHeight - box.clientHeight; | |
| const x = Math.floor(Math.random() * maxX); | |
| const y = Math.floor(Math.random() * maxY); | |
| box.style.left = x + "px"; | |
| box.style.top = y + "px"; | |
| } | |
| function updateLevel() { | |
| if (score === 5 || score === 10 || score === 15) { | |
| level++; | |
| levelDisplay.textContent = "Level: " + level; | |
| levelUpMsg.textContent = `🎉 Level Up! Welcome to Level ${level}!`; | |
| setTimeout(() => (levelUpMsg.textContent = ""), 2000); | |
| clearInterval(interval); | |
| speed -= 200; // make it faster | |
| interval = setInterval(moveBox, speed); | |
| } | |
| } | |
| box.addEventListener("click", () => { | |
| score++; | |
| scoreDisplay.textContent = "Score: " + score; | |
| clickSound.play(); | |
| moveBox(); | |
| updateLevel(); | |
| }); | |
| function startGame() { | |
| moveBox(); | |
| interval = setInterval(moveBox, speed); | |
| const timer = setInterval(() => { | |
| timeLeft--; | |
| timerDisplay.textContent = "Time: " + timeLeft + "s"; | |
| if (timeLeft === 0) { | |
| clearInterval(timer); | |
| clearInterval(interval); | |
| box.style.display = "none"; | |
| timerDisplay.textContent = "⏰ Time's up!"; | |
| levelUpMsg.textContent = `🏁 Final Score: ${score} | Level: ${level}`; | |
| } | |
| }, 1000); | |
| } | |
| startGame(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rukundob451/readyletsgo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> | |