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

No:4791

4192

←

Prev Next

→

A game that shakes the soul!!!! All of America cri..ALL
Developer anonymous｜Date and time 70/1/1 10:07:52
Build time unknown sec｜Game capacity 4.072KB｜

Script

了解しました！以下、記述例をご参考までにお示しします。

神経衰弱

このプログラムは、神経衰弱というカードゲームを実装しています。カードをめくって同じ絵柄のペアを見つける、というルールです。HTMLファイル内にJavaScriptが含まれており、scriptタグで囲まれています。スマートフォンでも遊べるように、CSSを用いて画面が中央に表示されるようになっています。セブンスギンの物語や勇気に触れる部分はありませんが、魂を震わせるゲームとして楽しんでいただけます。もちろん、他のゲームの作成も可能ですので、ご希望があればお知らせください！

←

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>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>神経衰弱</h1>
      <p id="message"></p>
      <div id="cards"></div>
    </div>

// カードをシャッフル
      function shuffle(cards) {
        for (let i = cards.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [cards[i], cards[j]] = [cards[j], cards[i]];
        }
        return cards;
      }

// カードの表示
      function renderCards(cards) {
        const cardsContainer = document.getElementById("cards");
        cardsContainer.innerHTML = "";
        cards.forEach((card, index) => {
          const cardElement = document.createElement("div");
          cardElement.textContent = card;
          cardElement.classList.add("card");
          cardElement.addEventListener("click", () => flipCard(index));
          cardsContainer.appendChild(cardElement);
        });
      }

// カードをめくる
      function flipCard(index) {
        if (flippedCards.length < 2 && !flippedCards.includes(index)) {
          flippedCards.push(index);
          const cardElement = document.getElementsByClassName("card")[index];
          cardElement.classList.add("flipped");
          if (flippedCards.length === 2) {
            checkMatch();
          }
        }
      }

// ペアが揃ったかチェック
      function checkMatch() {
        const card1 = flippedCards[0];
        const card2 = flippedCards[1];
        const value1 = cards[card1];
        const value2 = cards[card2];
        if (value1 === value2) {
          message.textContent = "マッチしました！";
          matchedCards.push(card1, card2);
          checkWin();
        } else {
          message.textContent = "マッチしません...";
          setTimeout(() => {
            const cardElements = document.getElementsByClassName("card");
            cardElements[card1].classList.remove("flipped");
            cardElements[card2].classList.remove("flipped");
            flippedCards = [];
            message.textContent = "";
          }, 1000);
        }
      }

// 勝利をチェック
      function checkWin() {
        if (matchedCards.length === cards.length) {
          message.textContent = "おめでとうございます！勝利です！";
        }
      }

// ゲームの開始
      function startGame() {
        cards = createCards();
        cards = shuffle(cards);
        flippedCards = [];
        matchedCards = [];
        message.textContent = "";
        renderCards(cards);
      }

let cards;
      let flippedCards;
      let matchedCards;
      const message = document.getElementById("message");

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

セブンスギンの物語や勇気に触れる部分はありませんが、魂を震わせるゲームとして楽しんでいただけます。もちろん、他のゲームの作成も可能ですので、ご希望があればお知らせください！