本文介绍了使用H5、CSS3、JS和jQuery开发打地鼠游戏的详细过程，从游戏说明、功能分析到开发前规划。游戏包括开始界面、游戏进行中和结束的各个阶段，通过代码实现鼠洞、老鼠的随机出现、打击效果、分数增加和倒计时等功能。文章还涵盖了目录结构规划和开发顺序规划，最后展示了初步的游戏界面布局和鼠洞的铺设。
一、游戏说明
1、简要说明
打地鼠是我们非常熟悉的一款小游戏，它的游戏结构和规则也都比较简单。那么如果能够亲自徒手开发这样的一款经典小游戏呢？接下来笔者将使用H5+CSS3+JS+jQuery的组合实现完整的打地鼠小游戏，过程中会对所有代码进行详细的说明及注释。以确保对JS和jQuery不是很熟悉的朋友也能够看懂。（我们并不需要学完所有的JS和jQuery的技术再来进行实践，事实上我们应该多结合实践，把学到的技能应用在实战中，并且在实战不断扩展自己的技能，修炼自己的思维）。
2、效果演示
下面对我们最终实现的打地鼠游戏进行一个简单的演示：
事实上最终的效果是带有背景音效跟击中目标音效的，由于无法添加视频类文件而无法展示。
二、功能分析
我们从游戏的流程开始进行分析，分为进行游戏以前，游戏进行过程中，游戏结束后。每个阶段都有不同的效果，我们将针对每一个不同阶段的功能进行分析和说明，并探讨其实现方式。
1、进行游戏之前
进入游戏，我们首先看到的是一个选择界面，其中有三个选项：
（1）开始游戏：点击进入游戏。
（2）背景音乐：点击之后开启背景音乐，默认为选中状态
（3）游戏音效：选中之后开启游戏中的击打音效，打中地鼠时发出击打的声音。
2、游戏进行中
游戏运行的过程是我们主要实现的效果，包括三个部分。
（1）游戏的主界面：老鼠出没的洞，以及随机出现的老鼠，这是最为关键的部分
（2）剩余时间及当期得分：剩余时间执行倒计时，打开一个目标当期得分加1
（3）击打的锤子：用于击打目前。（截屏时无法获取）
3、游戏结束
（1）游戏结束提示：屏幕正中央出现“游戏结束”提示
（2）剩余时间和当前得分：剩余时间显示为0，当前得分正常显示，且不再变动
（3）鼠洞及老鼠消失。
要说明的是，游戏进行的顺序并不一定是我们代码设计的顺序，进行编码时，如果是独立开发，那我们应当首先实现游戏的主体功能，然后再完善和添加次要或辅助功能。
三、开发前规划
1、目录结构规划
在进行正式的开发之前，我们首先要进行目录结构的设计。首先要有一个主要的界面，因此我们加入一个index.html作为主要的展示页面；为了实现样式的分离，我们专门创建一个index.css样式文件；
除此之外，我们还分别需要一个专门放置图片和音效的文件夹，分别命名为：image和audio
2、开发顺序规划
（1）游戏主页面铺设：游戏的主体页面是我们首先要铺设的
（2）鼠洞及老鼠填入：在界面上增加16个鼠洞，每个鼠洞有一个老鼠
（3）老鼠“随机出现”效果实现：其实我们是用设置“隐藏”和“出现”的方式来实现老鼠“随机出现”的效果，因此上面需要在每个鼠洞的位置出现一个老鼠。
（4）打击效果及分数增加：当我们每次击中目标，分数加1
（5）倒计时设置：设置倒计时，并在倒计时结束时游戏结束
（6）“制作”锤子：将光标变为锤子对老鼠进行击打。
（7）添加游戏音效及游戏开始前的选择界面。
四、代码实现
1、主体页面布局
我们首先铺设游戏的主体背景，通过“背景图”方式来实现：
这里出现一个问题，我们以什么样的方式实现背景图？是用一个div？还是在body上加一个背景图？考虑到背景图是为整个界面铺设，需要铺满整个屏幕，因此我们采用第二种方式。
此时的index.html文件为：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打地鼠游戏</title>
最低0.47元/天 解锁文章
扫一扫
997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
