HTML打地鼠游戏（内有完整代码）

原创 于 2025-12-14 13:02:40 发布 · 64 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #游戏 #前端

这是一个基于HTML/CSS/JavaScript的打地鼠游戏网页代码。游戏包含以下功能：1) 12个地鼠洞随机弹出地鼠；2) 金色特殊地鼠提供更高分数；3) 可调节难度级别；4) 实时显示分数、时间和击中次数；5) 锤子跟随鼠标点击动画；6) 最高分记录保存；7) 游戏开始和结束菜单界面。游戏采用响应式设计，使用CSS动画和JavaScript定时器控制游戏逻辑，数据通过localStorage持久化存储最高分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打地鼠游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #8B4513;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        
        .game-container {
            position: relative;
            width: 800px;
        }
        
        .game-info {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #5D3A1A;
            color: white;
            border-radius: 5px;
        }
        
        .holes-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        
        .hole {
            position: relative;
            width: 180px;
            height: 180px;
            background-color: #5D3A1A;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: inset 0 10px 0 7px #3E2723,
                        inset 0 20px 20px 15px rgba(0, 0, 0, 0.3);
        }
        
        .mole {
            position: absolute;
            bottom: -100%;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 120px;
            background-color: #A0522D;
            border-radius: 50% 50% 40% 40%;
            transition: bottom 0.3s ease;
            cursor: pointer;
            z-index: 2;
        }
        
        .mole.up {
            bottom: 10px;
        }
        
        .mole.hit {
            background-color: #CD5C5C;
            animation: hit 0.3s;
        }
        
        @keyframes hit {
            0% { transform: translateX(-50%) scale(1); }
            50% { transform: translateX(-50%) scale(0.8); }
            100% { transform: translateX(-50%) scale(1); }
        }
        
        .mole::before {
            content: '';
            position: absolute;
            top: 30px;
            left: 30px;
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;
        }
        
        .mole::after {
            content: '';
            position: absolute;
            top: 30px;
            right: 30px;
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;
        }
        
        .mole .nose {
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 10px;
            background-color: #000;
            border-radius: 50%;
        }
        
        .mole .mouth {
            position: absolute;
            top: 70px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 10px;
            background-color: #000;
            border-radius: 0 0 15px 15px;
        }
        
        .special-mole {
            background-color: #FFD700;
        }
        
        .hole::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 40px;
            background-color: #8B4513;
            bottom: 0;
            z-index: 3;
            border-top: 5px solid #5D3A1A;
        }
        
        .hammer {
            position: fixed;
            width: 80px;
            height: 80px;
            pointer-events: none;
            z-index: 100;
            opacity: 0;
            transform-origin: bottom right;
            transition: transform 0.1s, opacity 0.1s;
        }
        
        .hammer.active {
            opacity: 1;
            transform: rotate(-45deg);
        }
        
        .menu {
            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;
            color: white;
            z-index: 10;
            border-radius: 5px;
        }
        
        button {
            padding: 10px 20px;
            font-size: 24px;
            background-color: #F4A460;
            color: #3E2723;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px;
        }
        
        button:hover {
            background-color: #CD853F;
        }
        
        .hidden {
            display: none;
        }
        
        .difficulty-buttons {
            display: flex;
            margin: 20px 0;
        }
        
        .timer-bar {
            height: 10px;
            background-color: #4CAF50;
            margin-top: 10px;
            transition: width 1s linear;
        }
        
        .score-popup {
            position: absolute;
            color: #FFD700;
            font-weight: bold;
            pointer-events: none;
            animation: floatUp 1s forwards;
        }
        
        @keyframes floatUp {
            0% {
                opacity: 1;
                transform: translateY(0);
            }
            100% {
                opacity: 0;
                transform: translateY(-50px);
            }
        }
    </style>
</head>
<body>
    <h1 class="text-4xl mb-4 text-white">打地鼠游戏</h1>
    <div class="game-container">
        <div class="game-info">
            <div>分数: <span id="score">0</span></div>
            <div>时间: <span id="time">30</span>秒</div>
            <div>击中: <span id="hits">0</span></div>
            <div>最高分: <span id="highScore">0</span></div>
        </div>
        <div class="timer-bar-container">
            <div class="timer-bar" id="timerBar"></div>
        </div>
        
        <div class="holes-container" id="holesContainer">
            <!-- 地鼠洞将通过JS生成 -->
        </div>
        
        <!-- 锤子图标 -->
        <div class="hammer" id="hammer">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <rect x="60" y="10" width="15" height="70" fill="#8B4513"/>
                <rect x="30" y="60" width="50" height="15" fill="#CD853F"/>
            </svg>
        </div>
        
        <div class="menu" id="startMenu">
            <h2 class="text-3xl mb-4">打地鼠</h2>
            <p class="text-xl">点击冒出的地鼠得分</p>
            <p class="text-xl">金色地鼠分数更高，但出现时间更短</p>
            
            <p class="text-xl mt-4 mb-2">选择难度:</p>
            <div class="difficulty-buttons">
                <button data-time="60" data-speed="1500" class="difficulty-btn">简单</button>
                <button data-time="45" data-speed="1000" class="difficulty-btn">中等</button>
                <button data-time="30" data-speed="700" class="difficulty-btn">困难</button>
            </div>
        </div>
        
        <div class="menu hidden" id="gameOverMenu">
            <h2 class="text-3xl mb-2">游戏结束</h2>
            <p class="text-xl mb-2">最终分数: <span id="finalScore">0</span></p>
            <p class="text-xl mb-2">击中次数: <span id="finalHits">0</span></p>
            <p class="text-xl mb-4">最高分: <span id="gameOverHighScore">0</span></p>
            <button id="restartBtn">再来一次</button>
        </div>
    </div>

    <script>
        // 获取元素
        const holesContainer = document.getElementById('holesContainer');
        const scoreElement = document.getElementById('score');
        const timeElement = document.getElementById('time');
        const hitsElement = document.getElementById('hits');
        const highScoreElement = document.getElementById('highScore');
        const finalScoreElement = document.getElementById('finalScore');
        const finalHitsElement = document.getElementById('finalHits');
        const gameOverHighScoreElement = document.getElementById('gameOverHighScore');
        const timerBarElement = document.getElementById('timerBar');
        const hammerElement = document.getElementById('hammer');
        const startMenu = document.getElementById('startMenu');
        const gameOverMenu = document.getElementById('gameOverMenu');
        const startBtn = document.getElementById('startBtn');
        const restartBtn = document.getElementById('restartBtn');
        const difficultyButtons = document.querySelectorAll('.difficulty-btn');

        // 游戏常量
        const HOLES_COUNT = 12;
        const SPECIAL_MOLE_CHANCE = 0.2; // 20%几率出现特殊地鼠
        const SPECIAL_MOLE_VALUE = 5; // 特殊地鼠分数
        const NORMAL_MOLE_VALUE = 1; // 普通地鼠分数

        // 游戏变量
        let holes = [];
        let moles = [];
        let score = 0;
        let hits = 0;
        let gameTime = 30; // 秒
        let currentTime = gameTime;
        let moleSpeed = 1000; // 地鼠出现时间（毫秒）
        let gameRunning = false;
        let gameTimer;
        let moleTimers = [];
        let highScore = localStorage.getItem('whackHighScore') || 0;

        // 初始化游戏
        function initGame(time = 30, speed = 1000) {
            // 设置游戏参数
            gameTime = time;
            currentTime = gameTime;
            moleSpeed = speed;
            
            // 重置游戏状态
            score = 0;
            hits = 0;
            
            // 清空容器
            holesContainer.innerHTML = '';
            holes = [];
            moles = [];
            
            // 清除所有计时器
            if (gameTimer) clearInterval(gameTimer);
            moleTimers.forEach(timer => clearTimeout(timer));
            moleTimers = [];
            
            // 更新显示
            scoreElement.textContent = score;
            timeElement.textContent = currentTime;
            hitsElement.textContent = hits;
            timerBarElement.style.width = '100%';
            
            // 生成地鼠洞
            generateHoles();
            
            // 显示开始菜单
            startMenu.classList.remove('hidden');
            gameOverMenu.classList.add('hidden');
            
            gameRunning = false;
        }

        // 生成地鼠洞
        function generateHoles() {
            for (let i = 0; i < HOLES_COUNT; i++) {
                // 创建地洞
                const hole = document.createElement('div');
                hole.className = 'hole';
                hole.dataset.index = i;
                
                // 创建地鼠
                const mole = document.createElement('div');
                mole.className = 'mole';
                
                // 添加地鼠特征
                const nose = document.createElement('div');
                nose.className = 'nose';
                mole.appendChild(nose);
                
                const mouth = document.createElement('div');
                mouth.className = 'mouth';
                mole.appendChild(mouth);
                
                // 添加点击事件
                mole.addEventListener('click', () => hitMole(mole));
                
                // 组装
                hole.appendChild(mole);
                holesContainer.appendChild(hole);
                
                // 保存到数组
                holes.push(hole);
                moles.push(mole);
            }
        }

        // 随机弹出地鼠
        function popMole() {
            if (!gameRunning) return;
            
            // 选择随机地洞
            const randomIndex = Math.floor(Math.random() * HOLES_COUNT);
            const mole = moles[randomIndex];
            
            // 如果地鼠已经弹出，重新选择
            if (mole.classList.contains('up')) {
                setTimeout(popMole, 100);
                return;
            }
            
            // 随机决定是否是特殊地鼠
            const isSpecial = Math.random() < SPECIAL_MOLE_CHANCE;
            if (isSpecial) {
                mole.classList.add('special-mole');
            } else {
                mole.classList.remove('special-mole');
            }
            
            // 弹出地鼠
            mole.classList.add('up');
            
            // 设置地鼠缩回的时间（特殊地鼠时间更短）
            const duration = isSpecial ? moleSpeed * 0.6 : moleSpeed;
            
            // 设置缩回计时器
            const timer = setTimeout(() => {
                mole.classList.remove('up', 'hit');
                // 移除计时器引用
                const index = moleTimers.indexOf(timer);
                if (index !== -1) {
                    moleTimers.splice(index, 1);
                }
            }, duration);
            
            moleTimers.push(timer);
            
            // 设置下一个地鼠弹出的时间
            const nextPopTime = 300 + Math.random() * 700;
            setTimeout(popMole, nextPopTime);
        }

        // 击中地鼠
        function hitMole(mole) {
            if (!gameRunning || !mole.classList.contains('up') || mole.classList.contains('hit')) {
                return;
            }
            
            // 显示击中效果
            mole.classList.add('hit');
            
            // 增加分数和击中次数
            hits++;
            hitsElement.textContent = hits;
            
            // 判断是否是特殊地鼠
            let points = NORMAL_MOLE_VALUE;
            if (mole.classList.contains('special-mole')) {
                points = SPECIAL_MOLE_VALUE;
            }
            
            score += points;
            scoreElement.textContent = score;
            
            // 显示分数弹出
            showScorePopup(mole, points);
            
            // 让地鼠缩回
            setTimeout(() => {
                mole.classList.remove('up', 'hit');
            }, 300);
        }

        // 显示分数弹出
        function showScorePopup(mole, points) {
            const popup = document.createElement('div');
            popup.className = 'score-popup';
            popup.textContent = `+${points}`;
            
            // 定位在鼠标点击位置
            const rect = mole.getBoundingClientRect();
            const gameRect = holesContainer.getBoundingClientRect();
            
            popup.style.left = `${rect.left + rect.width / 2 - gameRect.left}px`;
            popup.style.top = `${rect.top - gameRect.top}px`;
            
            holesContainer.appendChild(popup);
            
            // 动画结束后移除
            setTimeout(() => {
                popup.remove();
            }, 1000);
        }

        // 更新游戏时间
        function updateTime() {
            if (gameRunning) {
                currentTime--;
                timeElement.textContent = currentTime;
                
                // 更新时间条
                const percentage = (currentTime / gameTime) * 100;
                timerBarElement.style.width = `${percentage}%`;
                
                // 时间到，游戏结束
                if (currentTime <= 0) {
                    gameOver();
                }
            }
        }

        // 锤子动画
        function animateHammer(e) {
            if (!gameRunning) return;
            
            // 定位锤子
            hammerElement.style.left = `${e.clientX - 40}px`;
            hammerElement.style.top = `${e.clientY - 40}px`;
            
            // 显示锤子并添加动画
            hammerElement.classList.add('active');
            
            // 移除动画
            setTimeout(() => {
                hammerElement.classList.remove('active');
            }, 100);
        }

        // 游戏结束
        function gameOver() {
            gameRunning = false;
            clearInterval(gameTimer);
            
            // 让所有地鼠缩回
            moles.forEach(mole => {
                mole.classList.remove('up', 'hit');
            });
            
            // 清除所有地鼠计时器
            moleTimers.forEach(timer => clearTimeout(timer));
            moleTimers = [];
            
            // 更新最高分
            if (score > highScore) {
                highScore = score;
                localStorage.setItem('whackHighScore', highScore);
                highScoreElement.textContent = highScore;
            }
            
            // 显示游戏结束菜单
            finalScoreElement.textContent = score;
            finalHitsElement.textContent = hits;
            gameOverHighScoreElement.textContent = highScore;
            gameOverMenu.classList.remove('hidden');
        }

        // 开始游戏
        function startGame(time, speed) {
            startMenu.classList.add('hidden');
            gameRunning = true;
            
            // 开始计时
            gameTimer = setInterval(updateTime, 1000);
            
            // 开始弹出地鼠
            setTimeout(popMole, 500);
        }

        // 事件监听
        // 鼠标点击显示锤子动画
        document.addEventListener('mousedown', animateHammer);
        
        // 难度按钮
        difficultyButtons.forEach(button => {
            button.addEventListener('click', () => {
                const time = parseInt(button.dataset.time);
                const speed = parseInt(button.dataset.speed);
                startGame(time, speed);
            });
        });

        restartBtn.addEventListener('click', () => {
            initGame(gameTime, moleSpeed);
        });

        // 初始化最高分显示
        highScoreElement.textContent = highScore;
        
        // 初始化游戏
        initGame();
    </script>
</body>
</html>

前端搭建砸地鼠游戏（内附源码）
官方推荐
04-12 3万+
通过简易版小游戏让前端初学者了解前端三件套的搭配使用以及实现逻辑
三分钟学会打地鼠小游戏
weixin_56172044的博客
07-09 1104
操作条件：鼠标点击地鼠 打中地鼠分数就会加一结束条件：在规定的时间内就会结束先设置好土地鼠的CSS布局让它在屏幕中不显示，最后通过给土地鼠添加一个类让他能够重新出现在页面上每次土地鼠的地方都是不固定的，这样就需要想到使用随机函数进行设置土地鼠属性每秒都是在运动，所以需要添加一个定时器，这样的效果是让我们每秒都能看到不同的土壤中出现土地鼠。
Python自动化从入门到实战(23)：Python打地鼠游戏开发
isoft888的专栏，致力于C#/python分享物联网、大数据，神经网络的等领域，欢迎讨论交流！
10-17 1157
Python打地鼠游戏开发摘要 本文介绍了如何使用Python Flask框架开发一款适合幼儿园小朋友的网页版打地鼠游戏。游戏包含随机移动的地鼠、30秒计时器和计分系统，能记录最高分。项目采用MVC架构：后端使用Flask处理路由和分数管理，前端通过HTML/CSS构建界面，JavaScript实现游戏逻辑。文章详细讲解了项目结构、后端数据处理（JSON存储最高分）以及前端交互实现，适合编程新手学习基础Web游戏开发。代码包含完整实现，读者可轻松部署运行。
打地鼠小游戏（HTML5+CSS+JS）
weixin_45822011的博客
03-17 7215
打地鼠小游戏（HTML5+CSS+JS） 文章目录打地鼠小游戏（HTML5+CSS+JS）预设有两个文件（htlm和css）加一个文件夹(放图片)设置基本界面（1）背景图（2）开始按钮（3）放置16个洞 老鼠随机出现设置倒计时功能打老鼠------计分设置最终效果图目前没有解决的问题 预设有两个文件（htlm和css）加一个文件夹(放图片) html文件就是编写这个游戏界面，css文件放置其表现的形式 专门建立一个文件夹，放置背景图，老鼠，洞的图片 下图为我所设置的基本内容： [外链图片转存失败,源站可能
100行Python代码，做一个打地鼠小游戏！
cainiao_python的博客
12-03 3440
最近在学习使用 Python 来完成一些小游戏，使用到的有 Pygame 和 PyQt5 等，根据网上前人的代码，整理了一个打地鼠的小游戏，今天也分享给大家，一起学习！游戏画面首先先进行游...
JavaScript 中阶 打地鼠游戏（基础版）
weixin_65257540的博客
03-16 4137
思路 1、先搭建整体布局样式 2、由于打地鼠游戏需要用到格子类型，所以会设计到表格table的使用 3、为了便于后面操作，需要把游戏中会用到的图片进行类名的命名，后面js部分就可以挂类来更改不同的表达效果 4、先获取游戏中会需要到的元素 5、渲染最高分数，通过本地储存的方法localStorage.getItem()，先获取本地数据，进行判断，如右数据，那最高分的元素就直接渲染这个数据，如果没有，分数则为0 6、设置鼠标在游戏中的变化效果，onmouseover移入，onmousedown按下和onmou
JavaScript之jQuery番外篇【打地鼠游戏的制作讲解】
跳探戈的小龙虾的博客
04-10 1241
打地鼠游戏： 游戏分为两个模式：简单和困难模式，玩家可自行选择游戏的模式，其中： (1) 简单模式：玩家会遇到从洞中随机钻出的地鼠，成功击打地鼠获得100得分。 (2) 困难模式：洞中偶尔会出现顽皮的孩童，如果误击儿童，扣除100得分，其他规则同上。 游戏支持弹窗展示本轮得分，同时具有保存历史最高战绩的功能！
200+有趣的HTML前端游戏项目合集（5月17日更新，持续更新中）
热门推荐
努力是为了站在万人之中，成为别人的光
04-01 17万+
两百个简单的 HTML 游戏项目，可提高你的前端技能。
Arduino自制打地鼠游戏机详细教程
12-07 3656
打地鼠游戏机 游戏规则：3个LED对应3个按键，刚开始时蜂鸣器鸣叫三声，频率5Hz，紧接着每0.5秒生成一个0至2的随机数，对应点亮相应的LED，在下次随机数生成之前判断相应的按键是否被按下，若按键正确，在串口打印“LED编号”+“right”；若按键错误，蜂鸣器鸣叫0.2秒，在串口打印“LED编号”+“wrong”，然后继续生成随机数。完成10次操作后生成随机数的频率变为0.4秒，又...
js打地鼠
TSZ513420的博客
10-08 1087
js经典项目打地鼠如何利用js来实现打地鼠呢？ 首先是游戏页面的制作 <!-- 游戏背板 --> <div class=" backdrop"> <!-- 游戏积分器 --> <div class="score">0</div> <!-- 游戏计时器 --> <div class="timebar"></div> &l...
精选资源
js九宫格打地鼠游戏代码
07-24
【JavaScript九宫格打地鼠游戏详解】 在编程领域，JavaScript是一种广泛使用的脚本语言，尤其在网页交互和游戏开发中发挥着重要作用。本篇将详细介绍一个基于JavaScript实现的九宫格打地鼠小游戏，旨在帮助读者理解...
JavaScript 打地鼠游戏代码说明
10-28
本篇文章旨在详细介绍一个基于纯JavaScript实现的打地鼠游戏，并通过分析其代码结构和逻辑，帮助读者理解和掌握如何利用JavaScript开发简单网页游戏。 #### 二、游戏规则简介 打地鼠游戏的基本规则是玩家需要通过...
H5游戏源码 网页版打地鼠源码.zip
10-15
5. 时间限制：许多打地鼠游戏有时间限制，需要在限定时间内尽可能多地打到地鼠，这部分源码会管理游戏时间并触发游戏结束条件。 6. 游戏结束和重玩：当达到特定条件（如时间耗尽、得分达到上限等）时，游戏结束，...
vue实现打地鼠小游戏
10-14
在本示例中，我们看到一个使用Vue.js框架开发的小游戏——打地鼠。这个小游戏的实现主要包括以下几个关键点： 1. **模板结构**：Vue组件的`<template>`部分定义了游戏界面的HTML结构。游戏包含一个标题、一个游戏...
java使用itextpdf将html转换成pdf,由于分页问题，内容被切割隐藏或数据显示不完整--解决方案
最新发布
橙-极纪元-JJYCheng
12-13 138
java使用itextpdf将html转换成pdf,由于分页问题，内容被切割隐藏或数据显示不完整--解决方案
重绘和重排怎么触发？怎么优化？
weixin_45284808的博客
12-12 866
摘要： 浏览器渲染中的重排（Reflow）和重绘（Repaint）是性能优化的关键点。重排由布局属性改变（如尺寸、位置）触发，需重新计算DOM结构，性能消耗大；重绘仅由外观样式（如颜色、透明度）变化引起，消耗较小。优化核心在于减少重排：1）批量操作DOM/样式，使用class或DocumentFragment；2）避免强制同步布局，先批量读取再修改；3）动画优先使用transform/opacity以启用GPU加速；4）缩小重排影响范围，如脱离文档流。通过防抖、缓存布局属性等技巧可进一步提升性能。落地重点为
[Web自动化] HTML元素的定位(Xpath)
知智
12-09 918
摘要：XPath是一种用于定位XML/HTML文档节点的语言，通过路径表达式实现元素查找。它具有灵活性、简洁性和跨平台性等特点，支持绝对路径和相对路径定位，可结合属性、文本内容等进行精确筛选。XPath广泛应用于Web自动化测试、数据抓取和XML处理等场景，提供丰富的函数和运算符支持复杂查询。本文详细介绍了XPath的基本语法、工作原理和应用实例，包括条件表达式、通配符使用等核心功能，帮助开发者高效处理文档节点定位问题。（149字）
html对接阿里云百炼AI大模型
ITKidKid的博客
12-10 831
html对接阿里云百炼AI大模型
grid布局-子项放置3
syt_1013的博客
12-12 220
【代码】grid布局-子项放置3。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值