JavaScript实现“打地鼠”游戏开发（2）——超详细游戏主体功能代码实现（基于H5+CSS3+JS+jQuery实现）

说明：

上一节我们对打地鼠游戏的功能分析进行详细的说明，并对游戏主界面进行了代码实现实现，并利用for循环，实现了16个鼠洞的铺设，结合CSS对其样式进行了修改，使得每个小黄人都能够在鼠洞的中间位置。

接下来我们将实现小黄人的随机出现，及倒计时和击中目标得分增加的动态效果，为了使大家都能够明白每一步是如何实现的，笔者将对每一代码进行详细的说明及注释。

上一节的地址链接为：

打地鼠“”游戏开发（1）——超详细功能分析与游戏界面实现（基于H5+CSS3+JS+jQuery实现）
https://blog.csdn.net/qq_32925031/article/details/88624345#comments

接着上一节的内容，我们继续进行。

四、代码实现

3、小黄人的随机出现

首先我们来分析一下，我们如何实现小黄人随机出现这个效果呢？要让它出现是不是需要先让它隐藏？然后我们再让其显示？这个想法是正确的，我们将首先利用CSS样式对其进行隐藏。那么随机出现又是如何出现的呢？还有我们如何确保小黄人不会连续两次在同一个树洞出现呢？我们如何对这16个小黄人进行管理呢？

接下来我们对这些问题进行一一解决。

（1）隐藏

首先先将小黄人进行隐藏，只需要一行CSS样式：

display: none;

当然这一行样式是加在.hole img上的。

我们来看一下目前的效果。用浏览器打开我们的index.html，看到现在的效果为：

我们已经成功将小黄人全部进行了隐藏。

（2）随机出现

下面的问题成了重点，我们如何让小黄人“随机”出现呢？并且不会让它两次连续重复出现呢？要做到随机性那我们就需要对小黄人进行控制，要控制就需要对16个小黄人进行编号，这样我们就可以用编号唯一确定每一个小黄人了。首先我们要做的就是生成这16个编号，在别的一些语言中有range()这个函数可以用以生成从几到几的一个范围，而JS并没有这样的一个已经封装好的函数，于是我们需要自己去定义这样的一个函数。

现在我们对这个函数进行解释：需要传入两个参数:m和n，分别代表起始和结束。然后我们定义了一个空的数组，再利用for()循环将每一个数字通过push()这个函数，通过“进栈”的方式将每一个数字“压”入我们已经定义好的空数组中，最后将此数组返回。

有了这个函数以后，我们就可以进行下一步，就是实现小黄人的随机出现。我们想一下，这个游戏是不是每次随机出现几个小黄人的？并不是每次只出现一个的。其次，出现的小黄人是不是在一两秒之后自动消失的？这个时候我们就想到了利用定时器实现小黄人的自动出现并且自动消失。下面我们就进行代码实现。

//定时器
var time=setInterval(function(){

	}，1000）

这就是一个定时器的模型，我们已经定义了每1秒的执行一次（1000代表的意思是1000毫秒，即1秒钟）。中间函数写什么内容呢？

首先我们要定义每次随机出现的小黄人的数量。这里我们定义为1~4个。生成随机数的函数在JS中是有的，random()函数用于生成0-1之间的一个随机数，但我们要的是每次随机出现1-4，并且是整数。接下来我们用代码解决这个问题。

//生成随机数1-4
var num = Math.ceil(Math.random()*4);

我们对random()函数生成的0-1乘以4，使其范围为0-4，之后我们用ceil()函数对0-4进行向上取整，使其值为1-4之间的随机整数。

此时我们在利用上面定义好的range()函数，生成0-15的数字范围。这是16个小黄人的编号。

var arr2=range(0,15);

要让1-4个小黄人随机出现，我们需要对其进行循环，而且循环的次数要看随机生成的数是多少，而不能够写成一个固定的数值，于是：

for(var i=0;i<num;i++){

	}

这样我们就使for()循环的次数为每次小黄人随机出现的个数了。

接下来我们需要设定每个小黄人出现后，不会连续出现。这里我们就需要将其进行“删除”，这样就不会使其两次连续出现了。

var randNum = Math.floor(Math.random()*arr2.length);
					var mouse=$('img').eq(arr2.splice(randNum,1));

这两行代码的意思是：生成0-15范围内的一个整数（即为此次随机出现的小黄人），并且将每次出现的小黄人的编号从数组中返回（接下来使用）并且删除（确保不会两次连续出现）。

其中floor()函数表示向下取整，splice()函数用于将randNum数组中的一个数字进行剔除并返回该值。eq()用于获取该编号，$('img').eq()用于找到对应的这张图片（小黄人）。

得到随机生成的这个小黄人的编号后，就要判断该小黄人的状态。

			if(obj.is(":hidden")) {
					obj.fadeIn(100,function () {
						$(this).delay(2000).fadeOut();
					})					
				}
				

如果该小黄人此时是隐藏，则利用fadeIn()函数使其出现，并利用$(this).delay(2000).fadeOut()使其在2秒钟后自动消失。

此时for()循环完整的代码为：

此时我们一下效果：

可以看出，小黄人随机出现的效果已经出现了。为了方便大家理解，笔者将上面完整的代码加上详细的注释展示给大家。

下面是不加注释的代码：

4、倒计时效果实现

接下来我们进行倒计时效果的实现。原理是将div中的值利用JS进行获取并按照一秒钟减1的效果改变。

首先我们来创建一个DIV：

	<div class="second">
		剩余时间：<span>10</span>秒
	</div>

对应的样式为：

.second{
	position: absolute;
	top:20px;
	left:20px;
	font-size:28px;
}

此时在浏览器中的显示效果为：

我们看到此时的倒计时不会进行“倒计时”的动态效果。为了解决这一问题，我们同样使用计时器，我们先自行定义一个变量，然后使其每秒钟减1，再将该变量的值替换为标签中的值。代码如下：

此时在浏览器中的显示效果为：

可以看到，剩余时间开始变动，但是会一直减为负值。这不是希望我们所看到的，我们所希望的是倒计时为0之后停止。因此我们加入if对其值进行判断。

			if(second >=0){
					$(".second span").html(second);
				}else{
					clearInterval(time);
				}

发现倒计时为0后不再变动，但是小黄人还在不断出现，我们需要的结果是倒计时结束后，小黄人也停止出现，并且鼠洞也消失，整个屏幕保留倒计时跟得分，只显示“游戏结束”。为了实现这一效果，我们只需要加1行代码即可。

$('.area').html('<h1>游戏结束!</h1>');

来看一下此时的效果：

可以看到倒计时为0时，倒计时不再变动，同时小黄人及鼠洞全部消失，只消失一个“游戏结束”的提醒。但一般游戏结束的提醒出现在屏幕的中央，因此我们还需要对它的样式进行调整。

.area h1 {
	width: 800px;
	text-align: center;
	margin-top:300px;
	font-family:楷体;
	font-size:80px;
}

来看一下加入样式后的效果：

可以看到加入样式后，最终“游戏结束”提示出现在屏幕的正中央。

下面我们给出倒计时结束及游戏结束提示的整个代码：

5、分数增加
打地鼠游戏中最重要的是我们要“打地鼠”，并且打中后“得分”，因此分数的增加特效也是不可少的。那么如何判断打中呢？这里我们要用到JS中的onclick()事件，“打中”后分数增加1分。

同样，我们首先需要为“分数”创建一个DIV：

<div class="second">
		剩余时间：<span>10</span>秒
	</div>

并加入相应的 样式：

.score{
	position:absolute;
	top:70px;
	left:20px;
	font-size: 28px;
}

此时在浏览器中打开index.html显示效果为：

可以看到“分数”正常显示，但是不会有任何“增加分数”的特效。

我们给小黄人（图片）绑定onclick()事件（利用jQuery为click()事件），但我们用鼠标击中（点中）小黄人时，分数增加。下面是具体的代码实现。

		//得分计数
		$('.hole img').click(function(){
			var score = parseInt($('.score span').html())+1;
			$('.score span').html(score);
		})

接下来我们看一下效果：

可以看到当我们点中小黄人时分数增加了。但是存在一个问题：我们一开始设置的时候是小黄人出现以后是2秒钟自动消失，现在仍未改变，我们击中后小黄人还是按照原来的方式在2秒钟之后消失的，而我们需要的是击中后小黄人立即消失。所以，这里我们要进行一些改变。

实现点中后小黄人立即消失的效果，只需要加入一行代码：

$(this).hide();

我们来看一下效果：

可以看到，击中后，小黄人立即消失了。

下面将“得分增加”的代码全部展示出来：

到这里，我们主体的功能就已经全部实现了。为了便于大家学习，笔者将以上全部代码完整的全部展现出来：


下面是相应的CSS样式：

到这里打地鼠游戏主体的功能就已经全部实现了，但是还有一些问题：比如现在是用鼠标点击，怎么样实现“锤子”打击呢？还有，一开始游戏前的选择界面该如何实现呢？游戏的音乐又该如何添加跟控制呢？以上这些，笔者将在后面全部进行实现。

这里是下一节的地址链接：

JS实现“打地鼠”游戏开发（3）——锤子的显示及游戏音效的添加（基于H5+CSS3+JS+jQuery实现）
https://blog.csdn.net/qq_32925031/article/details/88655287