Emoji Matching Game

このゲームでは、指定された絵文字を使って、カードをめくりながらペアを見つけるというゲームです。カードをクリックすると絵文字が表示され、2つのカードが一致すればペアとなります。すべてのカードが一致するまで続けてください。Reset Gameボタンをクリックするとゲームがリセットされます。ご希望の要件で作成したプログラムです。スマホでも遊べるようになっています。アップデートなどの要望があればお知らせください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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>Emoji Matching Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .card {
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 1px solid black;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
<script>
    // ゲームのカードに使用する絵文字リスト
    const emojis = ['😀', '😂', '😍', '🥳', '😎', '😊', '🤣', '😘'];
    let firstCard = null; // 最初のカード
    let secondCard = null; // 2番目のカード

// カードをシャッフルする関数
    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]];
        }
    }

// カードを表示する関数
    function showCards() {
        const gameContainer = document.getElementById("game-container");
        gameContainer.innerHTML = "";
        emojis.forEach(emoji => {
            const card = document.createElement("div");
            card.classList.add('card');
            card.textContent = emoji;
            gameContainer.appendChild(card);
        });
    }

// カードを選択した時の処理
    function selectCard(index) {
        if (!firstCard) {
            firstCard = index;
            return;
        }

if (!secondCard) {
            secondCard = index;
            if (emojis[firstCard] === emojis[secondCard]) {
                // 2つのカードが一致した場合
                setTimeout(() => {
                    const cards = document.getElementsByClassName("card");
                    cards[firstCard].classList.add("matched");
                    cards[secondCard].classList.add("matched");
                    firstCard = null;
                    secondCard = null;
                }, 500);
            } else {
                // 2つのカードが一致しなかった場合
                setTimeout(() => {
                    const cards = document.getElementsByClassName("card");
                    cards[firstCard].textContent = "";
                    cards[secondCard].textContent = "";
                    firstCard = null;
                    secondCard = null;
                }, 500);
            }
        }
    }

// カードがクリックされた時の処理
    function cardClickHandler(event) {
        const index = Array.from(document.getElementsByClassName("card")).indexOf(event.target);
        if (index !== -1 && !event.target.classList.contains("matched")) {
            event.target.textContent = emojis[index];
            selectCard(index);
        }
    }

// ゲームをリセットする関数
    function resetGame() {
        shuffleCards();
        showCards();
        const cards = document.getElementsByClassName("card");
        Array.from(cards).forEach(card => {
            card.classList.remove("matched");
            card.textContent = "";
        });
        firstCard = null;
        secondCard = null;
    }

// ゲームの初期化と表示
    function initGame() {
        shuffleCards();
        showCards();
    }

// 初期化
    initGame();

// イベントリスナーの設定
    const gameContainer = document.getElementById("game-container");
    gameContainer.addEventListener("click", cardClickHandler);

const resetButton = document.getElementById("reset-button");
    resetButton.addEventListener("click", resetGame);
</script>
<h1>Emoji Matching Game</h1>
<div id="game-container"></div>
<button id="reset-button">Reset Game</button>
</body>
</html>
```

このゲームでは、指定された絵文字を使って、カードをめくりながらペアを見つけるというゲームです。カードをクリックすると絵文字が表示され、2つのカードが一致すればペアとなります。すべてのカードが一致するまで続けてください。Reset Gameボタンをクリックするとゲームがリセットされます。

ご希望の要件で作成したプログラムです。スマホでも遊べるようになっています。アップデートなどの要望があればお知らせください。