super square peg in a round hole's game

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

No:4311

1525

←

Prev Next

→

super square peg in a round hole
Developer User3770｜Date and time 23/6/27 19:34:33
Build time 37.593 sec｜Game capacity 4.097KB｜

Script

はい、分かりました。スマホでも遊べるシンプルなカードマッチングゲームを作成しました。以下が実際のプログラムです。

0 / 10

このカードマッチングゲームでは、画面に10枚のカードが表示され、同じ絵柄のカードを2枚選んでペアを作るゲームです。スコアが最大値に達すると「You Won!」とアラートメッセージが表示され、再度ゲームを開始できます。また、スコアの表示には「/」を挟んだ2つのスパンを使用しており、スコアが増えると数字が変わっていくようになっています。絵柄には絵文字をいくつか使用しています。以上、カードマッチングゲームを実装しました。

←

Prev　Next

→ 　

Back　

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

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

はい、分かりました。スマホでも遊べるシンプルなカードマッチングゲームを作成しました。以下が実際のプログラムです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カードマッチングゲーム</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: #f5f5f5;
      font-size: 4em;
    }
  </style>
</head>
<body>
  <div>
    <span id="score">0</span>
    <span>/</span>
    <span id="max-score">10</span>
  </div>
  
  <div id="cards-container">
    <img id="card-0" src="https://img.icons8.com/emoji/96/000000/cherry-blossom.png"/>
    <img id="card-1" src="https://img.icons8.com/emoji/96/000000/sunflower.png"/>
    <img id="card-2" src="https://img.icons8.com/emoji/96/000000/honeybee.png"/>
    <img id="card-3" src="https://img.icons8.com/emoji/96/000000/dolphin.png"/>
    <img id="card-4" src="https://img.icons8.com/emoji/96/000000/dog-face.png"/>
    <img id="card-5" src="https://img.icons8.com/dusk/96/000000/shark.png"/>
    <img id="card-6" src="https://img.icons8.com/emoji/96/000000/alien-monster.png"/>
    <img id="card-7" src="https://img.icons8.com/emoji/96/000000/ghost.png"/>
    <img id="card-8" src="https://img.icons8.com/color/96/000000/clownfish--v1.png"/>
    <img id="card-9" src="https://img.icons8.com/emoji/96/000000/monkey.png"/>
  </div>

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 initGame() {
      shuffle([...cards]);
      score = 0;
      selectedCardIds = [];
      scoreEl.textContent = score;
      cards.forEach(card => {
        card.classList.remove('selected');
        card.addEventListener('click', onCardClick);
      });
    }

function onCardClick(event) {
      const clickedCard = event.currentTarget;
      const clickedCardId = Number(clickedCard.id.split('-')[1]);
      if (selectedCardIds.includes(clickedCardId)) {
        return; // Prevent double-clicking the same card
      }

clickedCard.classList.add('selected');
      selectedCardIds.push(clickedCardId);
      if (selectedCardIds.length === 2) {
        const [firstCardId, secondCardId] = selectedCardIds;
        const firstCard = cards[firstCardId];
        const secondCard = cards[secondCardId];
        if (firstCard.src === secondCard.src) {
          score++;
          scoreEl.textContent = score;
          firstCard.removeEventListener('click', onCardClick);
          secondCard.removeEventListener('click', onCardClick);
          selectedCardIds = [];
          if (score === Number(maxScore.textContent)) {
            alert('You Won!');
            initGame();
          }
        } else {
          setTimeout(() => {
            firstCard.classList.remove('selected');
            secondCard.classList.remove('selected');
            selectedCardIds = [];
          }, 1000);
        }
      }
    }

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

以上、カードマッチングゲームを実装しました。