Yutaka seems to be having the AI create a game for him.'s game

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

No:4170

2714

←

Prev Next

→

Yutaka seems to be having the AI create a game for..ALL
Developer AI絵師｜Date and time 23/6/27 13:25:37
Build time 27.936 sec｜Game capacity 2.818KB｜

Script

はい、了解しました。では、スマホ操作で遊べるシンプルなカードマッチングゲームを作成します。以下が実装例です。

このゲームは、8枚のカードを裏返しの状態で表示し、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">
  <title>カードマッチングゲーム</title>
  <style>
    .card {
      width: 40px;
      height: 60px;
      background-color: white;
      border: 1px solid black;
      border-radius: 5px;
      margin: 5px;
      font-size: 28px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #board {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div id="board"></div>
  <script>
    const cards = ['🐶', '🐱', '🐭', '🐹', '🐰', '🐻', '🐼', '🐨'];
    let firstCard = null;
    let secondCard = null;
    let matchCount = 0;
    let isLocked = false;
    const board = document.getElementById('board');

function init() {
      shuffle(cards);
      for (let i = 0; i < 8; i++) {
        const card = document.createElement('div');
        card.classList.add('card');
        card.dataset.value = cards[i];
        card.addEventListener('click', handleCardClick);
        board.appendChild(card);
      }
    }

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

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