F1's game | AI game creator

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

No:3780

975

F1
Developer User1006｜Date and time 23/6/26 15:26:10
Build time 43.519 sec｜Game capacity 4.588KB｜

わかりました。今回は、「神経衰弱」ゲームを作成することにします。以下がゲームの仕様です。 ① ゲーム画面は縦向きのみに対応し、スマホで遊べるよう調整する。 ② ゲーム開始時、ランダムに16枚のカードが裏返しの状態で配置される。 ③ プレイヤーは2枚のカードをひっくり返して、同じ絵柄のカードをそろえる。そろったカードは画面から消える。 ④ プレイヤーが同じ絵柄のカードを2枚ひっくり返せなかった場合、カードはもとの裏返しの状態に戻る。 ⑤ プレイヤーが全てのカードをそろえるとゲームクリアとなる。 ⑥ カードは全部で8種類、すなわち8組用意されるものとする。以下が実際のプログラムです。JavaScriptをscriptタグ内に記述しています。

以上が、実際に動作する「神経衰弱」ゲームです。絵文字を使用しているため、スマホでもわかりやすいと思います。また、部分的にゲーム化する方向であれば、一部の機能を省略してシンプルなゲームを作成することも可能です。

→ 　

1　

0　

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

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

(C)2023 HisashiApp

わかりました。今回は、「神経衰弱」ゲームを作成することにします。

以下がゲームの仕様です。

① ゲーム画面は縦向きのみに対応し、スマホで遊べるよう調整する。
② ゲーム開始時、ランダムに16枚のカードが裏返しの状態で配置される。
③ プレイヤーは2枚のカードをひっくり返して、同じ絵柄のカードをそろえる。そろったカードは画面から消える。
④ プレイヤーが同じ絵柄のカードを2枚ひっくり返せなかった場合、カードはもとの裏返しの状態に戻る。
⑤ プレイヤーが全てのカードをそろえるとゲームクリアとなる。
⑥ カードは全部で8種類、すなわち8組用意されるものとする。

以下が実際のプログラムです。JavaScriptをscriptタグ内に記述しています。

<!DOCTYPE html>
<html>
<head>
  <title>神経衰弱ゲーム</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 0;
      font-size: 0;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      height: 100vh;
      background-color: #eeeeee;
    }
    .card {
      width: calc(25% - 10px);
      height: calc(25% - 10px);
      margin: 5px;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
      cursor: pointer;
    }
    .card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
  </style>
  <script>
    const images = [
      "🐱",
      "🦊",
      "🐻",
      "🐷",
      "🐶",
      "🦁",
      "🐨",
      "🐸"
    ];
    let cards = [];
    let flippedCards = [];
    let matchedCards = [];
    let totalMatches = 0;

function createCards() {
      let doubleImages = images.concat(images);
      doubleImages.sort(() => Math.random() - 0.5);
      cards = doubleImages.map(image => {
        return {
          image,
          flipped: false,
          matched: false
        };
      });
    }

function drawCards() {
      const container = document.querySelector(".container");
      while (container.firstChild) {
        container.removeChild(container.firstChild);
      }
      cards.forEach((card, index) => {
        const cardElement = document.createElement("div");
        cardElement.classList.add("card");
        cardElement.dataset.index = index;
        if (card.flipped) {
          const imageElement = document.createElement("img");
          imageElement.src = `https://via.placeholder.com/350x150/${encodeURIComponent(card.image)}/ffffff?text=${encodeURIComponent(card.image)}`;
          cardElement.appendChild(imageElement);
        }
        container.appendChild(cardElement);
      });
    }

function flipCard(index) {
      cards[index].flipped = true;
      flippedCards.push(index);
      drawCards();
      if (flippedCards.length === 2) {
        const firstCard = cards[flippedCards[0]];
        const secondCard = cards[flippedCards[1]];
        if (firstCard.image === secondCard.image) {
          cards[flippedCards[0]].matched = true;
          cards[flippedCards[1]].matched = true;
          matchedCards.push(flippedCards[0], flippedCards[1]);
          totalMatches += 1;
          if (totalMatches === images.length) {
            alert("ゲームクリア！");
          }
        }
        setTimeout(() => {
          cards[flippedCards[0]].flipped = false;
          cards[flippedCards[1]].flipped = false;
          flippedCards = [];
          drawCards();
        }, 1000);
      }
    }

function init() {
      createCards();
      drawCards();
    }

init();

const container = document.querySelector(".container");
    container.addEventListener("click", event => {
      const cardElement = event.target.closest(".card");
      if (cardElement) {
        const index = cardElement.dataset.index;
        if (!matchedCards.includes(Number(index))) {
          flipCard(Number(index));
        }
      }
    });
  </script>
</head>
<body>
  <div class="container"></div>
</body>
</html>

以上が、実際に動作する「神経衰弱」ゲームです。絵文字を使用しているため、スマホでもわかりやすいと思います。また、部分的にゲーム化する方向であれば、一部の機能を省略してシンプルなゲームを作成することも可能です。