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

No:3558

5908

grass of revival (e.g. after rebirth in the dead o..ALL
Developer anonymous｜Date and time 70/1/1 10:07:26
Build time unknown sec｜Game capacity 4.046KB｜

ゲームを作成しました。今回はスマホで遊べるシンプルな絵合わせゲームです。以下がHTMLコードになります。

絵合わせゲーム

また、以下が説明になります。 - HTMLでは、まずヘッダーにタイトルを設定し、スタイルシートを定義しています。また、絵合わせゲームのタイトルとカードを表示するためのdiv要素を用意しています。 - スタイルシートでは、カードのスタイルを設定しています。カードの大きさは80x80に設定し、枠線を付け、カーソルをポインターに設定しています。また、当たったカードに対して背景色を変えるように設定します。 - JavaScriptで、絵文字を配列にし、シャッフル。各カードの要素に対して、絵文字をランダムに埋め込むことで、何も選択していないカードを表現します。ユーザーがカードを2回めくるまで待機します。2つめくったカードの絵文字が同じ場合は、前のカードとともにグリーンバックグラウンドカラーに変更します。絵文字が異なる場合は、背景色と共に1秒間待機し、カードを再度ひっくり返して、誰も正解に到達しなかった場合に再び何も選択していないカードになります。以上で、スマホで遊べる絵合わせゲームが完成しました。

→ 　

0　

0　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

ゲームを作成しました。今回はスマホで遊べるシンプルな絵合わせゲームです。

以下がHTMLコードになります。

```
<!DOCTYPE html>
<html>
  <head>
    <title>絵合わせゲーム</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      .card {
        display: inline-block;
        margin: 10px;
        width: 80px;
        height: 80px;
        border: 2px solid black;
        cursor: pointer;
        background-color: white;
      }
      .matched {
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <h1>絵合わせゲーム</h1>
    <div>
      <div class="card" id="card1"></div>
      <div class="card" id="card2"></div>
      <div class="card" id="card3"></div>
      <div class="card" id="card4"></div>
    </div>
    <div>
      <div class="card" id="card5"></div>
      <div class="card" id="card6"></div>
      <div class="card" id="card7"></div>
      <div class="card" id="card8"></div>
    </div>

<script>
      const emojis = [
        "😀",
        "😁",
        "😂",
        "😃",
        "😄",
        "😅",
        "😆",
        "😇",
        "😉",
        "😊",
        "😋",
        "😌",
        "😍",
        "😎",
        "😏",
        "😐",
      ];

let firstCard = null;
      let secondCard = null;

const 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]];
        }
        return array;
      };

const handleClick = (event) => {
        const card = event.target;
        card.textContent = card.dataset.emoji;

if (!firstCard) {
          firstCard = card;
        } else if (!secondCard) {
          if (card === firstCard) {
            return;
          }
          secondCard = card;
          if (firstCard.dataset.emoji === secondCard.dataset.emoji) {
            firstCard.classList.add("matched");
            secondCard.classList.add("matched");
            firstCard = null;
            secondCard = null;
          } else {
            setTimeout(() => {
              firstCard.textContent = "";
              secondCard.textContent = "";
              firstCard = null;
              secondCard = null;
            }, 1000);
          }
        }
      };

const init = () => {
        const cards = document.querySelectorAll(".card");
        shuffle(emojis.concat(emojis)).forEach((emoji, i) => {
          cards[i].dataset.emoji = emoji;
          cards[i].addEventListener("click", handleClick);
        });
      };

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

また、以下が説明になります。

- HTMLでは、まずヘッダーにタイトルを設定し、スタイルシートを定義しています。また、絵合わせゲームのタイトルとカードを表示するためのdiv要素を用意しています。
- スタイルシートでは、カードのスタイルを設定しています。カードの大きさは80x80に設定し、枠線を付け、カーソルをポインターに設定しています。また、当たったカードに対して背景色を変えるように設定します。
- JavaScriptで、絵文字を配列にし、シャッフル。各カードの要素に対して、絵文字をランダムに埋め込むことで、何も選択していないカードを表現します。ユーザーがカードを2回めくるまで待機します。2つめくったカードの絵文字が同じ場合は、前のカードとともにグリーンバックグラウンドカラーに変更します。絵文字が異なる場合は、背景色と共に1秒間待機し、カードを再度ひっくり返して、誰も正解に到達しなかった場合に再び何も選択していないカードになります。

以上で、スマホで遊べる絵合わせゲームが完成しました。