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

No:33710

←

Prev Next

→

Matching game
Developer User15904｜Date and time 24/1/6 11:34:34
Build time 33.268 sec｜Game capacity 3.64KB｜

Script

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

Matching Game

To play the game, simply open the HTML file in a web browser, and you should see the matching game interface. The game starts automatically, and you can click on the cards to flip them. The objective is to find all the matching pairs. Once all pairs are found, an alert message will appear, indicating that you won the game. Please note that this is a basic example just to showcase the game mechanics, and you can customize the styling, symbols, or game logic as per your requirements.

←

Prev　Next

→ 　

Back　

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

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Matching Game</title>
  <style>
    .card {
      width: 80px;
      height: 80px;
      background-color: lightgray;
      margin: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Matching Game</h1>

const symbols = ["🍎", "🍌", "🍒", "🍉", "🍇", "🍓", "🥥", "🍑"];
    const totalCards = symbols.length * 2;

let isGameStarted = false;
    let firstCard = null;
    let secondCard = null;
    let successfulMatches = 0;

function startGame() {
      isGameStarted = true;
      initializeCards();
    }

function initializeCards() {
      const cards = [];

for (let i = 0; i < totalCards; i++) {
        const symbolIndex = i % symbols.length;
        const symbol = symbols[symbolIndex];
        const card = createCard(symbol);
        cards.push(card);
      }

shuffle(cards);

cardsContainer.innerHTML = "";
      cards.forEach(card => cardsContainer.append(card));
    }

function createCard(symbol) {
      const card = document.createElement("div");
      card.classList.add("card");
      card.innerHTML = symbol;
      card.addEventListener("click", () => flipCard(card));

return card;
    }

function flipCard(card) {
      // Ignore click events if the card is already flipped or two cards are already selected
      if (!isGameStarted || card.classList.contains("flipped") || secondCard !== null) {
        return;
      }
      
      card.classList.add("flipped");

if (firstCard === null) {
        firstCard = card;
      } else {
        secondCard = card;
        checkMatch();
      }
    }

function checkMatch() {
      if (firstCard.innerHTML === secondCard.innerHTML) {
        successfulMatches++;

if (successfulMatches === symbols.length) {
          // All matches found, game over
          setTimeout(() => alert("Congratulations! You won!"), 500);
        }

clearSelectedCards();
      } else {
        // Wait 1 second to show the second card before flipping back
        setTimeout(() => {
          firstCard.classList.remove("flipped");
          secondCard.classList.remove("flipped");
          clearSelectedCards();
        }, 1000);
      }
    }

function clearSelectedCards() {
      firstCard = null;
      secondCard = null;
    }

// Fisher-Yates shuffle algorithm
    function shuffle(array) {
      let currentIndex = array.length;
      let temporaryValue, randomIndex;

while (currentIndex !== 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;

temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }

return array;
    }

startGame();
  </script>
</body>
</html>
```

Please note that this is a basic example just to showcase the game mechanics, and you can customize the styling, symbols, or game logic as per your requirements.