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

No:21863

←

Prev Next

→

神経衰弱
Developer バファリンヌ｜Date and time 23/10/18 22:33:54
Build time 129.919 sec｜Game capacity 4.782KB｜

Script

了解しました。以下に神経衰弱のゲームを実装したHTMLファイルの例を記述します。

神経衰弱

このゲームでは、10種類のカードが2枚ずつで共に20枚のカードを用意しています。カードをクリックすると表の絵文字が表示され、2枚めくって一致しているかどうかが判定されます。一致した場合はカードが裏返しのまま、一致しなかった場合はカードが裏返されます。全てのカードが一致すればゲームクリアとなります。開始するには「スタート」ボタンをクリックしてください。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解しました。以下に神経衰弱のゲームを実装したHTMLファイルの例を記述します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>神経衰弱</title>
    <style>
        .card {
            border: 1px solid gray;
            border-radius: 5px;
            width: 80px;
            height: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>神経衰弱</h1>
    <div id="gameBoard"></div>
    <button id="startButton">スタート</button>
    <script>
        // カードの種類とデータ
        const cards = [
            ["😀", "😀"],
            ["😎", "😎"],
            ["🐶", "🐶"],
            ["🍣", "🍣"],
            ["🏀", "🏀"],
            ["🎮", "🎮"],
            ["🌸", "🌸"],
            ["🌙", "🌙"],
            ["💡", "💡"],
            ["🍕", "🍕"]
        ];

// ゲームの状態管理用変数
        let isStarted = false;
        let isClickable = false;
        let firstCard = null;
        let secondCard = null;

// ゲームの初期化
        function initGame() {
            const gameBoard = document.getElementById("gameBoard");
            gameBoard.innerHTML = "";

// カードをランダムに並び替えて表示
            const shuffledCards = shuffle(cards.flat());
            for (const card of shuffledCards) {
                const cardDiv = document.createElement("div");
                cardDiv.classList.add("card");
                cardDiv.textContent = card;
                cardDiv.addEventListener("click", flipCard);
                gameBoard.appendChild(cardDiv);
            }
        }

// カードをめくる処理
        function flipCard(event) {
            if (!isStarted || !isClickable) {
                return;
            }

const card = event.target;
            if (card === firstCard || card === secondCard) {
                return;
            }

card.textContent = card.innerText;
            card.classList.add("flipped");

if (firstCard === null) {
                firstCard = card;
            } else if (secondCard === null) {
                secondCard = card;

// 2枚目のカードをめくった後、一致判定と処理の遅延を入れる
                setTimeout(checkMatch, 500);
            }
        }

// カードの一致判定と処理
        function checkMatch() {
            const firstCardContent = firstCard.textContent;
            const secondCardContent = secondCard.textContent;

if (firstCardContent === secondCardContent) {
                // 一致した場合
                firstCard.removeEventListener("click", flipCard);
                secondCard.removeEventListener("click", flipCard);
            } else {
                // 一致しなかった場合
                firstCard.textContent = "";
                secondCard.textContent = "";
                firstCard.classList.remove("flipped");
                secondCard.classList.remove("flipped");
            }

firstCard = null;
            secondCard = null;
        }

// ゲームのスタート
        function startGame() {
            if (isStarted) {
                return;
            }

isStarted = true;
            isClickable = true;
            document.getElementById("startButton").disabled = true;
        }

// 配列をランダムに並び替える関数
        function 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;
        }

// ゲームの初期化とスタートボタンのクリックイベントを設定
        document.getElementById("startButton").addEventListener("click", startGame);
        initGame();
    </script>
</body>
</html>
```

このゲームでは、10種類のカードが2枚ずつで共に20枚のカードを用意しています。カードをクリックすると表の絵文字が表示され、2枚めくって一致しているかどうかが判定されます。一致した場合はカードが裏返しのまま、一致しなかった場合はカードが裏返されます。全てのカードが一致すればゲームクリアとなります。

開始するには「スタート」ボタンをクリックしてください。