打地鼠游戏代码!Claude Sonnet 4 生成

图片[1]-打地鼠游戏代码!Claude Sonnet 4 生成-零度博客

图片[2]-打地鼠游戏代码!Claude Sonnet 4 生成-零度博客

图片[3]-打地鼠游戏代码!Claude Sonnet 4 生成-零度博客

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Comic Sans MS', cursive;
            background: linear-gradient(45deg, #87CEEB, #98FB98);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .game-container {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            text-align: center;
            backdrop-filter: blur(10px);
        }

        .game-header {
            margin-bottom: 20px;
        }

        .game-title {
            font-size: 2.5em;
            color: #2c3e50;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            margin-bottom: 10px;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        .game-stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            font-size: 1.2em;
            font-weight: bold;
        }

        .stat {
            background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
            color: white;
            padding: 10px 20px;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .game-board {
            display: grid;
            grid-template-columns: repeat(3, 120px);
            grid-template-rows: repeat(3, 120px);
            gap: 15px;
            justify-content: center;
            margin: 20px 0;
        }

        .hole {
            position: relative;
            width: 120px;
            height: 120px;
            background: radial-gradient(circle, #8B4513 0%, #654321 70%, #3c2415 100%);
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            box-shadow: inset 0 5px 15px rgba(0,0,0,0.5);
            transition: transform 0.1s;
        }

        .hole:active {
            transform: scale(0.95);
        }

        .mole {
            position: absolute;
            bottom: -80px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg, #D2691E, #CD853F);
            border-radius: 50% 50% 40% 40%;
            transition: bottom 0.3s ease-in-out;
            cursor: pointer;
        }

        .mole::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 20px;
            width: 12px;
            height: 12px;
            background: #000;
            border-radius: 50%;
            box-shadow: 25px 0 0 #000;
        }

        .mole::after {
            content: '';
            position: absolute;
            top: 35px;
            left: 35px;
            width: 10px;
            height: 8px;
            background: #FF69B4;
            border-radius: 50%;
        }

        .mole.up {
            bottom: 20px;
            animation: wiggle 0.5s ease-in-out infinite;
        }

        .mole.hit {
            animation: hit 0.3s ease-out;
        }

        @keyframes wiggle {
            0%, 100% { transform: translateX(-50%) rotate(-5deg); }
            50% { transform: translateX(-50%) rotate(5deg); }
        }

        @keyframes hit {
            0% { transform: translateX(-50%) scale(1); }
            50% { transform: translateX(-50%) scale(1.2) rotate(15deg); }
            100% { transform: translateX(-50%) scale(0.8); bottom: -80px; }
        }

        .controls {
            margin-top: 20px;
        }

        .btn {
            background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 25px;
            font-size: 1.1em;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: all 0.3s;
            margin: 0 10px;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }

        .game-over {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .game-over-content {
            background: white;
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .game-over h2 {
            color: #2c3e50;
            font-size: 2em;
            margin-bottom: 20px;
        }

        .final-score {
            font-size: 1.5em;
            color: #e74c3c;
            margin-bottom: 20px;
        }

        .score-popup {
            position: absolute;
            color: #e74c3c;
            font-size: 2em;
            font-weight: bold;
            pointer-events: none;
            animation: scoreFloat 1s ease-out forwards;
        }

        @keyframes scoreFloat {
            0% { transform: translateY(0) scale(1); opacity: 1; }
            100% { transform: translateY(-50px) scale(1.2); opacity: 0; }
        }

        .miss-popup {
            position: absolute;
            color: #3498db;
            font-size: 1.5em;
            font-weight: bold;
            pointer-events: none;
            animation: scoreFloat 1s ease-out forwards;
        }

        .clouds {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        .cloud {
            position: absolute;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50px;
            animation: float 20s infinite linear;
        }

        .cloud::before,
        .cloud::after {
            content: '';
            position: absolute;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50px;
        }

        .cloud1 {
            width: 100px;
            height: 40px;
            top: 20%;
            animation-duration: 25s;
        }

        .cloud1::before {
            width: 50px;
            height: 40px;
            top: -20px;
            left: 10px;
        }

        .cloud1::after {
            width: 60px;
            height: 20px;
            top: -10px;
            right: 10px;
        }

        .cloud2 {
            width: 80px;
            height: 30px;
            top: 60%;
            animation-duration: 30s;
            animation-delay: -10s;
        }

        .cloud2::before {
            width: 40px;
            height: 30px;
            top: -15px;
            left: 15px;
        }

        .cloud2::after {
            width: 50px;
            height: 15px;
            top: -8px;
            right: 15px;
        }

        @keyframes float {
            0% { left: -120px; }
            100% { left: 100%; }
        }
    </style>
</head>
<body>
    <div class="clouds">
        <div class="cloud cloud1"></div>
        <div class="cloud cloud2"></div>
    </div>

    <div class="game-container">
        <div class="game-header">
            <h1 class="game-title">🔨 打地鼠大作战 🐹</h1>
            <div class="game-stats">
                <div class="stat">得分: <span id="score">0</span></div>
                <div class="stat">时间: <span id="time">60</span>s</div>
                <div class="stat">连击: <span id="combo">0</span></div>
            </div>
        </div>

        <div class="game-board" id="gameBoard">
            <!-- 9个洞口 -->
        </div>

        <div class="controls">
            <button class="btn" id="startBtn">开始游戏</button>
            <button class="btn" id="pauseBtn" disabled>暂停</button>
            <button class="btn" id="resetBtn">重置</button>
        </div>
    </div>

    <div class="game-over" id="gameOver">
        <div class="game-over-content">
            <h2>🎉 游戏结束 🎉</h2>
            <div class="final-score">最终得分: <span id="finalScore">0</span></div>
            <div>最高连击: <span id="maxCombo">0</span></div>
            <br>
            <button class="btn" onclick="restartGame()">再来一局</button>
        </div>
    </div>

    <script>
        class WhackAMoleGame {
            constructor() {
                this.score = 0;
                this.timeLeft = 60;
                this.combo = 0;
                this.maxCombo = 0;
                this.isPlaying = false;
                this.isPaused = false;
                this.gameTimer = null;
                this.moleTimer = null;
                this.difficulty = 1;
                this.holes = [];
                
                this.initGame();
                this.bindEvents();
            }

            initGame() {
                const gameBoard = document.getElementById('gameBoard');
                gameBoard.innerHTML = '';
                
                // 创建9个洞口
                for (let i = 0; i < 9; i++) {
                    const hole = document.createElement('div');
                    hole.className = 'hole';
                    hole.innerHTML = '<div class="mole" data-hole="' + i + '"></div>';
                    gameBoard.appendChild(hole);
                    this.holes.push(hole);
                }
            }

            bindEvents() {
                document.getElementById('startBtn').addEventListener('click', () => this.startGame());
                document.getElementById('pauseBtn').addEventListener('click', () => this.pauseGame());
                document.getElementById('resetBtn').addEventListener('click', () => this.resetGame());
                
                // 绑定地鼠点击事件
                document.addEventListener('click', (e) => {
                    if (e.target.classList.contains('mole') && e.target.classList.contains('up')) {
                        this.hitMole(e.target);
                    } else if (this.isPlaying && !this.isPaused) {
                        this.miss(e);
                    }
                });
            }

            startGame() {
                this.isPlaying = true;
                this.isPaused = false;
                this.score = 0;
                this.timeLeft = 60;
                this.combo = 0;
                this.maxCombo = 0;
                this.difficulty = 1;
                
                this.updateDisplay();
                
                document.getElementById('startBtn').disabled = true;
                document.getElementById('pauseBtn').disabled = false;
                
                this.startTimer();
                this.spawnMole();
            }

            pauseGame() {
                if (this.isPaused) {
                    this.isPaused = false;
                    document.getElementById('pauseBtn').textContent = '暂停';
                    this.startTimer();
                    this.spawnMole();
                } else {
                    this.isPaused = true;
                    document.getElementById('pauseBtn').textContent = '继续';
                    clearInterval(this.gameTimer);
                    clearTimeout(this.moleTimer);
                }
            }

            resetGame() {
                this.isPlaying = false;
                this.isPaused = false;
                clearInterval(this.gameTimer);
                clearTimeout(this.moleTimer);
                
                this.score = 0;
                this.timeLeft = 60;
                this.combo = 0;
                this.maxCombo = 0;
                
                this.updateDisplay();
                this.hideAllMoles();
                
                document.getElementById('startBtn').disabled = false;
                document.getElementById('pauseBtn').disabled = true;
                document.getElementById('pauseBtn').textContent = '暂停';
                document.getElementById('gameOver').style.display = 'none';
            }

            startTimer() {
                this.gameTimer = setInterval(() => {
                    this.timeLeft--;
                    this.updateDisplay();
                    
                    if (this.timeLeft <= 0) {
                        this.endGame();
                    }
                    
                    // 随着时间推移增加难度
                    if (this.timeLeft % 15 === 0 && this.timeLeft > 0) {
                        this.difficulty += 0.2;
                    }
                }, 1000);
            }

            spawnMole() {
                if (!this.isPlaying || this.isPaused) return;
                
                const randomHole = Math.floor(Math.random() * 9);
                const mole = this.holes[randomHole].querySelector('.mole');
                
                if (!mole.classList.contains('up')) {
                    mole.classList.add('up');
                    
                    // 地鼠停留时间随难度降低
                    const stayTime = Math.max(800 - (this.difficulty * 100), 400);
                    
                    setTimeout(() => {
                        if (mole.classList.contains('up')) {
                            mole.classList.remove('up');
                            this.combo = 0; // 地鼠自动消失时重置连击
                            this.updateDisplay();
                        }
                    }, stayTime);
                }
                
                // 下次地鼠出现时间随难度降低
                const nextSpawn = Math.max(1200 - (this.difficulty * 150), 600);
                this.moleTimer = setTimeout(() => this.spawnMole(), nextSpawn);
            }

            hitMole(mole) {
                if (!this.isPlaying || this.isPaused) return;
                
                mole.classList.remove('up');
                mole.classList.add('hit');
                
                this.combo++;
                this.maxCombo = Math.max(this.maxCombo, this.combo);
                
                // 连击加分
                const baseScore = 10;
                const comboBonus = Math.floor(this.combo / 3) * 5;
                const scoreGain = baseScore + comboBonus;
                
                this.score += scoreGain;
                this.updateDisplay();
                
                // 显示得分动画
                this.showScorePopup(mole.parentElement, '+' + scoreGain);
                
                setTimeout(() => {
                    mole.classList.remove('hit');
                }, 300);
            }

            miss(e) {
                // 点击空白处,连击归零
                if (this.combo > 0) {
                    this.combo = 0;
                    this.updateDisplay();
                    this.showMissPopup(e, '连击断了!');
                }
            }

            showScorePopup(element, text) {
                const popup = document.createElement('div');
                popup.className = 'score-popup';
                popup.textContent = text;
                popup.style.left = '50%';
                popup.style.top = '50%';
                popup.style.transform = 'translate(-50%, -50%)';
                
                element.style.position = 'relative';
                element.appendChild(popup);
                
                setTimeout(() => {
                    if (popup.parentElement) {
                        popup.parentElement.removeChild(popup);
                    }
                }, 1000);
            }

            showMissPopup(e, text) {
                const popup = document.createElement('div');
                popup.className = 'miss-popup';
                popup.textContent = text;
                popup.style.left = e.clientX + 'px';
                popup.style.top = e.clientY + 'px';
                popup.style.position = 'fixed';
                
                document.body.appendChild(popup);
                
                setTimeout(() => {
                    if (popup.parentElement) {
                        popup.parentElement.removeChild(popup);
                    }
                }, 1000);
            }

            hideAllMoles() {
                this.holes.forEach(hole => {
                    const mole = hole.querySelector('.mole');
                    mole.classList.remove('up', 'hit');
                });
            }

            updateDisplay() {
                document.getElementById('score').textContent = this.score;
                document.getElementById('time').textContent = this.timeLeft;
                document.getElementById('combo').textContent = this.combo;
            }

            endGame() {
                this.isPlaying = false;
                clearInterval(this.gameTimer);
                clearTimeout(this.moleTimer);
                
                this.hideAllMoles();
                
                document.getElementById('finalScore').textContent = this.score;
                document.getElementById('maxCombo').textContent = this.maxCombo;
                document.getElementById('gameOver').style.display = 'flex';
                
                document.getElementById('startBtn').disabled = false;
                document.getElementById('pauseBtn').disabled = true;
            }
        }

        // 初始化游戏
        const game = new WhackAMoleGame();

        function restartGame() {
            document.getElementById('gameOver').style.display = 'none';
            game.startGame();
        }
    </script>
</body>
</html>
THE END
喜欢就支持一下吧
点赞1683 分享
相关推荐
在开始加密挖掘之前要考虑的 5 个关键事项 !-零度博客

在开始加密挖掘之前要考虑的 5 个关键事项 !

考虑加密采矿?有可能赚钱,但如果不首先考虑这些事情,你就不会走得太远。 加密采矿可以带来非常有利可图的风险。将新硬币在区块链上流通并验证交易可以使整个网络保持运转,因此矿工因其工作...
【直播】100万订阅奖牌开箱!🎉 抽奖送会员,在线答疑 AI / 软件 / 安全等!真的要女装??| 零度解说-零度博客
ComfyUI V1 本地客户端正式发布,支持Win、Mac 和Linux 平台! 附最新网盘下载链接-零度博客

ComfyUI V1 本地客户端正式发布,支持Win、Mac 和Linux 平台! 附最新网盘下载链接

ComfyUI 官方上大货了!桌面版 V1 首发版来了!!!一键安装(本地桌面版) - 适用于 Windows/macOS/Linux,支持自动更新 自动安装 Python 依赖环境 - 默认安装 ComfyUI 管理器 - 即将开源!可...
admin的头像-零度博客admin
3.7W+2420
快去申请!谷歌 Bard 智能 AI 聊天机器人正式公测! 这是注册通道 ,用免费VPN可绕过地区限制 | 零度解说-零度博客

快去申请!谷歌 Bard 智能 AI 聊天机器人正式公测! 这是注册通道 ,用免费VPN可绕过地区限制 | 零度解说

https://youtu.be/ST2u7sj_qUg --------------   注意:非美国地区用户,需要通过VPN来进行注册:https://www.freedidi.com/8818.html
admin的头像-零度博客admin
1.3W+6539
这9件大事,男人务必要早点知道的!越早知道越好 | 零度解说-零度博客
让 Windows 的字体变成 Mac一样好看!只需简单的2步即可搞定! MacType | 零度解说-零度博客
七款昂贵软件的最佳替代工具下载-零度博客

七款昂贵软件的最佳替代工具下载

1.达芬奇 决心:https://www.blackmagicdesign.com/products/davinciresolve 2.Onlyoffice:https://www.onlyoffice.com/zh Libreoffice:https://www.libreoffice.org 3.Gimp:https://www.gimp...
admin的头像-零度博客admin
1.2W+652
Power Automate Desktop 浏览器插件-零度博客

Power Automate Desktop 浏览器插件

Chrome:点击进入 Edge:点击进入 火狐:点击进入 IE:点击进入
Epic Games 游戏玩家推荐的网络加速方案!-零度博客

Epic Games 游戏玩家推荐的网络加速方案!

在 %localappdata% 目录下,找到 EpicGamesLauncher-Saved-config-Windows 找到Engine配置文件,输入下方的网络优化代码: [HTTP] HttpTimeout=10 HttpConnectionTimeout=10 HttpReceiveTimeout...
admin的头像-零度博客admin
2.3W+2180