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

No:4703

4699

←

Prev Next

→

53 Stages of the Tokaido
Developer anonymous｜Date and time 70/1/1 10:08:11
Build time unknown sec｜Game capacity 4.091KB｜

Script

了解しました。以下は「ムシャムシャ東海道五十三次」というゲームの実装例です。

ムシャムシャ東海道五十三次

スコア: 0

このゲームは「ムシャムシャ東海道五十三次」というタイトルで、30秒間でペアを揃えていくゲームです。最初に「スタート」ボタンをクリックすると、16枚のカードが表示されます。カードをクリックして表を覗くと、絵文字が表示されます。同じ絵文字のカードを2枚揃えると、スコアが加算されます。時間切れになるとゲームが終了し、スコアが表示されます。リスタートボタンをクリックすると、ゲームが再スタートします。なお、この実装例では絵文字を使用していますが、端末によっては正しく表示されない場合があります。ご了承ください。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下は「ムシャムシャ東海道五十三次」というゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <title>ムシャムシャ東海道五十三次</title>
  <style>
    #game-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .title {
      font-size: 2rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <h1 class="title">ムシャムシャ東海道五十三次</h1>
    <button id="start-button">スタート</button>
    <h2 id="score">スコア: 0</h2>
  </div>

let score = 0;
    let interval;

function startGame() {
      startButton.disabled = true;
      gameContainer.innerHTML = '';

// ゲームボードの生成
      for (let i = 0; i < 16; i++) {
        const card = document.createElement('div');
        card.classList.add('card');
        card.dataset.index = i;
        card.textContent = '❓';
        card.addEventListener('click', flipCard);
        gameContainer.appendChild(card);
      }

// カードのシャッフル
      shuffleCards();

// タイマーの設定
      let time = 30;
      interval = setInterval(() => {
        time--;
        if (time >= 0) {
          scoreElement.textContent = `スコア: ${score}  残り時間: ${time} 秒`;
        } else {
          clearInterval(interval);
          startButton.innerHTML = 'リスタート';
          startButton.disabled = false;
          gameContainer.innerHTML = '<h2 class="title">ゲーム終了</h2>';
          score = 0;
        }
      }, 1000);
    }

function flipCard() {
      const card = this;
      const index = card.dataset.index;

card.textContent = emojis[index];

setTimeout(() => {
        card.textContent = '❓';
      }, 1000);

if (!card.classList.contains('flipped')) {
        card.classList.add('flipped');
        const flippedCards = Array.from(gameContainer.getElementsByClassName('flipped'));
        if (flippedCards.length === 2) {
          const index1 = flippedCards[0].dataset.index;
          const index2 = flippedCards[1].dataset.index;

if (emojis[index1] === emojis[index2]) {
            score++;
            flippedCards.forEach((flippedCard) => {
              flippedCard.classList.add('matched');
              flippedCard.removeEventListener('click', flipCard);
            });
          } else {
            flippedCards.forEach((flippedCard) => {
              flippedCard.classList.remove('flipped');
            });
          }
        }
      }
    }

function shuffleCards() {
      for (let i = emojis.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [emojis[i], emojis[j]] = [emojis[j], emojis[i]];
      }
    }

startButton.addEventListener('click', startGame);
  </script>
</body>
</html>
```

なお、この実装例では絵文字を使用していますが、端末によっては正しく表示されない場合があります。ご了承ください。