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

No:4632

3029

←

Prev Next

→

Wind Forest Volcano
Developer User3795｜Date and time 23/6/28 13:28:36
Build time 42.759 sec｜Game capacity 5.226KB｜

Script

了解です。以下にスマホで遊べるカードマッチングゲームの例を示します。

カードマッチングゲーム

このプログラムは、スマホで遊べるシンプルなカードマッチングゲームです。画面には12枚のカードが表示され、2枚のカードをめくって絵柄が一致するかチェックします。全てのカードをめくり終わると、「リスタート」ボタンを押すことでゲームをリセットできます。カードの絵柄は絵文字を使用しており、シャッフルされた状態で表示されます。カードをめくるときには、スマホのタップ操作を想定しています。ご希望の要件に合わせて、JavaScriptのコードやゲームのルールを調整していただければと思います。

←

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">
    <title>カードマッチングゲーム</title>
    <style>
        .card {
            width: 80px;
            height: 80px;
            font-size: 50px;
            text-align: center;
            line-height: 80px;
            background-color: #eaeaea;
            border-radius: 5px;
            margin: 5px;
            display: inline-block;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>カードマッチングゲーム</h1>

<div id="game-container">
        <div id="cards"></div>
        <button id="restart-button">リスタート</button>
    </div>

// カードをシャッフルする関数
        function shuffle(array) {
            let currentIndex = array.length;

while (currentIndex !== 0) {
                let randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex--;

let temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
            }

return array;
        }

// カードのHTMLを生成する関数
        function createCardElement(card, index) {
            const cardElement = document.createElement('div');
            cardElement.classList.add('card');
            cardElement.setAttribute('data-index', index);
            cardElement.textContent = card;
            return cardElement;
        }

// カードをめくる処理
        function flipCard(index) {
            const cardElement = document.querySelector(`.card[data-index="${index}"]`);

if (gameActive && !matchedCards.has(index) && flippedCards.size < 2) {
                // カードをめくるアニメーション
                cardElement.classList.add('flipped');
                flippedCards.add(index);

if (flippedCards.size === 2) {
                    const [cardIndex1, cardIndex2] = [...flippedCards];
                    const card1 = emojis[cardIndex1];
                    const card2 = emojis[cardIndex2];

if (card1 === card2) {
                        matchedCards.add(cardIndex1);
                        matchedCards.add(cardIndex2);
                        flippedCards.clear();
                    } else {
                        gameActive = false;

setTimeout(() => {
                            const cardElement1 = document.querySelector(`.card[data-index="${cardIndex1}"]`);
                            const cardElement2 = document.querySelector(`.card[data-index="${cardIndex2}"]`);
                            cardElement1.classList.remove('flipped');
                            cardElement2.classList.remove('flipped');
                            flippedCards.clear();
                            gameActive = true;
                        }, 1000);
                    }
                }
            }
        }

// ゲームのリスタート処理
        function restartGame() {
            emojis.forEach((_emoji, index) => {
                const cardElement = document.querySelector(`.card[data-index="${index}"]`);
                cardElement.classList.remove('flipped');
            });
            matchedCards.clear();
            flippedCards.clear();
            gameActive = true;
        }

// カードをシャッフル
        const shuffledEmojis = shuffle(emojis);

// カードを表示
        const cardsContainer = document.getElementById('cards');

shuffledEmojis.forEach((emoji, index) => {
            const cardElement = createCardElement(emoji, index);
            cardElement.addEventListener('click', () => flipCard(index));
            cardsContainer.appendChild(cardElement);
        });

// リスタートボタンの設定
        const restartButton = document.getElementById('restart-button');
        restartButton.addEventListener('click', restartGame);

// ゲームの状態を管理する変数
        let gameActive = true;
        const matchedCards = new Set();
        const flippedCards = new Set();
    </script>
</body>
</html>
```

このプログラムは、スマホで遊べるシンプルなカードマッチングゲームです。画面には12枚のカードが表示され、2枚のカードをめくって絵柄が一致するかチェックします。全てのカードをめくり終わると、「リスタート」ボタンを押すことでゲームをリセットできます。

カードの絵柄は絵文字を使用しており、シャッフルされた状態で表示されます。カードをめくるときには、スマホのタップ操作を想定しています。

ご希望の要件に合わせて、JavaScriptのコードやゲームのルールを調整していただければと思います。