Emoji消消乐小游戏

游戏场景 HTML/CSS/JS 交互设计

案例介绍

这是一个使用对话agent创建的纯HTML、CSS和JavaScript实现的Emoji表情消乐小游戏。玩家需要点击卡片翻开emoji表情，找出所有匹配的表情对。游戏包含计分系统和重新开始功能。

Prompt提示语

使用html写一个emoji表情消消乐游戏

生成的代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emoji 消消乐</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f0f8ff;
            padding: 20px;
        }

        h1 {
            color: #ff6b6b;
            margin-bottom: 10px;
        }

        .game-info {
            display: flex;
            justify-content: space-between;
            width: 300px;
            margin-bottom: 20px;
            font-size: 18px;
        }

        .game-board {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 5px;
            margin-bottom: 20px;
        }

        .emoji-cell {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            background-color: white;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .emoji-cell:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .emoji-cell.selected {
            background-color: #ffcc5c;
            transform: scale(1.1);
        }

        .emoji-cell.matched {
            visibility: hidden;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>Emoji 消消乐</h1>
    <div class="game-info">
        <div>分数: <span id="score">0</span></div>
        <div>剩余: <span id="remaining">16</span> 对</div>
    </div>
    <div class="game-board" id="gameBoard"></div>
    <button id="restartBtn">重新开始</button>

    <script>
        const emojis = ['😀', '😂', '😍', '😎', '🥳', '🤩', '🤪', '🧐', '😇', '🤠', '🥺', '🤯', '🥶', '🤢', '👻', '🤖'];
        let selectedEmojis = [];
        let matchedPairs = 0;
        let score = 0;
        let canSelect = true;

        // 初始化游戏
        function initGame() {
            const gameBoard = document.getElementById('gameBoard');
            gameBoard.innerHTML = '';
            selectedEmojis = [];
            matchedPairs = 0;
            score = 0;
            canSelect = true;

            document.getElementById('score').textContent = score;
            document.getElementById('remaining').textContent = emojis.length;

            // 创建emoji对并随机排序
            let gameEmojis = [...emojis, ...emojis];
            gameEmojis = shuffleArray(gameEmojis);

            // 创建游戏板
            gameEmojis.forEach((emoji, index) => {
                const cell = document.createElement('div');
                cell.className = 'emoji-cell';
                cell.dataset.emoji = emoji;
                cell.dataset.index = index;
                cell.textContent = '❓';
                cell.addEventListener('click', handleCellClick);
                gameBoard.appendChild(cell);
            });
        }

        // 处理单元格点击
        function handleCellClick(e) {
            if (!canSelect) return;

            const cell = e.target;

            // 如果已经选中或已匹配，则忽略
            if (cell.classList.contains('selected') || cell.classList.contains('matched')) {
                return;
            }

            // 显示emoji
            cell.textContent = cell.dataset.emoji;
            cell.classList.add('selected');

            // 添加到已选数组
            selectedEmojis.push(cell);

            // 如果选中了两个emoji
            if (selectedEmojis.length === 2) {
                canSelect = false;

                // 检查是否匹配
                if (selectedEmojis[0].dataset.emoji === selectedEmojis[1].dataset.emoji) {
                    // 匹配成功
                    setTimeout(() => {
                        selectedEmojis.forEach(cell => {
                            cell.classList.remove('selected');
                            cell.classList.add('matched');
                        });

                        matchedPairs++;
                        score += 10;
                        document.getElementById('score').textContent = score;
                        document.getElementById('remaining').textContent = emojis.length - matchedPairs;

                        selectedEmojis = [];
                        canSelect = true;

                        // 检查游戏是否结束
                        if (matchedPairs === emojis.length) {
                            setTimeout(() => {
                                alert(`恭喜你赢了！最终得分: ${score}`);
                            }, 500);
                        }
                    }, 500);
                } else {
                    // 不匹配
                    setTimeout(() => {
                        selectedEmojis.forEach(cell => {
                            cell.textContent = '❓';
                            cell.classList.remove('selected');
                        });

                        selectedEmojis = [];
                        canSelect = true;

                        // 扣分
                        if (score > 0) {
                            score -= 2;
                            document.getElementById('score').textContent = score;
                        }
                    }, 1000);
                }
            }
        }

        // 随机打乱数组
        function shuffleArray(array) {
            const newArray = [...array];
            for (let i = newArray.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
            }
            return newArray;
        }

        // 重新开始游戏
        document.getElementById('restartBtn').addEventListener('click', initGame);

        // 初始化游戏
        initGame();
    </script>
</body>
</html>

效果预览

Emoji消消乐游戏预览

游戏界面截图

在线演示

Emoji 消消乐

分数: 0
剩余: 16 对
← 返回案例列表