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

No:27205

←

Prev Next

→

Keyboard
Developer User7816｜Date and time 23/12/5 1:55:23
Build time 100.777 sec｜Game capacity 4.054KB｜

Script

Матчинг Пиктограмм

Нажмите чтобы перевернуть пиктограммы и ищите пары!

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
      // Define a list of available pictograms
      var pictograms = [
        "🐶", "🐱", "🐭", "🐹", "🐰", "🐻", "🦊", "🐯", "🦁", "🐮", "🐷", 
        "🐸", "🐵", "🐔", "🐧", "🐦", "🐤", "🦆", "🦅", "🦉", "🦇", "🐺", 
        "🐗", "🐴", "🦄", "🐝", "🐛", "🦋", "🐌", "🐞", "🐜", "🦟", "🦗", 
        "🕷️", "🦂", "🐢", "🐍", "🦎", "🦖", "🦕", "🐙", "🦑", "🦐", "🦞"
      ];

// Function to generate a random pictogram from the list
      function getRandomPictogram() {
        var randomIndex = Math.floor(Math.random() * pictograms.length);
        return pictograms[randomIndex];
      }

// Function to check if two pictograms match
      function checkMatch(pictogram1, pictogram2) {
        return pictogram1 === pictogram2;
      }

// Create an array to store the pictograms representing the gameplay
      var gamePictograms = [];

// Function to start the game
      function startGame() {
        // Clear the game pictograms array
        gamePictograms = [];

// Generate the initial set of pictograms
        for (var i = 0; i < 16; i++) {
          var pictogram = getRandomPictogram();
          gamePictograms.push(pictogram);
        }

// Shuffle the game pictograms array
        gamePictograms.sort(() => Math.random() - 0.5);

// Display the pictograms on the screen
        var gameBoard = document.getElementById("game-board");
        gameBoard.innerHTML = "";

for (var i = 0; i < gamePictograms.length; i++) {
          var pictogramDiv = document.createElement("div");
          pictogramDiv.innerHTML = gamePictograms[i];
          gameBoard.appendChild(pictogramDiv);
        }
      }

// Function to handle user interaction
      function handleClick(event) {
        var clickedPictogramDiv = event.target;

if (!clickedPictogramDiv.classList.contains("flipped")) {
          clickedPictogramDiv.classList.add("flipped");
          
          // Check if two pictograms are flipped
          var flippedPictograms = document.getElementsByClassName("flipped");
          if (flippedPictograms.length === 2) {
            var pictogram1 = flippedPictograms[0].innerHTML;
            var pictogram2 = flippedPictograms[1].innerHTML;

// Check if the two flipped pictograms match
            if (checkMatch(pictogram1, pictogram2)) {
              // Two pictograms match, keep them flipped
              flippedPictograms[0].classList.add("matched");
              flippedPictograms[1].classList.add("matched");
            } else {
              // Two pictograms do not match, wait for a short moment and flip them back
              setTimeout(function() {
                flippedPictograms[0].classList.remove("flipped");
                flippedPictograms[1].classList.remove("flipped");
              }, 1000);
            }
          }
        }
      }
    </script>
    <style>
      .game-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }

.game-pictogram {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        font-size: 24px;
        background-color: lightblue;
        border-radius: 5px;
        margin: 5px;
        cursor: pointer;
      }

.flipped {
        background-color: pink;
      }

.matched {
        background-color: lightgreen;
        cursor: default;
      }
    </style>
  </head>
  <body>
    <h1>Матчинг Пиктограмм</h1>
    <h2>Нажмите чтобы перевернуть пиктограммы и ищите пары!</h2>
    <button onclick="startGame()">Начать игру</button>
    <div id="game-board" class="game-container" onclick="handleClick(event)"></div>
  </body>
</html>