Untitled

<!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...