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

No:45318

0>So game creator
Developer WinnerWiener1332｜Date and time 24/2/20 11:47:08
Build time 11.006 sec｜Game capacity 2.131KB｜

Script

Pictogram Matching Game

Match the pairs of pictograms!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Pictogram Matching Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    .pictogram {
      width: 100px;
      height: 100px;
      display: inline-block;
      margin: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Pictogram Matching Game</h1>
  <p>Match the pairs of pictograms!</p>
  <div id="gameBoard"></div>
  <p id="message"></p>

function shuffle(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]];
      }
    }

function createGameBoard() {
      shuffle(gameData);
      gameData.forEach((pictogram, index) => {
        const card = document.createElement('div');
        card.className = 'pictogram';
        card.textContent = '?';
        card.dataset.pictogram = pictogram;
        card.addEventListener('click', flipCard);
        document.getElementById('gameBoard').appendChild(card);
      });
    }

function flipCard() {
      if (flipped.length < 2) {
        this.textContent = this.dataset.pictogram;
        flipped.push(this);
      }

if (flipped.length === 2) {
        setTimeout(checkMatch, 1000);
      }
    }

flipped = [];

if (matched.length === gameData.length) {
        document.getElementById('message').textContent = 'Congratulations! You have matched all the pairs!';
      }
    }

createGameBoard();
  </script>
</body>
</html>