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

No:9746

161

←

Prev Next

→

High Touch Memory
Developer User3788｜Date and time 23/7/27 4:28:31
Build time 20.516 sec｜Game capacity 2.324KB｜

Script

ハイタッチ・メモリー

クリックしてカードをめくろう！同じ絵文字のカードを見つけよう！

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      width: 100px;
      height: 100px;
      margin: 10px;
      padding: 10px;
      border: 1px solid black;
      background-color: lightgray;
      text-align: center;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1>ハイタッチ・メモリー</h1>
  <p>クリックしてカードをめくろう！同じ絵文字のカードを見つけよう！</p>
  <div id="game-board"></div>
  <script>
    const emojis = ['🦄', '🐶', '🐱', '🐼', '🐷', '🐸', '🐤', '🐟'];
    const gameBoard = document.getElementById('game-board');
    let firstCard = null;
  
    // シャッフル関数
    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() {
      const cardPairs = emojis.concat(emojis);
      shuffle(cardPairs);
  
      for (let i = 0; i < cardPairs.length; i++) {
        const card = document.createElement('div');
        card.className = 'card';
        card.textContent = cardPairs[i];
        card.addEventListener('click', flipCard);
        gameBoard.appendChild(card);
      }
    }
  
    // カードのめくる処理
    function flipCard() {
      if (this.classList.contains('selected')) {
        return;
      }
  
      this.classList.add('selected');
      this.textContent = this.textContent;
  
      if (firstCard === null) {
        firstCard = this;
      } else {
        setTimeout(checkCards, 1000, firstCard, this);
        firstCard = null;
      }
    }
  
    // めくられたカードのチェック
    function checkCards(firstCard, secondCard) {
      if (firstCard.textContent === secondCard.textContent) {
        firstCard.style.backgroundColor = 'green';
        secondCard.style.backgroundColor = 'green';
        firstCard.removeEventListener('click', flipCard);
        secondCard.removeEventListener('click', flipCard);
      } else {
        firstCard.classList.remove('selected');
        secondCard.classList.remove('selected');
        firstCard.textContent = '';
        secondCard.textContent = '';
      }
    }
  
    createGameBoard();
  </script>
</body>
</html>