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

No:20963

←

Prev Next

→

Empty memory game
Developer User7745｜Date and time 23/10/12 8:16:03
Build time 72.299 sec｜Game capacity 3.347KB｜

Script

Sure! Here's an example of a simple memory game implemented as a single HTML file using JavaScript:

Memory Game

This game creates a memory game where the player needs to match pairs of pictograms by flipping cards and memorizing their locations. The cards are represented by pictograms (e.g., emojis). When two cards are flipped, the game checks if they match. If they do, the cards remain revealed (green background). If they don't match, the cards are hidden again. The game continues until all cards are matched, and then a congratulatory message is displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Sure! Here's an example of a simple memory game implemented as a single HTML file using JavaScript:

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

// Create an array with matching pairs of cards
    const cards = [...pictograms, ...pictograms];

// Shuffle the cards randomly
    cards.sort(() => Math.random() - 0.5);

// Create the game board from shuffled cards
    const gameBoard = document.getElementById("game-board");

cards.forEach((card, index) => {
      // Create a new card element
      const cardElement = document.createElement("div");
      cardElement.classList.add("card");

// Set the card value (pictogram)
      cardElement.textContent = card;

// Add event listener for clicking on a card
      cardElement.addEventListener("click", () => {
        // Only allow flipping the card if it's not already matched or revealed
        if (!cardElement.classList.contains("revealed") && !cardElement.classList.contains("matched")) {
          cardElement.classList.add("revealed");

// Check if it's the second card (after a short delay, to allow both to be revealed)
          if (document.getElementsByClassName("revealed").length === 2) {
            setTimeout(() => {
              const revealedCards = document.getElementsByClassName("revealed");

// Check if the two revealed cards match
              if (revealedCards[0].textContent === revealedCards[1].textContent) {
                // If cards match, mark them as matched
                Array.from(revealedCards).forEach((card) => card.classList.add("matched"));
              } else {
                // If cards don't match, hide them again
                Array.from(revealedCards).forEach((card) => card.classList.remove("revealed"));
              }

// Check if all cards are matched (game over)
              if (document.getElementsByClassName("matched").length === cards.length) {
                alert("Congratulations! You've matched all the cards!");
              }
            }, 500); // Delay before checking for a match
          }
        }
      });

// Append the card to the game board
      gameBoard.appendChild(cardElement);
    });
  </script>

.revealed {
      background-color: #ddd;
    }

.matched {
      background-color: #8eff8e;
    }
  </style>
</body>
</html>
```