Pictograms are displayed in 3D.'s game

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

No:11231

134

←

Prev Next

→

Pictograms are displayed in 3D.
Developer User4825｜Date and time 23/8/8 21:21:24
Build time 27.438 sec｜Game capacity 2.516KB｜

Script

了解しました👍. 以下にサンプルとして、シンプルな絵合わせゲームの実装例を示します。ゲームは1枚のHTMLファイルとして実装されており、JavaScriptを含みます。スマホ操作に対応しており、絵文字を使用しています。

😀

このプログラムでは、カードをクリックすると絵文字が変化し、同じ絵文字のカードを2枚選ぶとカードが消えるというゲームです。全てのカードが消えると「おめでとう！クリアです！」というアラートが表示され、ページがリロードされます。ご参考までにどうぞ。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>絵合わせゲーム</title>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      background-color: #f2f2f2;
      font-size: 3rem;
    }
    
    .card {
      width: 50vmin;
      height: 50vmin;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="card" onclick="flipCard(this)">
    <p>
      😀
    </p>
  </div>
  
  <script>
    let isFlipped = false;
    let firstCard;

function flipCard(card) {
      if (!isFlipped) {
        card.innerHTML = `
          <p>
            🎉
          </p>
        `;
        isFlipped = true;
        firstCard = card;
      } else {
        if (card === firstCard) {
          card.innerHTML = `
            <p>
              😀
            </p>
          `;
          isFlipped = false;
          firstCard = null;
        } else {
          card.innerHTML = `
            <p>
              👍
            </p>
          `;
          setTimeout(() => {
            card.style.display = 'none';
            firstCard.style.display = 'none';
            isFlipped = false;
            firstCard = null;

const remainingCards = Array.from(document.getElementsByClassName('card')).filter(c => c.style.display !== 'none');
            if (remainingCards.length === 0) {
              alert('おめでとう！クリアです！');
              location.reload();
            }
          }, 1000);
        }
      }
    }
  </script>
</body>
</html>
```

このプログラムでは、カードをクリックすると絵文字が変化し、同じ絵文字のカードを2枚選ぶとカードが消えるというゲームです。全てのカードが消えると「おめでとう！クリアです！」というアラートが表示され、ページがリロードされます。

ご参考までにどうぞ。