打地鼠游戏：Trae 轻松实现点击挑战

打地鼠游戏，作为经典的休闲游戏之一，玩家需要在屏幕上随机弹出的地鼠出现时迅速点击，将它们击中以获得得分。游戏的规则简单，然而要做到地鼠的随机显示、点击事件的响应和得分统计等，仍然需要一些编程工作，尤其是确保游戏的流畅性和交互的响应性。

过去，要实现打地鼠游戏，通常需要自己编写随机显示地鼠、得分系统和游戏计时等功能。而现在，使用 Trae IDE，只需要简单的指令，Trae 就能自动帮我完成这些工作。接下来，我就来分享如何通过 Trae 快速实现一个打地鼠游戏，带来极具趣味的互动体验。

💡 我的需求其实很简单

我的需求非常明确：制作一个打地鼠游戏，功能要求如下：

地鼠随机弹出：地鼠会在屏幕上的不同位置随机弹出。
点击得分：玩家通过点击屏幕上弹出的地鼠来得分，每次点击后地鼠消失。
简单的得分系统：得分机制简单，每击中一个地鼠就加1分。
游戏时间限制：设置一个时间限制，玩家在规定时间内尽可能多地点击地鼠获得更高分。

虽然看似简单，但要确保游戏的流畅性、地鼠的随机性以及点击事件的实时反馈，手动实现这些功能可能需要不少的时间。

✨ Trae 如何理解需求并生成代码？

我只需要在 Trae 中输入一句话：

"生成打地鼠游戏，随机显示地鼠，玩家点击地鼠得分。"

Trae 会自动解析我的需求，并生成完整的游戏代码，包括：

地鼠随机显示：地鼠会在屏幕上随机位置弹出，每次弹出的位置不同，增加游戏的难度和趣味性。
点击得分：玩家点击地鼠后，地鼠会立即消失，得分增加。
时间限制：游戏有时间限制，玩家在时间内尽可能多地点击地鼠获得分数。
简洁的得分系统：得分显示非常直观，玩家可以看到当前得分和剩余时间。

只需简单的指令，Trae 就能够为我自动生成一个完整的打地鼠游戏，包含了地鼠随机弹出、点击得分和时间计时等功能。

🧩 游戏操作简便，得分系统清晰

Trae 生成的打地鼠游戏非常简洁易懂。地鼠会随机在屏幕上弹出，玩家只需要点击地鼠，地鼠就会消失，并增加相应的得分。每次点击后，系统会即时更新分数，显示玩家当前得分。

游戏的时间限制也非常直观，玩家可以在倒计时结束前尽可能多地击中地鼠。得分和时间的显示清晰明了，让玩家能随时了解游戏的进度。

🛠 游戏拓展，功能轻松加

虽然 Trae 生成的打地鼠游戏已经非常完善，但它也支持轻松添加更多功能。例如：

难度设置：可以增加不同的难度等级，例如地鼠出现的速度加快或出现位置更多样化。
奖励地鼠：可以设置特殊地鼠，击中它们可以获得更高的分数。
音效和动画：为点击地鼠时加入音效，增强游戏的互动性。也可以为地鼠的弹出和消失添加动画效果。
排行榜功能：记录玩家的最高得分，并展示到排行榜中，增加游戏的挑战性。

这些新功能都可以通过简单描述，Trae 会自动生成相关代码，并将其无缝集成到现有的游戏中。

这就是打地鼠游戏开发的新体验

通过这次打地鼠游戏的开发，我深刻感受到了 Trae 带来的便捷。从地鼠的随机显示，到点击得分的机制，再到时间限制和游戏计时，Trae 都能自动帮我完成。这不仅大大节省了开发时间，也提升了我的工作效率，让我可以更加专注于游戏设计和功能扩展。

对于独立开发者或小团队来说，Trae 是一个非常高效的工具，它能够帮助你快速完成游戏开发，专注于创意和功能拓展。

结语

如果你也想制作一个经典的打地鼠游戏，试试 Trae IDE，输入类似的需求：

"生成打地鼠游戏，随机显示地鼠，玩家点击地鼠得分。"

几秒钟内，Trae 就会生成完整的打地鼠游戏代码，带有地鼠随机弹出、得分机制和时间限制等功能。你可以直接将它嵌入到你的项目中，甚至根据需求继续扩展和优化。

快来体验一下 Trae，让你的游戏开发变得更加轻松、富有趣味！

html 复制代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>打地鼠游戏</title>

    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;

            min-height: 100vh;
            background: linear-gradient(to bottom, #8ecae6, #219ebc);
            font-family: 'Arial', sans-serif;
            overflow: hidden;
        }

        
        .game-container {
            position: relative;
            width: 600px;
            height: 600px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 20px;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            padding: 20px;

        }
        
        .game-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .score-container, .time-container {
            background-color: #023047;
            color: white;
            padding: 10px 20px;
            border-radius: 10px;
            font-size: 20px;
            font-weight: bold;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .game-board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 15px;
            height: 500px;
        }
        
        .hole {
            position: relative;
            background-color: #8b4513;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }
        
        .hole::after {
            content: '';
            position: absolute;
            bottom: 0;

            left: 0;
            width: 100%;
            height: 30%;

            background-color: #5a2d0c;
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        }
        

        .mole {
            position: absolute;
            bottom: -100%;

            left: 50%;

            transform: translateX(-50%);
            width: 70%;
            height: 70%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="%23a0522d"/><circle cx="35" cy="40" r="5" fill="%23000"/><circle cx="65" cy="40" r="5" fill="%23000"/><path d="M40 65 Q50 75 60 65" stroke="%23000" stroke-width="3" fill="none"/><ellipse cx="50" cy="30" rx="10" ry="5" fill="%23f8d8b0"/></svg>');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            transition: bottom 0.3s ease-out;
            z-index: 1;
        }

        
        .mole.active {
            bottom: 0;
        }
        
        .mole.hit {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="%23a0522d"/><line x1="30" y1="35" x2="40" y2="45" stroke="%23000" stroke-width="3"/><line x1="40" y1="35" x2="30" y2="45" stroke="%23000" stroke-width="3"/><line x1="60" y1="35" x2="70" y2="45" stroke="%23000" stroke-width="3"/><line x1="70" y1="35" x2="60" y2="45" stroke="%23000" stroke-width="3"/><path d="M40 70 Q50 60 60 70" stroke="%23000" stroke-width="3" fill="none"/><ellipse cx="50" cy="30" rx="10" ry="5" fill="%23f8d8b0"/></svg>');
        }

        
        .start-screen, .end-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        

        .start-screen h1, .end-screen h1 {

            color: white;
            font-size: 40px;
            margin-bottom: 20px;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        }
        
        .start-screen p, .end-screen p {
            color: white;
            font-size: 20px;
            margin-bottom: 30px;
            text-align: center;
            max-width: 80%;

            line-height: 1.5;
        }
        
        .final-score {
            color: #ffb703;

            font-size: 36px;
            font-weight: bold;
            margin-bottom: 30px;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        }
        
        .btn {

            background-color: #fb8500;
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 20px;
            border-radius: 10px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
        
        .btn:hover {
            background-color: #ffb703;
            transform: scale(1.05);
        }
        
        .btn:active {
            transform: scale(0.98);

        }
        
        .hammer {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="40" y="20" width="20" height="50" fill="%23a0522d"/><rect x="30" y="10" width="40" height="20" fill="%23696969" rx="5" ry="5"/></svg>');
            background-repeat: no-repeat;
            background-size: contain;
            pointer-events: none;
            transform: rotate(45deg);
            transform-origin: bottom right;

            z-index: 100;
            display: none;
        }
        

        .hammer.active {
            display: block;
            animation: hammer-swing 0.2s ease-out;
        }

        
        @keyframes hammer-swing {
            0% { transform: rotate(45deg) scale(1); }
            50% { transform: rotate(30deg) scale(1.2); }
            100% { transform: rotate(45deg) scale(1); }
        }
        
        .splash {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 20 L60 35 L75 25 L65 45 L90 50 L65 55 L75 75 L60 65 L50 80 L40 65 L25 75 L35 55 L10 50 L35 45 L25 25 L40 35 Z" fill="%23ffb703"/></svg>');
            background-repeat: no-repeat;
            background-size: contain;
            pointer-events: none;
            z-index: 90;
            animation: splash 0.5s ease-out forwards;
            opacity: 0;
        }
        
        @keyframes splash {
            0% { transform: scale(0.5); opacity: 1; }
            100% { transform: scale(1.5); opacity: 0; }
        }
        
        @media (max-width: 650px) {
            .game-container {
                width: 95%;
                height: auto;

                padding: 15px;
            }
            
            .game-board {
                height: 400px;
            }

            
            .game-info {

                margin-bottom: 15px;
            }

            

            .score-container, .time-container {
                font-size: 16px;

                padding: 8px 15px;

            }
        }
    </style>

</head>
<body>
    <div class="game-container">

        <div class="game-info">
            <div class="score-container">得分: <span id="score">0</span></div>
            <div class="time-container">时间: <span id="time">30</span>s</div>
        </div>
        
        <div class="game-board" id="game-board">

            <!-- 9个洞，由JS动态生成 -->
        </div>
        
        <div class="start-screen" id="start-screen">
            <h1>打地鼠</h1>
            <p>点击出现的地鼠获得分数！反应越快，得分越高！</p>
            <button class="btn" id="start-btn">开始游戏</button>

        </div>
        
        <div class="end-screen" id="end-screen" style="display: none;">

            <h1>游戏结束</h1>
            <div class="final-score">得分: <span id="final-score">0</span></div>
            <button class="btn" id="restart-btn">再来一局</button>
        </div>
        
        <div class="hammer" id="hammer"></div>
    </div>
    
    <script>
        // 获取DOM元素
        const gameBoard = document.getElementById('game-board');
        const scoreElement = document.getElementById('score');
        const timeElement = document.getElementById('time');
        const startScreen = document.getElementById('start-screen');

        const endScreen = document.getElementById('end-screen');
        const finalScoreElement = document.getElementById('final-score');
        const startBtn = document.getElementById('start-btn');
        const restartBtn = document.getElementById('restart-btn');
        const hammer = document.getElementById('hammer');
        

        // 游戏变量

        let score = 0;
        let timeLeft = 30;
        let gameInterval;
        let moleInterval;
        let holes = [];
        let moles = [];
        let isPlaying = false;
        let lastHole = -1;
        
        // 初始化游戏

        function initGame() {
            // 创建9个洞和地鼠
            gameBoard.innerHTML = '';
            holes = [];
            moles = [];
            
            for (let i = 0; i < 9; i++) {
                // 创建洞
                const hole = document.createElement('div');
                hole.className = 'hole';
                hole.dataset.index = i;
                
                // 创建地鼠
                const mole = document.createElement('div');
                mole.className = 'mole';
                mole.dataset.index = i;
                
                // 点击地鼠事件
                mole.addEventListener('click', whackMole);
                

                // 添加到DOM
                hole.appendChild(mole);
                gameBoard.appendChild(hole);
                
                // 保存引用
                holes.push(hole);
                moles.push(mole);

            }
            
            // 重置游戏状态
            score = 0;
            timeLeft = 30;
            scoreElement.textContent = score;
            timeElement.textContent = timeLeft;
            finalScoreElement.textContent = score;
        }
        
        // 开始游戏
        function startGame() {
            if (isPlaying) return;

            
            initGame();
            isPlaying = true;
            startScreen.style.display = 'none';
            endScreen.style.display = 'none';
            
            // 开始计时器
            gameInterval = setInterval(() => {

                timeLeft--;
                timeElement.textContent = timeLeft;
                
                if (timeLeft <= 0) {

                    endGame();
                }
            }, 1000);
            
            // 开始出现地鼠
            showMole();
            moleInterval = setInterval(showMole, 1000);
            
            // 添加鼠标移动事件
            document.addEventListener('mousemove', moveHammer);
        }
        
        // 结束游戏
        function endGame() {
            isPlaying = false;
            clearInterval(gameInterval);

            clearInterval(moleInterval);
            
            // 隐藏所有地鼠
            moles.forEach(mole => {
                mole.classList.remove('active');
                mole.classList.remove('hit');
            });
            

            // 显示结束屏幕
            finalScoreElement.textContent = score;
            endScreen.style.display = 'flex';
            
            // 移除鼠标移动事件

            document.removeEventListener('mousemove', moveHammer);
        }
        

        // 随机显示地鼠
        function showMole() {
            // 隐藏所有地鼠
            moles.forEach(mole => {
                mole.classList.remove('active');
                mole.classList.remove('hit');
            });
            
            // 随机选择一个洞（避免连续选择同一个洞）

            let holeIndex;
            do {

                holeIndex = Math.floor(Math.random() * holes.length);
            } while (holeIndex === lastHole);
            
            lastHole = holeIndex;

            
            // 显示地鼠

            const mole = moles[holeIndex];
            mole.classList.add('active');
            
            // 随机时间后隐藏地鼠
            const showTime = 800 + Math.floor(Math.random() * 500); // 800ms到1300ms之间

            setTimeout(() => {
                if (isPlaying && mole.classList.contains('active') && !mole.classList.contains('hit')) {
                    mole.classList.remove('active');

                }
            }, showTime);

        }
        
        // 打地鼠
        function whackMole(e) {
            if (!isPlaying) return;
            
            const mole = e.currentTarget;
            if (!mole.classList.contains('active') || mole.classList.contains('hit')) return;
            
            // 增加分数
            score += 10;
            scoreElement.textContent = score;
            

            // 标记为已打
            mole.classList.add('hit');
            
            // 显示锤子动画
            hammer.classList.add('active');
            setTimeout(() => {
                hammer.classList.remove('active');
            }, 200);
            
            // 显示特效
            const splash = document.createElement('div');
            splash.className = 'splash';
            splash.style.left = (e.pageX - 25) + 'px';
            splash.style.top = (e.pageY - 25) + 'px';
            document.body.appendChild(splash);

            
            // 移除特效
            setTimeout(() => {
                document.body.removeChild(splash);
            }, 500);
            
            // 短暂延迟后隐藏地鼠
            setTimeout(() => {
                mole.classList.remove('active');
                mole.classList.remove('hit');
            }, 300);
        }
        
        // 移动锤子
        function moveHammer(e) {
            hammer.style.left = (e.pageX - 25) + 'px';
            hammer.style.top = (e.pageY - 25) + 'px';
        }
        
        // 事件监听
        startBtn.addEventListener('click', startGame);
        restartBtn.addEventListener('click', startGame);
        
        // 初始化游戏
        initGame();
    </script>
</body>
</html>