Memory game's game | AI game creator

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

No:48492

102

Memory game
Developer User20712｜Date and time 24/3/2 9:44:28
Build time 6.653 sec｜Game capacity 2.007KB｜

→ 　

1　

1　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Memory Game</title>
</head>
<body>
  <div id="game-board"></div>

<script>
    const icons = ["🌞", "🍊", "🌸", "🎈", "🍦", "🍕"];
    let gameTiles = icons.concat(icons);
    let flippedTiles = [];
    let matchedTiles = [];

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]];
      }
      return array;
    }

function handleTileClick(index) {
      if (flippedTiles.length < 2 && !flippedTiles.includes(index) && !matchedTiles.includes(index)) {
        flippedTiles.push(index);
        document.getElementById(`tile${index}`).innerText = gameTiles[index];
        
        if (flippedTiles.length === 2) {
          const [firstIndex, secondIndex] = flippedTiles;
          if (gameTiles[firstIndex] === gameTiles[secondIndex]) {
            matchedTiles.push(firstIndex, secondIndex);
          } else {
            setTimeout(() => {
              document.getElementById(`tile${firstIndex}`).innerText = "";
              document.getElementById(`tile${secondIndex}`).innerText = "";
            }, 500);
          }
          flippedTiles = [];
        }
      }
    }

function initializeGame() {
      gameTiles = shuffle(gameTiles);
      const gameBoard = document.getElementById("game-board");
      gameTiles.forEach((icon, index) => {
        const tile = document.createElement("div");
        tile.id = `tile${index}`;
        tile.classList.add("tile");
        tile.innerText = "";
        tile.addEventListener("click", () => handleTileClick(index));
        gameBoard.appendChild(tile);
      });
    }

initializeGame();
  </script>
  
  <style>
    .tile {
      display: inline-block;
      font-size: 36px;
      width: 50px;
      height: 50px;
      border: 1px solid black;
      text-align: center;
      margin: 5px;
      cursor: pointer;
    }
  </style>
</body>
</html>