Boil water with consecutive hits's game

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

No:4322

476

←

Prev Next

→

Boil water with consecutive hits
Developer User3772｜Date and time 23/6/27 19:44:16
Build time 30.523 sec｜Game capacity 3.889KB｜

Script

了解。以下、『神経衰弱』のゲームを実装します。

上記のコードで、『神経衰弱』というカードゲームを実装しました。カードを選択して2枚めくり、そのカードの値が一致すればカードが消えます。全てのカードを消すとクリアです。スマホでも遊べるように画面に収まるようにサイズ調整しています。絵文字も使って、カードの中身を可愛くしました。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解。以下、『神経衰弱』のゲームを実装します。

```html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>神経衰弱</title>
  <style>
    /* カードのスタイル */
    .card {
      display: inline-block;
      margin: 10px;
      text-align: center;
      width: 100px;
      height: 140px;
      background-color: #ddd;
      border-radius: 10px;
      font-size: 50px;
      line-height: 140px;
      cursor: pointer;
    }
    /* 選択されたカードのスタイル */
    .selected {
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div id="cards"></div>
  <script>
    // カードの値を格納する配列
    const values = ['😀', '🚀', '🎉', '🐶', '🌸', '🌭', '🥪', '🏀'];

// カードを作成する関数
    function createCard(value, index) {
      const card = document.createElement('div');
      card.classList.add('card');
      card.dataset.index = index;
      card.textContent = value;
      card.addEventListener('click', () => {
        selectCard(card);
      });
      return card;
    }

// カードを選択する関数
    function selectCard(selected) {
      selected.classList.add('selected');
      const selectedValues = document.querySelectorAll('.selected');
      if (selectedValues.length === 2) {
        disableClickableCards();
        const firstValue = selectedValues[0].textContent;
        const secondValue = selectedValues[1].textContent;
        if (firstValue === secondValue) {
          setTimeout(() => {
            selectedValues.forEach(card => {
              card.removeEventListener('click', () => {});
              card.style.display = 'none';
            });
            enableClickableCards();
            checkClear();
          }, 1000);
        } else {
          setTimeout(() => {
            selectedValues.forEach(card => {
              card.classList.remove('selected');
            });
            enableClickableCards();
          }, 1000);
        }
      }
    }

// クリアしたかどうかをチェックする関数
    function checkClear() {
      const displayCards = document.querySelectorAll('.card:not([style="display: none;"])');
      if (displayCards.length === 0) {
        alert('Clear!');
        init();
      }
    }

// クリック可能なカードを無効化する関数
    function disableClickableCards() {
      const cards = document.querySelectorAll('.card:not([style="display: none;"])');
      cards.forEach(card => {
        card.removeEventListener('click', () => {});
      });
    }

// クリック可能なカードを有効化する関数
    function enableClickableCards() {
      const cards = document.querySelectorAll('.card:not([style="display: none;"])');
      cards.forEach(card => {
        card.addEventListener('click', () => {
          selectCard(card);
        });
      });
    }

// ゲームを初期化する関数
    function init() {
      const cardsArea = document.getElementById('cards');
      cardsArea.innerHTML = '';
      const doubledValues = values.concat(values);
      const shuffledValues = doubledValues.sort(() => Math.random() - 0.5);
      shuffledValues.forEach((value, index) => {
        const card = createCard(value, index);
        cardsArea.appendChild(card);
      });
      enableClickableCards();
    }

// ゲームを初期化
    init();
  </script>
</body>
</html>
```