Игра про биты's game

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

No:25763

←

Prev Next

→

Игра про биты
Developer User12664｜Date and time 23/11/24 14:43:14
Build time 138.813 sec｜Game capacity 5.087KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Игра про биты</title>
    <style>
      /* CSS style for the game elements */
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        background-color: #f2f2f2;
        font-family: Arial, sans-serif;
      }
      
      #game-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      
      #score {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      
      #bits-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 20px;
      }
      
      .bit {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background-color: #e27d60;
        color: #fff;
        font-size: 30px;
        margin: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
      }
      
      .bit:hover {
        background-color: #c44536;
      }
      
      #message {
        font-size: 24px;
        font-weight: bold;
      }
      
      #reset-button {
        display: none;
        margin-top: 20px;
        padding: 10px 20px;
        background-color: #f39c12;
        color: #fff;
        font-size: 18px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
      }
      
      #reset-button:hover {
        background-color: #d68910;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div id="score">Score: <span id="score-value">0</span></div>
      <div id="bits-container"></div>
      <div id="message"></div>
      <button id="reset-button">Play Again</button>
    </div>
      
    <script>
      // JavaScript code for the game
      
      // Array of bit pictograms
      const bitPictograms = ["🔴", "🔵", "⚫️", "⚪️", "🟠", "🟢"];
      
      // Randomly shuffles an array
      function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
      }
      
      // Initializes the game
      function initGame() {
        const bitsContainer = document.getElementById("bits-container");
        bitsContainer.innerHTML = "";
        const shuffledBits = shuffleArray(bitPictograms);
        
        // Render the bit pictograms as clickable elements
        for (let i = 0; i < shuffledBits.length; i++) {
          const bit = document.createElement("div");
          bit.className = "bit";
          bit.innerText = shuffledBits[i];
          bit.addEventListener("click", handleBitClick);
          bitsContainer.appendChild(bit);
        }
        
        resetGame();
      }
      
      // Resets the game state
      function resetGame() {
        const message = document.getElementById("message");
        message.innerText = "Выберите цвет!";
        
        const resetButton = document.getElementById("reset-button");
        resetButton.style.display = "none";
      }
      
      // Handles the click event on a bit
      function handleBitClick(event) {
        const clickedBit = event.target;
        const scoreElement = document.getElementById("score-value");
        const score = parseInt(scoreElement.innerText);
        
        // Check if the clicked bit matches the target color (red)
        if (clickedBit.innerText === "🔴") {
          scoreElement.innerText = score + 1;
          clickedBit.style.backgroundColor = "#2ecc71";
          clickedBit.style.cursor = "default";
          
          const bitsContainer = document.getElementById("bits-container");
          for (let i = 0; i < bitsContainer.children.length; i++) {
            const bit = bitsContainer.children[i];
            bit.removeEventListener("click", handleBitClick);
          }
          
          const message = document.getElementById("message");
          message.innerText = "Победа!";
          
          const resetButton = document.getElementById("reset-button");
          resetButton.style.display = "block";
        } else {
          // Handle incorrect color selection
          scoreElement.innerText = score - 1;
          clickedBit.style.backgroundColor = "#e74c3c";
          clickedBit.style.cursor = "default";
        }
      }
      
      // Initialize the game when the page is loaded
      document.addEventListener("DOMContentLoaded", function(event) {
        initGame();
      });
      
      // Reset the game when the "Play Again" button is clicked
      const resetButton = document.getElementById("reset-button");
      resetButton.addEventListener("click", initGame);
    </script>
  </body>
</html>