当前位置：首页 > news >正文

DeepSeek+HTML打造英语单词游戏，学习娱乐两不误！

news 来源：原创 2025/6/13 16:23:39

无需复杂编程，只要会写基础HTML就能玩转AI互动游戏！今天我们就来看看怎么用AI来实现简单的互动游戏。

操作步骤其实很简单，我们打开DeepSeek，直接输入指令

下面是一个简单的中英文配对单词消消乐网页游戏实现（使用HTML/CSS/JavaScript），包含音乐和倒计时功能。你可以直接保存为.html文件并在浏览器中运行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>单词消消乐</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        #game-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin: 20px;
        }

        .card {
            width: 100px;
            height: 100px;
            background-color: white;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: transform 0.6s;
            transform-style: preserve-3d;
            position: relative;
        }

        .card.flipped {
            transform: rotateY(180deg);
        }

        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
        }

        .front {
            background-color: #4CAF50;
            color: white;
            transform: rotateY(180deg);
        }

        .back {
            background-color: #2196F3;
            color: white;
        }

        #controls {
            display: flex;
            gap: 20px;
            margin: 20px;
        }

        #timer {
            font-size: 24px;
            color: #ff5722;
        }

        #score {
            font-size: 24px;
            color: #4CAF50;
        }

        #game-over {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <h1>单词消消乐</h1>
    <div id="controls">
        <div>时间: <span id="timer">60</span>秒</div>
        <div>分数: <span id="score">0</span></div>
        <button onclick="startGame()">开始游戏</button>
    </div>
    <div id="game-container"></div>
    <audio id="bg-music" loop>
        <source src="https://www.soundjay.com/misc/sounds/bell-ringing-01.mp3" type="audio/mpeg">
    </audio>
    <div id="game-over">
        <h2>游戏结束！</h2>
        <p>最终得分: <span id="final-score">0</span></p>
        <button onclick="startGame()">再玩一次</button>
    </div>

    <script>
        const words = [
            { chinese: "苹果", english: "Apple" },
            { chinese: "香蕉", english: "Banana" },
            { chinese: "猫", english: "Cat" },
            { chinese: "狗", english: "Dog" },
            { chinese: "书", english: "Book" },
            { chinese: "学校", english: "School" }
        ];

        let selectedCards = [];
        let canFlip = true;
        let timeLeft = 60;
        let score = 0;
        let timerId;
        let matchedPairs = 0;

        function createCard(word, isChinese) {
            const card = document.createElement('div');
            card.className = 'card';
            card.dataset.value = word.english;

            const front = document.createElement('div');
            front.className = 'card-face front';
            front.textContent = isChinese ? word.chinese : word.english;

            const back = document.createElement('div');
            back.className = 'card-face back';
            back.textContent = '?';

            card.append(front, back);
            card.addEventListener('click', () => flipCard(card));
            return card;
        }

        function flipCard(card) {
            if (!canFlip || card.classList.contains('flipped')) return;
            
            card.classList.add('flipped');
            selectedCards.push(card);

            if (selectedCards.length === 2) {
                canFlip = false;
                checkMatch();
            }
        }

        function checkMatch() {
            const [card1, card2] = selectedCards;
            const value1 = card1.dataset.value;
            const value2 = card2.dataset.value;

            if (value1 === value2) {
                score += 10;
                matchedPairs++;
                document.getElementById('score').textContent = score;
                if (matchedPairs === words.length) endGame(true);
            } else {
                setTimeout(() => {
                    card1.classList.remove('flipped');
                    card2.classList.remove('flipped');
                }, 1000);
            }

            selectedCards = [];
            setTimeout(() => canFlip = true, 1000);
        }

        function startGame() {
            // 重置游戏状态
            clearInterval(timerId);
            timeLeft = 60;
            score = 0;
            matchedPairs = 0;
            document.getElementById('timer').textContent = timeLeft;
            document.getElementById('score').textContent = score;
            document.getElementById('game-over').style.display = 'none';
            
            // 创建卡片
            const container = document.getElementById('game-container');
            container.innerHTML = '';
            const allWords = [...words, ...words];
            allWords.sort(() => Math.random() - 0.5);
            
            allWords.forEach((word, index) => {
                const isChinese = index % 2 === 0;
                container.appendChild(createCard(word, isChinese));
            });

            // 播放背景音乐
            document.getElementById('bg-music').play();
            
            // 开始倒计时
            timerId = setInterval(() => {
                timeLeft--;
                document.getElementById('timer').textContent = timeLeft;
                if (timeLeft <= 0) endGame(false);
            }, 1000);
        }

        function endGame(isWin) {
            clearInterval(timerId);
            document.getElementById('bg-music').pause();
            document.getElementById('game-over').style.display = 'block';
            document.getElementById('final-score').textContent = score;
        }
    </script>
</body>
</html>

以下是一个简单的中英文配对单词消消乐网页游戏代码示例，包含背景音乐和倒计时功能：

这个游戏包含以下功能：

中英文单词配对（目前包含6组单词，可以自行扩展）
60秒倒计时功能
分数统计系统
背景音乐（需要替换为实际可用的音乐URL）
卡片翻转动画效果
游戏结束界面
重新开始功能
使用方法：

点击"开始游戏"按钮启动游戏
点击蓝色面的卡片翻转查看内容
找到匹配的中英文单词对
在时间结束前完成所有配对
注意事项：

需要替换实际的背景音乐URL（当前为示例URL）
可以通过修改words数组来添加更多单词对
可以通过修改CSS调整卡片大小和布局
当前卡片布局为4列，可以通过修改game-container的grid-template-columns来调整
扩展建议：

增加难度等级（更多卡片）
添加更多音效（匹配成功/失败音效）
添加本地存储保存最高分
增加卡片翻转动画的3D效果
添加积分倍数等特殊规则