爆火！用 HTML 制作超有趣的打地鼠游戏，零基础也能轻松上手

爆火！用 HTML 制作超有趣的打地鼠游戏，零基础也能轻松上手！ - 图1

哈喽大家好呀～我是专注于分享前端小技巧的 [你的昵称]！最近发现很多粉丝留言说想学习 HTML 制作小游戏，今天就来教大家做一个童年经典 ——打地鼠游戏！不用复杂代码，零基础也能跟着教程一步步完成，做好后不仅能自己玩，还能分享给朋友炫耀哦～

一、为什么要做这个打地鼠游戏？

说起打地鼠，那可是街机厅里的回忆杀！现在用 HTML 制作这个游戏，有这几个超赞的优势：

  • 技术门槛低：只需要 HTML、CSS 和一点点 JavaScript 基础，新手也能轻松驾驭

  • 互动性强：做好后可以在手机、电脑上直接玩，聚会时拿出来和朋友比赛超有趣

  • 可扩展性高：学会基础版后，还能自己添加音效、皮肤、难度选择等进阶功能

先给大家看看我做好的效果👇，是不是很想马上动手试试？

二、制作前的准备工作

1. 所需工具

  • 一个文本编辑器（推荐 VS Code，免费又好用）

  • 现代浏览器（Chrome、Firefox 等）

2. 游戏核心逻辑

打地鼠游戏的核心其实很简单：

  • 地鼠随机出现在不同洞口

  • 玩家点击出现的地鼠得分

  • 设定游戏时间，时间结束后显示分数

三、详细制作步骤

1. 搭建 HTML 基础结构

首先，我们要创建一个 HTML 文件，搭建游戏的基本框架。打开 VS Code，新建一个文件，命名为whac-a-mole.html，然后输入以下代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>打地鼠游戏</title>
  7.     <link rel="stylesheet" href="styles.css">
  8. </head>
  9. <body>
  10.     <div class="game-container">
  11.         <div class="header">
  12.             <h1>打地鼠游戏</h1>
  13.             <div class="scoreboard">
  14.                 <div class="score">分数：<span id="score">0</span></div>
  15.                 <div class="time">时间：<span id="time">60</span>秒</div>
  16.             </div>
  17.         </div>
  18.         <div class="game-board" id="gameBoard">
  19.             <!-- 地鼠洞口将通过JS动态生成 -->
  20.         </div>
  21.         <button class="start-btn" id="startBtn">开始游戏</button>
  22.     </div>
  23.     <script src="script.js"></script>
  24. </body>
  25. </html>

这段代码搭建了游戏的基本结构，包括标题、分数显示、时间显示、游戏面板和开始按钮。接下来我们需要创建 CSS 文件来美化界面。

2. 用 CSS 美化游戏界面

在同一个文件夹下，新建一个styles.css文件，输入以下代码：

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.     font-family: 'Arial', sans-serif;
  6. }
  7. body {
  8.     display: flex;
  9.     justify-content: center;
  10.     align-items: center;
  11.     min-height: 100vh;
  12.     background-color: #f5f5f5;
  13. }
  14. .game-container {
  15.     background-color: #fff;
  16.     border-radius: 10px;
  17.     box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  18.     padding: 20px;
  19.     width: 90%;
  20.     max-width: 600px;
  21. }
  22. .header {
  23.     text-align: center;
  24.     margin-bottom: 20px;
  25. }
  26. h1 {
  27.     color: #333;
  28.     margin-bottom: 10px;
  29. }
  30. .scoreboard {
  31.     display: flex;
  32.     justify-content: space-around;
  33.     margin-bottom: 20px;
  34.     font-size: 18px;
  35.     font-weight: bold;
  36. }
  37. .score, .time {
  38.     padding: 8px 15px;
  39.     border-radius: 5px;
  40. }
  41. .score {
  42.     background-color: #e6f7ff;
  43.     color: #1890ff;
  44. }
  45. .time {
  46.     background-color: #fff3e0;
  47.     color: #fa8c16;
  48. }
  49. .game-board {
  50.     display: grid;
  51.     grid-template-columns: repeat(3, 1fr);
  52.     gap: 10px;
  53.     margin-bottom: 20px;
  54. }
  55. .hole {
  56.     height: 100px;
  57.     background-color: #f0f0f0;
  58.     border-radius: 10px;
  59.     position: relative;
  60.     overflow: hidden;
  61.     cursor: pointer;
  62.     transition: all 0.3s ease;
  63. }
  64. .hole:hover {
  65.     background-color: #e0e0e0;
  66. }
  67. .mole {
  68.     position: absolute;
  69.     bottom: 0;
  70.     width: 100%;
  71.     height: 100%;
  72.     background-image: url('mole.png'); /* 这里需要替换为实际的地鼠图片路径 */
  73.     background-size: cover;
  74.     background-position: center;
  75.     transition: all 0.3s ease;
  76. }
  77. .start-btn {
  78.     display: block;
  79.     width: 100%;
  80.     padding: 12px 20px;
  81.     background-color: #1890ff;
  82.     color: white;
  83.     border: none;
  84.     border-radius: 5px;
  85.     font-size: 18px;
  86.     font-weight: bold;
  87.     cursor: pointer;
  88.     transition: background-color 0.3s ease;
  89. }
  90. .start-btn:hover {
  91.     background-color: #096dd9;
  92. }
  93. @media (max-width: 480px) {
  94.     .game-container {
  95.         padding: 15px;
  96.     }
  97.     .header h1 {
  98.         font-size: 24px;
  99.     }
  100.     .scoreboard {
  101.         font-size: 16px;
  102.     }
  103.     .hole {
  104.         height: 80px;
  105.     }
  106. }

这里我们设置了游戏的整体样式，包括背景、字体、游戏面板的布局等。需要注意的是，代码中用到了一个地鼠的图片mole.png，你可以自己找一张喜欢的地鼠图片放在同一个文件夹下，或者也可以用 CSS 绘制一个简单的地鼠图标。

3. 编写 JavaScript 实现游戏逻辑

最后，我们来编写最重要的 JavaScript 代码，实现游戏的核心逻辑。新建一个script.js文件，输入以下代码：

  1. document.addEventListener('DOMContentLoaded', () => {
  2.     // 获取DOM元素
  3.     const gameBoard = document.getElementById('gameBoard');
  4.     const startBtn = document.getElementById('startBtn');
  5.     const scoreDisplay = document.getElementById('score');
  6.     const timeDisplay = document.getElementById('time');
  8.     // 游戏状态
  9.     let score = 0;
  10.     let time = 60;
  11.     let gameActive = false;
  12.     let gameInterval;
  13.     let moleInterval;
  15.     // 创建游戏面板（9个洞口）
  16.     function createGameBoard() {
  17.         gameBoard.innerHTML = '';
  18.         for (let i = 0; i < 9; i++) {
  19.             const hole = document.createElement('div');
  20.             hole.classList.add('hole');
  21.             hole.dataset.id = i;
  22.             gameBoard.appendChild(hole);
  23.         }
  24.     }
  26.     // 让地鼠随机出现
  27.     function showMole() {
  28.         // 先隐藏所有地鼠
  29.         document.querySelectorAll('.mole').forEach(mole => {
  30.             mole.remove();
  31.         });
  33.         // 随机选择一个洞口
  34.         const holes = document.querySelectorAll('.hole');
  35.         const randomHole = holes[Math.floor(Math.random() * holes.length)];
  37.         // 创建地鼠元素
  38.         const mole = document.createElement('div');
  39.         mole.classList.add('mole');
  40.         randomHole.appendChild(mole);
  42.         // 随机显示时间（300-1000毫秒）
  43.         setTimeout(() => {
  44.             if (gameActive) {
  45.                 showMole();
  46.             }
  47.         }, Math.floor(Math.random() * 700) + 300);
  48.     }
  50.     // 处理地鼠被点击事件
  51.     function handleMoleClick(e) {
  52.         if (!gameActive) return;
  54.         // 检查点击的是否是地鼠
  55.         if (e.target.classList.contains('mole')) {
  56.             score++;
  57.             scoreDisplay.textContent = score;
  59.             // 可以在这里添加得分音效
  60.             // playSound('score.mp3');
  61.         }
  62.     }
  64.     // 开始游戏
  65.     function startGame() {
  66.         if (gameActive) return;
  68.         gameActive = true;
  69.         score = 0;
  70.         time = 60;
  71.         scoreDisplay.textContent = 0;
  72.         timeDisplay.textContent = 60;
  73.         startBtn.textContent = '重新开始';
  75.         // 开始计时
  76.         gameInterval = setInterval(() => {
  77.             time--;
  78.             timeDisplay.textContent = time;
  80.             if (time <= 0) {
  81.                 endGame();
  82.             }
  83.         }, 1000);
  85.         // 开始显示地鼠
  86.         moleInterval = setInterval(showMole, 1000);
  88.         // 添加地鼠点击事件监听
  89.         document.querySelectorAll('.hole').forEach(hole => {
  90.             hole.addEventListener('click', handleMoleClick);
  91.         });
  92.     }
  94.     // 结束游戏
  95.     function endGame() {
  96.         gameActive = false;
  97.         clearInterval(gameInterval);
  98.         clearInterval(moleInterval);
  99.         startBtn.textContent = '开始游戏';
  101.         // 可以在这里添加游戏结束音效
  102.         // playSound('game-over.mp3');
  104.         // 显示游戏结束提示
  105.         alert(`游戏结束！你的得分是：${score}`);
  106.     }
  108.     // 初始化游戏
  109.     function init() {
  110.         createGameBoard();
  111.         startBtn.addEventListener('click', startGame);
  112.     }
  114.     // 启动游戏
  115.     init();
  116. });

这段代码实现了游戏的核心逻辑，包括地鼠的随机出现、得分计算、时间倒计时以及游戏的开始和结束控制。

四、游戏优化和进阶

1. 添加音效

想要让游戏更有氛围，可以添加一些音效：

  • 地鼠被击中的音效

  • 游戏开始和结束的音效

  • 倒计时的音效

只需要在代码中添加一个playSound函数，然后在相应的位置调用即可。

2. 增加难度变化

让游戏更有挑战性，可以随着得分的增加提高地鼠出现的速度：

  1. // 在showMole函数中，根据得分调整地鼠出现的速度
  2. const speed = Math.max(300, 1000 - (score * 50)); // 得分越高，速度越快
  3. setTimeout(() => {
  4.     if (gameActive) {
  5.         showMole();
  6.     }
  7. }, Math.floor(Math.random() * (speed - 200)) + 200);

3. 自定义地鼠和洞口样式

你可以替换地鼠的图片，或者修改洞口的样式，让游戏更符合你的审美。比如，你可以找一些可爱的动物图片，做成 “打动物” 游戏，或者换成水果图片，做成 “打水果” 游戏。

五、常见问题解答

1. 地鼠图片怎么获取？

可以在网上搜索 “打地鼠游戏素材”，或者用 Canva 等工具自己制作一个简单的地鼠图标。

2. 游戏在手机上不好点击怎么办？

可以调整 CSS 中的洞口大小，让洞口在手机上显示得更大一些，方便点击。

3. 想添加更多关卡怎么办？

可以根据得分设置不同的关卡，每个关卡有不同的地鼠出现速度和游戏时间。

六、最后总结

恭喜你！现在你已经学会了用 HTML 制作一个简单又有趣的打地鼠游戏啦～这个项目非常适合前端新手练习，不仅能巩固 HTML 和 CSS 的知识，还能学习 JavaScript 的事件处理和定时器的使用。做好后别忘了分享给你的朋友，看看谁的得分更高～如果在制作过程中遇到任何问题，欢迎在评论区留言，我会尽力帮你解决！如果你觉得这个教程有用，别忘了点赞、收藏、转发哦～关注我，后续还会分享更多有趣的前端项目教程！