A block Game and include a countdown and a limit's game

Click here for free DL of the app version that can save data.

No:33428

←

Prev Next

→

A block Game and include a countdown and a limit
Developer User3879｜Date and time 24/1/4 5:24:55
Build time 21.631 sec｜Game capacity 3.121KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <title>Block Game</title>
    <style>
      #gameBoard {
        height: 400px;
        width: 400px;
        border: 1px solid black;
      }
      .block {
        display: inline-block;
        height: 50px;
        width: 50px;
        background-color: red;
        margin: 5px;
        cursor: pointer;
      }
      #countdown {
        font-size: 24px;
        color: blue;
      }
      #limit {
        font-size: 18px;
        color: green;
      }
    </style>
  </head>
  <body>
    <div id="gameBoard"></div>
    <div id="countdown"></div>
    <div id="limit"></div>

// Function to generate random number between min and max (inclusive)
      function getRandomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

// Function to handle block click event
      function onBlockClick(event) {
        event.target.style.backgroundColor = "green";
        blockCount++;

// Check if the block count exceeds the limit
        if (blockCount === blockLimit) {
          endGame();
        }
      }

// Function to start the game
      function startGame() {
        var gameBoard = document.getElementById("gameBoard");
        var countdownElement = document.getElementById("countdown");
        var limitElement = document.getElementById("limit");

// Initialize the countdown and block count
        countdownElement.innerHTML = "Temps restant: " + timeLeft;
        limitElement.innerHTML = "Limite: " + blockLimit;

// Generate blocks on the game board
        for (var i = 0; i < blockLimit; i++) {
          var block = document.createElement("div");
          block.className = "block";
          gameBoard.appendChild(block);
          block.addEventListener("click", onBlockClick);
        }

// Start the countdown
        var countdownInterval = setInterval(function () {
          timeLeft--;
          countdownElement.innerHTML = "Temps restant: " + timeLeft;

// Check if time is up
          if (timeLeft === 0 || blockCount === blockLimit) {
            clearInterval(countdownInterval);
            endGame();
          }
        }, 1000);
      }

// Function to end the game
      function endGame() {
        var gameBoard = document.getElementById("gameBoard");
        var countdownElement = document.getElementById("countdown");
        var limitElement = document.getElementById("limit");

// Remove all blocks from the game board
        while (gameBoard.firstChild) {
          gameBoard.removeChild(gameBoard.firstChild);
        }

// Display final message
        if (blockCount === blockLimit) {
          countdownElement.innerHTML = "Félicitations! Vous avez atteint la limite de blocs.";
        } else {
          countdownElement.innerHTML = "Temps écoulé. Vous n'avez pas atteint la limite de blocs.";
        }
      }

// Start the game
      startGame();
    </script>
  </body>
</html>