马年打年兽 - 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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #d32f2f 0%, #f57c00 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #fff;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 800px;
            width: 100%;
            text-align: center;
        }
        
        header {
            margin-bottom: 20px;
            padding: 20px;
            background-color: rgba(255, 235, 59, 0.9);
            border-radius: 20px;
            border: 5px solid #ff9800;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }
        
        h1 {
            font-size: 2.8rem;
            color: #d32f2f;
            text-shadow: 3px 3px 0 #ffeb3b;
            margin-bottom: 10px;
            letter-spacing: 2px;
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #5d4037;
            margin-bottom: 15px;
        }
        
        .year-badge {
            display: inline-block;
            background-color: #4caf50;
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-weight: bold;
            font-size: 1.3rem;
            border: 3px solid #2e7d32;
            margin-top: 5px;
        }
        
        .game-area {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin: 30px 0;
            padding: 20px;
            background-color: rgba(121, 85, 72, 0.9);
            border-radius: 20px;
            border: 8px solid #8d6e63;
            position: relative;
            min-height: 400px;
        }
        
        .hole {
            background-color: #5d4037;
            border-radius: 50%;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 8px solid #3e2723;
            position: relative;
            overflow: hidden;
            transition: transform 0.1s;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
        }
        
        .hole:hover {
            transform: scale(1.05);
        }
        
        .hole.active {
            background-color: #8d6e63;
        }
        
        .nian-monster {
            width: 100px;
            height: 100px;
            background-color: #d32f2f;
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
            border: 5px solid #b71c1c;
            box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3);
            transition: bottom 0.2s;
            z-index: 2;
        }
        
        .nian-monster.appear {
            display: flex;
            animation: popUp 0.3s forwards;
        }
        
        .nian-monster.hit {
            animation: hitEffect 0.3s forwards;
        }
        
        @keyframes popUp {
            0% { bottom: -100px; }
            70% { bottom: 10px; }
            100% { bottom: 0; }
        }
        
        @keyframes hitEffect {
            0% { transform: translateX(-50%) scale(1); }
            50% { transform: translateX(-50%) scale(1.3); }
            100% { transform: translateX(-50%) scale(0); }
        }
        
        .stats {
            display: flex;
            justify-content: space-between;
            background-color: rgba(255, 235, 59, 0.9);
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 20px;
            border: 5px solid #ff9800;
        }
        
        .stat-box {
            background-color: #4caf50;
            padding: 15px;
            border-radius: 10px;
            min-width: 150px;
            border: 3px solid #2e7d32;
        }
        
        .stat-value {
            font-size: 2.5rem;
            font-weight: bold;
            color: #fff;
            text-shadow: 2px 2px 0 #2e7d32;
        }
        
        .stat-label {
            font-size: 1.1rem;
            color: #e8f5e9;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
        
        button {
            padding: 15px 30px;
            font-size: 1.3rem;
            font-weight: bold;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 8px 0 rgba(0, 0, 0, 0.2);
        }
        
        button:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 0 rgba(0, 0, 0, 0.2);
        }
        
        button:active {
            transform: translateY(0);
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
        }
        
        #startBtn {
            background-color: #4caf50;
            color: white;
        }
        
        #resetBtn {
            background-color: #2196f3;
            color: white;
        }
        
        .instructions {
            background-color: rgba(255, 255, 255, 0.9);
            color: #5d4037;
            padding: 20px;
            border-radius: 15px;
            margin-top: 30px;
            border: 5px solid #ff9800;
            text-align: left;
        }
        
        .instructions h3 {
            color: #d32f2f;
            margin-bottom: 10px;
            text-align: center;
        }
        
        .instructions ul {
            padding-left: 20px;
        }
        
        .instructions li {
            margin-bottom: 8px;
        }
        
        .fireworks {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .firework {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            animation: firework 1s ease-out infinite;
        }
        
        @keyframes firework {
            0% { transform: translateY(100vh); opacity: 1; }
            100% { transform: translateY(-100px); opacity: 0; }
        }
        
        .game-message {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 235, 59, 0.95);
            color: #d32f2f;
            padding: 30px;
            border-radius: 20px;
            font-size: 2.5rem;
            font-weight: bold;
            text-align: center;
            border: 8px solid #ff9800;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
            z-index: 10;
            display: none;
        }
        
        .horse-icon {
            font-size: 2.5rem;
            margin: 0 10px;
        }
        
        @media (max-width: 768px) {
            .game-area {
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                padding: 10px;
            }
            
            .hole {
                height: 90px;
            }
            
            .nian-monster {
                width: 80px;
                height: 80px;
                font-size: 2.2rem;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .stats {
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }
            
            .controls {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>🐎 马年打年兽 🐎</h1>
            <p class="subtitle">丙午马年新春特别版 - 驱逐年兽,迎接好运!</p>
            <div class="year-badge">农历丙午年 · 2026</div>
        </header>
        
        <div class="stats">
            <div class="stat-box">
                <div class="stat-label">分数</div>
                <div id="score" class="stat-value">0</div>
            </div>
            <div class="stat-box">
                <div class="stat-label">剩余时间</div>
                <div id="time" class="stat-value">30</div>
            </div>
            <div class="stat-box">
                <div class="stat-label">打中年兽</div>
                <div id="hits" class="stat-value">0</div>
            </div>
        </div>
        
        <div class="game-area" id="gameArea">
            <!-- 游戏洞位将通过JavaScript生成 -->
        </div>
        
        <div class="controls">
            <button id="startBtn">开始游戏</button>
            <button id="resetBtn">重新开始</button>
        </div>
        
        <div class="instructions">
            <h3>游戏说明</h3>
            <ul>
                <li>年兽是古代神话中的恶兽,每到新年都会出来捣乱,我们需要驱赶它们!</li>
                <li>点击从洞里冒出来的年兽,每打中一个得10分</li>
                <li>游戏时间30秒,看你能得多少分</li>
                <li>年兽出现的位置是随机的,出现时间会越来越短</li>
                <li>点击"开始游戏"按钮开始,游戏过程中可以随时点击"重新开始"</li>
                <li>在丙午马年驱赶年兽,迎接新春好运!🐎</li>
            </ul>
        </div>
    </div>
    
    <div class="game-message" id="gameMessage">
        <!-- 游戏结束消息将在这里显示 -->
    </div>
    
    <div class="fireworks" id="fireworks">
        <!-- 烟花效果将通过JavaScript生成 -->
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 游戏元素
            const gameArea = document.getElementById('gameArea');
            const scoreElement = document.getElementById('score');
            const timeElement = document.getElementById('time');
            const hitsElement = document.getElementById('hits');
            const startBtn = document.getElementById('startBtn');
            const resetBtn = document.getElementById('resetBtn');
            const gameMessage = document.getElementById('gameMessage');
            const fireworksContainer = document.getElementById('fireworks');
            
            // 游戏变量
            let score = 0;
            let timeLeft = 30;
            let hits = 0;
            let gameActive = false;
            let gameTimer;
            let nianTimer;
            let holes = [];
            
            // 年兽表情符号
            const nianEmojis = ['👹', '🐉', '🦁', '🐲', '😈'];
            
            // 创建游戏洞位
            function createHoles() {
                gameArea.innerHTML = '';
                holes = [];
                
                for (let i = 0; i < 9; i++) {
                    const hole = document.createElement('div');
                    hole.className = 'hole';
                    hole.dataset.index = i;
                    
                    const nian = document.createElement('div');
                    nian.className = 'nian-monster';
                    nian.dataset.index = i;
                    
                    hole.appendChild(nian);
                    gameArea.appendChild(hole);
                    
                    // 添加点击事件
                    nian.addEventListener('click', hitNian);
                    
                    holes.push({
                        element: hole,
                        nian: nian,
                        active: false
                    });
                }
            }
            
            // 打中年兽
            function hitNian(e) {
                if (!gameActive) return;
                
                const nian = e.currentTarget;
                const index = parseInt(nian.dataset.index);
                
                if (holes[index].active) {
                    // 增加分数
                    score += 10;
                    hits++;
                    scoreElement.textContent = score;
                    hitsElement.textContent = hits;
                    
                    // 打中效果
                    nian.classList.add('hit');
                    holes[index].active = false;
                    
                    // 播放音效(模拟)
                    playHitSound();
                    
                    // 移除打中效果
                    setTimeout(() => {
                        nian.classList.remove('hit');
                        nian.classList.remove('appear');
                    }, 300);
                }
            }
            
            // 随机出现年兽
            function showRandomNian() {
                if (!gameActive) return;
                
                // 随机选择一个洞
                let randomIndex;
                do {
                    randomIndex = Math.floor(Math.random() * holes.length);
                } while (holes[randomIndex].active);
                
                // 设置年兽表情
                const randomEmoji = nianEmojis[Math.floor(Math.random() * nianEmojis.length)];
                holes[randomIndex].nian.textContent = randomEmoji;
                
                // 显示年兽
                holes[randomIndex].nian.classList.add('appear');
                holes[randomIndex].active = true;
                
                // 随机时间后隐藏年兽
                const showTime = Math.max(500, 1500 - score); // 分数越高,年兽出现时间越短
                setTimeout(() => {
                    if (holes[randomIndex].active) {
                        holes[randomIndex].nian.classList.remove('appear');
                        holes[randomIndex].active = false;
                    }
                }, showTime);
            }
            
            // 开始游戏
            function startGame() {
                if (gameActive) return;
                
                resetGame();
                gameActive = true;
                
                // 更新按钮状态
                startBtn.disabled = true;
                startBtn.textContent = "游戏中...";
                startBtn.style.opacity = "0.7";
                
                // 开始倒计时
                gameTimer = setInterval(() => {
                    timeLeft--;
                    timeElement.textContent = timeLeft;
                    
                    if (timeLeft <= 0) {
                        endGame();
                    }
                }, 1000);
                
                // 开始年兽出现循环
                nianTimer = setInterval(() => {
                    if (gameActive) {
                        showRandomNian();
                    }
                }, 800);
                
                // 立即显示第一个年兽
                setTimeout(() => {
                    if (gameActive) showRandomNian();
                }, 500);
            }
            
            // 结束游戏
            function endGame() {
                gameActive = false;
                clearInterval(gameTimer);
                clearInterval(nianTimer);
                
                // 隐藏所有年兽
                holes.forEach(hole => {
                    hole.nian.classList.remove('appear');
                    hole.active = false;
                });
                
                // 显示游戏结束消息
                let message = "";
                if (score >= 200) {
                    message = "🎉 太棒了!你是驱兽大师! 🎉";
                } else if (score >= 100) {
                    message = "👍 做得好!年兽都被你吓跑了! 👍";
                } else {
                    message = "😊 新年快乐!明年再接再厉! 😊";
                }
                
                gameMessage.innerHTML = `
                    <div>游戏结束!</div>
                    <div style="font-size: 1.8rem; margin: 20px 0;">得分: ${score}</div>
                    <div>${message}</div>
                    <div style="margin-top: 20px; font-size: 1.5rem;">
                        <span class="horse-icon">🐎</span>
                        丙午马年大吉!
                        <span class="horse-icon">🐎</span>
                    </div>
                `;
                gameMessage.style.display = "block";
                
                // 创建烟花效果
                createFireworks();
                
                // 恢复按钮状态
                startBtn.disabled = false;
                startBtn.textContent = "重新开始";
                startBtn.style.opacity = "1";
            }
            
            // 重置游戏
            function resetGame() {
                gameActive = false;
                clearInterval(gameTimer);
                clearInterval(nianTimer);
                
                score = 0;
                timeLeft = 30;
                hits = 0;
                
                scoreElement.textContent = score;
                timeElement.textContent = timeLeft;
                hitsElement.textContent = hits;
                
                // 隐藏所有年兽
                holes.forEach(hole => {
                    hole.nian.classList.remove('appear');
                    hole.nian.classList.remove('hit');
                    hole.active = false;
                });
                
                // 隐藏游戏结束消息
                gameMessage.style.display = "none";
                
                // 清除烟花
                fireworksContainer.innerHTML = "";
                
                // 恢复按钮状态
                startBtn.disabled = false;
                startBtn.textContent = "开始游戏";
                startBtn.style.opacity = "1";
            }
            
            // 创建烟花效果
            function createFireworks() {
                fireworksContainer.innerHTML = "";
                const colors = ['#ffeb3b', '#4caf50', '#2196f3', '#9c27b0', '#ff9800'];
                
                for (let i = 0; i < 50; i++) {
                    const firework = document.createElement('div');
                    firework.className = 'firework';
                    
                    // 随机位置
                    firework.style.left = `${Math.random() * 100}vw`;
                    
                    // 随机颜色
                    firework.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                    
                    // 随机大小
                    const size = Math.random() * 8 + 2;
                    firework.style.width = `${size}px`;
                    firework.style.height = `${size}px`;
                    
                    // 随机动画延迟和持续时间
                    firework.style.animationDelay = `${Math.random() * 2}s`;
                    firework.style.animationDuration = `${Math.random() * 1 + 0.5}s`;
                    
                    fireworksContainer.appendChild(firework);
                }
            }
            
            // 播放打中音效(模拟)
            function playHitSound() {
                // 创建音频上下文模拟声音
                try {
                    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                    const oscillator = audioContext.createOscillator();
                    const gainNode = audioContext.createGain();
                    
                    oscillator.connect(gainNode);
                    gainNode.connect(audioContext.destination);
                    
                    oscillator.frequency.value = 800;
                    oscillator.type = 'sine';
                    
                    gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
                    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);
                    
                    oscillator.start(audioContext.currentTime);
                    oscillator.stop(audioContext.currentTime + 0.2);
                } catch (e) {
                    console.log("音频上下文不支持,但游戏可以继续");
                }
            }
            
            // 初始化游戏
            function initGame() {
                createHoles();
                
                // 添加按钮事件
                startBtn.addEventListener('click', startGame);
                resetBtn.addEventListener('click', resetGame);
                
                // 初始提示
                gameMessage.innerHTML = `
                    <div>欢迎来到马年打年兽!</div>
                    <div style="font-size: 1.5rem; margin: 20px 0;">
                        <span class="horse-icon">🐎</span>
                        丙午马年快乐!
                        <span class="horse-icon">🐎</span>
                    </div>
                    <div>点击"开始游戏"按钮开始驱逐年兽!</div>
                `;
                gameMessage.style.display = "block";
            }
            
            // 启动游戏
            initGame();
        });
    </script>
</body>
</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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5e9d9 0%, #e8d1b5 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #8b4513;
        }
        
        .header {
            text-align: center;
            margin-bottom: 25px;
            width: 100%;
            max-width: 800px;
        }
        
        h1 {
            font-size: 2.8rem;
            color: #c41e3a;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            letter-spacing: 1px;
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #8b4513;
            margin-bottom: 20px;
        }
        
        .game-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 800px;
            background-color: rgba(255, 255, 255, 0.85);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            border: 8px solid #c41e3a;
            position: relative;
            overflow: hidden;
        }
        
        .game-container::before {
            content: "🐎";
            position: absolute;
            font-size: 80px;
            top: 10px;
            right: 10px;
            opacity: 0.1;
            z-index: 0;
        }
        
        .info-panel {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 25px;
            background: linear-gradient(to right, #ffd89b, #ffb347);
            padding: 15px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            z-index: 1;
        }
        
        .score-box, .time-box {
            text-align: center;
            flex: 1;
        }
        
        .score-box {
            border-right: 2px dashed #8b4513;
        }
        
        .info-label {
            font-size: 1.1rem;
            color: #8b4513;
            margin-bottom: 5px;
        }
        
        .info-value {
            font-size: 2.2rem;
            font-weight: bold;
            color: #c41e3a;
        }
        
        .game-board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
            width: 100%;
            margin-bottom: 30px;
            z-index: 1;
        }
        
        .hole {
            width: 100%;
            aspect-ratio: 1;
            background-color: #8b4513;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.5);
            cursor: pointer;
            transition: transform 0.1s;
        }
        
        .hole:hover {
            transform: scale(1.03);
        }
        
        .hole:active {
            transform: scale(0.98);
        }
        
        .hole::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 40%;
            background-color: #654321;
            border-radius: 50%;
            bottom: 0;
            left: 0;
        }
        
        .mole {
            position: absolute;
            width: 80%;
            height: 80%;
            background-color: #8b4513;
            border-radius: 50%;
            top: 100%;
            left: 10%;
            transition: top 0.3s;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2.5rem;
            user-select: none;
        }
        
        .mole.up {
            top: 10%;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            width: 100%;
            z-index: 1;
        }
        
        button {
            padding: 15px 30px;
            font-size: 1.2rem;
            font-weight: bold;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        #start-btn {
            background: linear-gradient(to right, #4CAF50, #2E7D32);
            color: white;
        }
        
        #start-btn:hover {
            background: linear-gradient(to right, #45a049, #27632a);
            transform: translateY(-3px);
        }
        
        #start-btn:active {
            transform: translateY(1px);
        }
        
        #restart-btn {
            background: linear-gradient(to right, #2196F3, #0D47A1);
            color: white;
        }
        
        #restart-btn:hover {
            background: linear-gradient(to right, #1e87db, #0a3d8a);
            transform: translateY(-3px);
        }
        
        #restart-btn:active {
            transform: translateY(1px);
        }
        
        .instructions {
            max-width: 800px;
            background-color: white;
            border-radius: 15px;
            padding: 20px;
            margin-top: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border-left: 5px solid #c41e3a;
        }
        
        .instructions h3 {
            color: #c41e3a;
            margin-bottom: 10px;
            font-size: 1.4rem;
        }
        
        .instructions ul {
            padding-left: 20px;
            color: #654321;
        }
        
        .instructions li {
            margin-bottom: 8px;
            line-height: 1.5;
        }
        
        .message {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.95);
            padding: 30px 50px;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
            text-align: center;
            z-index: 100;
            display: none;
            border: 5px solid #c41e3a;
            max-width: 90%;
        }
        
        .message h2 {
            color: #c41e3a;
            margin-bottom: 15px;
            font-size: 2.2rem;
        }
        
        .message p {
            font-size: 1.3rem;
            color: #654321;
            margin-bottom: 20px;
        }
        
        .highlight {
            color: #c41e3a;
            font-weight: bold;
        }
        
        @media (max-width: 600px) {
            .game-board {
                grid-template-columns: repeat(2, 1fr);
            }
            
            h1 {
                font-size: 2rem;
            }
            
            button {
                padding: 12px 24px;
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🐎 马年踩马蹄 🐎</h1>
        <p class="subtitle">丙午马年快乐!点击冒出的马蹄获取高分,挑战你的反应速度!</p>
    </div>
    
    <div class="game-container">
        <div class="info-panel">
            <div class="score-box">
                <div class="info-label">得分</div>
                <div class="info-value" id="score">0</div>
            </div>
            <div class="time-box">
                <div class="info-label">剩余时间</div>
                <div class="info-value" id="time">30</div>
            </div>
        </div>
        
        <div class="game-board" id="game-board">
            <!-- 游戏洞孔将通过JS生成 -->
        </div>
        
        <div class="controls">
            <button id="start-btn">开始游戏</button>
            <button id="restart-btn">重新开始</button>
        </div>
    </div>
    
    <div class="instructions">
        <h3>游戏说明</h3>
        <ul>
            <li>马蹄会从不同的洞中随机冒出,点击马蹄即可得分</li>
            <li>每点击一个马蹄得 <span class="highlight">10分</span></li>
            <li>游戏时间:<span class="highlight">30秒</span>,时间结束后游戏结束</li>
            <li>马蹄出现速度会随着时间逐渐加快</li>
            <li>尽可能多地点击马蹄,挑战最高分!</li>
        </ul>
    </div>
    
    <div class="message" id="message">
        <h2 id="message-title">游戏结束!</h2>
        <p>你的得分是:<span id="final-score" class="highlight">0</span></p>
        <button id="close-message" style="background-color: #c41e3a; color: white; padding: 10px 25px;">继续游戏</button>
    </div>

    <script>
        // 游戏变量
        let score = 0;
        let timeLeft = 30;
        let gameActive = false;
        let timer;
        let moleInterval;
        let speed = 1000; // 初始速度(毫秒)
        let holes = [];
        
        // DOM元素
        const scoreElement = document.getElementById('score');
        const timeElement = document.getElementById('time');
        const gameBoard = document.getElementById('game-board');
        const startButton = document.getElementById('start-btn');
        const restartButton = document.getElementById('restart-btn');
        const messageElement = document.getElementById('message');
        const messageTitle = document.getElementById('message-title');
        const finalScoreElement = document.getElementById('final-score');
        const closeMessageButton = document.getElementById('close-message');
        
        // 创建游戏洞孔
        function createHoles() {
            gameBoard.innerHTML = '';
            holes = [];
            
            for (let i = 0; i < 6; i++) {
                const hole = document.createElement('div');
                hole.className = 'hole';
                hole.dataset.index = i;
                
                const mole = document.createElement('div');
                mole.className = 'mole';
                mole.textContent = '🐎';
                mole.dataset.index = i;
                
                hole.appendChild(mole);
                gameBoard.appendChild(hole);
                
                // 添加点击事件
                mole.addEventListener('click', hitMole);
                
                holes.push({
                    element: hole,
                    mole: mole,
                    active: false
                });
            }
        }
        
        // 随机选择一个洞孔显示马蹄
        function showRandomMole() {
            if (!gameActive) return;
            
            // 隐藏所有当前活动的马蹄
            hideAllMoles();
            
            // 随机选择一个洞孔
            const randomIndex = Math.floor(Math.random() * holes.length);
            const hole = holes[randomIndex];
            
            // 显示马蹄
            hole.mole.classList.add('up');
            hole.active = true;
            
            // 随机时间后自动隐藏
            setTimeout(() => {
                if (hole.active) {
                    hole.mole.classList.remove('up');
                    hole.active = false;
                }
            }, 800);
        }
        
        // 隐藏所有马蹄
        function hideAllMoles() {
            holes.forEach(hole => {
                hole.mole.classList.remove('up');
                hole.active = false;
            });
        }
        
        // 点击马蹄事件
        function hitMole(e) {
            if (!gameActive) return;
            
            const mole = e.target;
            const holeIndex = mole.dataset.index;
            const hole = holes[holeIndex];
            
            if (hole.active) {
                // 增加分数
                score += 10;
                scoreElement.textContent = score;
                
                // 播放点击效果
                mole.style.backgroundColor = '#4CAF50';
                mole.style.transform = 'scale(0.9)';
                
                setTimeout(() => {
                    mole.style.backgroundColor = '';
                    mole.style.transform = '';
                }, 200);
                
                // 隐藏马蹄
                mole.classList.remove('up');
                hole.active = false;
                
                // 每得50分增加游戏速度
                if (score % 50 === 0 && speed > 300) {
                    speed -= 50;
                    clearInterval(moleInterval);
                    moleInterval = setInterval(showRandomMole, speed);
                }
            }
        }
        
        // 开始游戏
        function startGame() {
            if (gameActive) return;
            
            // 重置游戏状态
            score = 0;
            timeLeft = 30;
            speed = 1000;
            gameActive = true;
            
            // 更新显示
            scoreElement.textContent = score;
            timeElement.textContent = timeLeft;
            startButton.disabled = true;
            startButton.textContent = "游戏中...";
            
            // 隐藏所有马蹄
            hideAllMoles();
            
            // 启动计时器
            timer = setInterval(() => {
                timeLeft--;
                timeElement.textContent = timeLeft;
                
                if (timeLeft <= 0) {
                    endGame();
                }
            }, 1000);
            
            // 启动马蹄显示
            moleInterval = setInterval(showRandomMole, speed);
        }
        
        // 结束游戏
        function endGame() {
            gameActive = false;
            clearInterval(timer);
            clearInterval(moleInterval);
            
            startButton.disabled = false;
            startButton.textContent = "开始游戏";
            
            // 隐藏所有马蹄
            hideAllMoles();
            
            // 显示结果
            finalScoreElement.textContent = score;
            
            // 根据得分显示不同消息
            if (score >= 200) {
                messageTitle.textContent = "太棒了!你是马蹄大师!";
            } else if (score >= 100) {
                messageTitle.textContent = "干得好!反应很快!";
            } else if (score >= 50) {
                messageTitle.textContent = "不错!继续努力!";
            } else {
                messageTitle.textContent = "加油,下次会更好!";
            }
            
            messageElement.style.display = 'block';
        }
        
        // 重新开始游戏
        function restartGame() {
            // 结束当前游戏
            if (gameActive) {
                clearInterval(timer);
                clearInterval(moleInterval);
                gameActive = false;
            }
            
            startButton.disabled = false;
            startButton.textContent = "开始游戏";
            
            // 重置显示
            scoreElement.textContent = '0';
            timeElement.textContent = '30';
            
            // 隐藏消息框
            messageElement.style.display = 'none';
            
            // 重新创建洞孔
            createHoles();
        }
        
        // 事件监听
        startButton.addEventListener('click', startGame);
        restartButton.addEventListener('click', restartGame);
        closeMessageButton.addEventListener('click', () => {
            messageElement.style.display = 'none';
        });
        
        // 初始化游戏
        createHoles();
        
        // 添加键盘快捷键
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space' && !gameActive) {
                startGame();
            } else if (e.code === 'Escape') {
                if (gameActive) {
                    endGame();
                } else {
                    restartGame();
                }
            }
        });
        
        // 添加触摸设备优化
        document.addEventListener('touchstart', function() {}, {passive: true});
    </script>
</body>
</html>
posted @ 2026-02-24 21:50  bz02_2023f2  阅读(3)  评论(0)    收藏  举报  来源