【打地鼠游戏】html版

搬砖ing换来金砖

已于 2025-03-25 16:43:08 修改

阅读量833

点赞数 5

分类专栏：游戏相关文章标签： html 游戏 css

于 2025-03-25 11:18:55 首次发布

本文链接：https://blog.youkuaiyun.com/wugang0432/article/details/146498428

版权

游戏相关专栏收录该内容

2 篇文章

订阅专栏

打地鼠游戏

<!DOCTYPE html>
<html>
<head>
    <title>打地鼠小游戏</title>
    <style>
        /* 全局样式设置 */
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }
        
        /* 游戏标题样式 */
        h1 {
            color: #8B4513; /* 棕色标题 */
        }
        
        /* 游戏主容器样式 */
        #game-container {
            width: 600px;
            height: 400px;
            margin: 0 auto;
            background-color: #8B4513; /* 棕色背景 */
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            position: relative;
        }
        
        /* 地鼠洞样式 */
        .hole {
            width: 100px;
            height: 100px;
            background-color: #000; /* 黑色地鼠洞 */
            border-radius: 50%; /* 圆形 */
            position: absolute;
            overflow: hidden;
            cursor: pointer; /* 鼠标指针变为手形 */
        }
        
        /* 地鼠样式 */
        .mole {
            width: 80px;
            height: 80px;
            /* 使用SVG创建简单的地鼠图形 */
            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="40" fill="gray"/><circle cx="35" cy="40" r="5" fill="black"/><circle cx="65" cy="40" r="5" fill="black"/><path d="M40 65 Q50 75 60 65" stroke="black" stroke-width="3" fill="none"/></svg>');
            background-size: contain;
            position: absolute;
            bottom: -80px; /* 初始位置：隐藏在地洞下 */
            left: 10px;
            transition: bottom 0.3s; /* 添加动画效果 */
        }
        
        /* 地鼠出现的状态 */
        .mole.up {
            bottom: 10px; /* 地鼠出现的位置 */
        }
        
        /* 计分板样式 */
        #score-board {
            margin: 20px auto;
            padding: 10px;
            width: 200px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }
        
        /* 开始按钮样式 */
        #start-btn {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50; /* 绿色按钮 */
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }
        
        /* 计时器样式 */
        #timer {
            font-size: 24px;
            font-weight: bold;
            color: #d9534f; /* 红色文字 */
        }
    </style>
</head>
<body>
    <!-- 游戏标题 -->
    <h1>打地鼠小游戏</h1>
    
    <!-- 计分板 -->
    <div id="score-board">
        <div>得分: <span id="score">0</span></div>
        <div>剩余时间: <span id="timer">30</span>秒</div>
    </div>
    
    <!-- 游戏主容器 -->
    <div id="game-container"></div>
    
    <!-- 开始游戏按钮 -->
    <button id="start-btn">开始游戏</button>

    <script>
        // 获取DOM元素
        const gameContainer = document.getElementById('game-container');
        const scoreDisplay = document.getElementById('score');
        const timerDisplay = document.getElementById('timer');
        const startBtn = document.getElementById('start-btn');
        
        // 游戏变量
        let score = 0;          // 玩家得分
        let timeLeft = 30;      // 剩余时间
        let gameInterval;       // 游戏循环的interval ID
        let timerInterval;      // 计时器的interval ID
        let holes = [];         // 存储所有地鼠洞的数组
        let isGameRunning = false; // 游戏是否进行中的标志
        
        /**
         * 创建地鼠洞
         * 在游戏容器中创建8个地鼠洞，并设置它们的初始位置
         */
        function createHoles() {
            // 定义8个地鼠洞的位置坐标
            const positions = [
                {top: 50, left: 50},    // 第一排第一个
                {top: 50, left: 250},    // 第一排第二个
                {top: 50, left: 450},    // 第一排第三个
                {top: 150, left: 150},   // 第二排第一个
                {top: 150, left: 350},   // 第二排第二个
                {top: 250, left: 50},    // 第三排第一个
                {top: 250, left: 250},   // 第三排第二个
                {top: 250, left: 450}    // 第三排第三个
            ];
            
            // 遍历所有位置，创建地鼠洞
            positions.forEach(pos => {
                // 创建地鼠洞元素
                const hole = document.createElement('div');
                hole.className = 'hole';
                hole.style.top = pos.top + 'px';
                hole.style.left = pos.left + 'px';
                
                // 创建地鼠元素
                const mole = document.createElement('div');
                mole.className = 'mole';
                hole.appendChild(mole);
                
                // 添加点击事件监听器
                hole.addEventListener('click', () => {
                    // 只有当地鼠出现时才计分
                    if (mole.classList.contains('up')) {
                        mole.classList.remove('up');
                        score++;
                        scoreDisplay.textContent = score;
                    }
                });
                
                // 将地鼠洞添加到游戏容器
                gameContainer.appendChild(hole);
                // 存储地鼠洞和地鼠的引用
                holes.push({hole, mole});
            });
        }
        
        /**
         * 随机让一个地鼠出现
         */
        function popUpRandomMole() {
            // 如果游戏没有运行，则直接返回
            if (!isGameRunning) return;
            
            // 随机选择一个地鼠洞
            const randomIndex = Math.floor(Math.random() * holes.length);
            const { mole } = holes[randomIndex];
            
            // 让地鼠出现
            mole.classList.add('up');
            
            // 1秒后地鼠自动消失
            setTimeout(() => {
                mole.classList.remove('up');
            }, 1000);
        }
        
        /**
         * 开始游戏
         */
        function startGame() {
            // 如果游戏已经在运行，则直接返回
            if (isGameRunning) return;
            
            // 设置游戏状态
            isGameRunning = true;
            // 重置分数和时间
            score = 0;
            timeLeft = 30;
            scoreDisplay.textContent = score;
            timerDisplay.textContent = timeLeft;
            
            // 禁用开始按钮
            startBtn.disabled = true;
            
            // 设置游戏循环：每800毫秒出现一个地鼠
            gameInterval = setInterval(popUpRandomMole, 800);
            
            // 设置计时器：每秒减少剩余时间
            timerInterval = setInterval(() => {
                timeLeft--;
                timerDisplay.textContent = timeLeft;
                
                // 时间到，结束游戏
                if (timeLeft <= 0) {
                    endGame();
                }
            }, 1000);
        }
        
        /**
         * 结束游戏
         */
        function endGame() {
            // 设置游戏状态
            isGameRunning = false;
            // 清除游戏循环和计时器
            clearInterval(gameInterval);
            clearInterval(timerInterval);
            // 重新启用开始按钮
            startBtn.disabled = false;
            
            // 显示最终得分
            alert(`游戏结束! 你的得分是: ${score}`);
        }
        
        /**
         * 初始化游戏
         */
        function initGame() {
            // 创建地鼠洞
            createHoles();
            // 添加开始按钮点击事件
            startBtn.addEventListener('click', startGame);
        }
        
        // 页面加载完成后初始化游戏
        initGame();
    </script>
</body>
</html>