JS实现“打地鼠”游戏开发（1）——超详细功能分析与游戏界面实现（基于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>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
此时的index.css文件为：
*{
margin:0px;
padding:0px;
}
body{
background-image: url(./image/gress9.jpg);
}
此时在浏览器中打开index.html显示效果为：
说明：大家可以找到足够大的图来铺设界面，而不必平铺。
2、16个鼠洞的铺设
（1）确定游戏主区域
首先我们在游戏界面中选中一块区域作为鼠洞铺设的位置：
<!--添加一个空的div，并再css文件中添加样式-->
<div class="area">
</div>
/*area为游戏主区域*/
.area{
width:800px;
height:640px;
border:1px solid red;
margin:0px auto;
}
此时在浏览器中打开index.html显示效果为：
加边框的区域即为我们要放置鼠洞的位置
·
我们计划加入16个鼠洞，没行四个。有两种方式可以添加，一种是手动建16个div，但明显这种方式是低效的。因此我们将利用JS循环来添加16个鼠洞，在这里我们将引入jQuery，方便我们的操作。引入jQuery也同样有两种方式，一种是本地下载引入，另一种是网络引入。我们选择第二种，建议选取百度的下载地址，因为国外的不太稳定。
引入后，为了测试是否引入成功，我们进行测试：
alert($)
如果出现下面的效果，则说明显示成功：
接下来我们用js循环实现鼠洞添加：
<script>
var hole = "<div class='hole'><img src='./image/mouse2.jpg' alt='' /></div>"
var holenum = 16;
//利用循环将16个洞添加到游戏主区域中
for(var i=0;i<holenum;i++){
$(".area").append(hole);
}
alert($)
</script>
给鼠洞添加样式：
.hole{
width:180px;
height:130px;
background-color: #ccc;
border:1px solid red;
}
此时在浏览器中打开index.html显示效果为：
很明显我们需要对.hole继续添加样式：
此时在浏览器中打开index.html显示效果为：
这是由于边框的缘故，我们去除边框：
这样排列就整齐了，但是看上去“小黄人”并不是在洞里面的，而且洞的形状应该是椭圆形，因此我们继续对.hole添加样式：
此时在浏览器中打开index.html显示效果为：
发现小黄人并不在洞的中间，因此还要对每张图片进行定位：
此时在浏览器中打开index.html显示效果为：
这样就将小黄人的位置放到了洞的中间。到这里可能大家就明白我们要做什么的了：首先我们将小黄人全部设置为隐藏，然后利用JS设置随机出现。实际上老鼠随机出现的效果，就是我们控制了图片的隐藏和消失。
到目前为止，我们所有的编写的代码内容为：
（1）index.html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打地鼠游戏</title>
<link rel="stylesheet" href="index.css">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="area">
</div>
<script>
var hole = "<div class='hole'><img src='./image/mouse2.jpg' alt='' /></div>"
var holenum = 16;
//利用循环将16个洞添加到游戏主区域中
for(var i=0;i<holenum;i++){
$(".area").append(hole);
}
// alert($)
</script>
</body>
</html>
(2)css.index文件
*{
margin:0px;
padding:0px;
}
body{
background-image: url(./image/gress9.jpg);
}
.area{
width:800px;
height:640px;
/*border:1px solid red;*/
margin:0px auto;
}
.hole{
width:180px;
height:130px;
margin-top:30px;
margin-right:20px;
background-color: #ccc;
/*border:1px solid red;*/
float: left;
border-radius:50%;
box-shadow: 10px 10px 5px green inset;
position: relative;
}
.hole img{
position: absolute;
bottom:20px;
left:20px;
}
下面的问题是：我们如何设置老鼠的随机出现，并且击中后分数增加，同时倒计时在进行呢？这是我们这个打地鼠小游戏要实现的主要功能。毫无问题这些动态效果的实现是要用JS及jQuery来实现的，我们将在下一节进行代码实现。下面是第二节的地址链接：
“打地鼠”游戏开发（2）—超详细游戏主体功能代码实现（基于H5+CSS3+JS+jQuery实现）