Jquery+javaScrpt 130行代码实现打地鼠游戏

源码下载地址

（不需要积分关注我就可以下载）:打地鼠

有不懂得可以私信问我。

先上图，这是打地鼠的运行状态页面

本页面主要实现功能

1. 点击开始按钮

   ​ |-- 计时开始任务
   ​ |-- 地鼠出现任务

2. .计时任务
   减少触发间隔 数字变化更频繁
   .toFixed(2) 字符

3. 地鼠出现任务
   独立显示和隐藏
   从多个图片中 随机选出一个 显示和隐藏

4. 地鼠点击
   地鼠可以点击
   不能重复加分(用户是否点过)

5. 到时间限制 20秒(148行更改)
   打够9只（95行更改）
   点结束按钮

1.添加图片到div

   //把每张地鼠图片追加到div中并根据循环索引来添加id
				for(var i=0;i<25;i++){
					var myinner = '<div><img id="img'+i+'"  src="./img/01.jpg" /></div>';
					$("#mainpanel").append(myinner);
			}

2.点击开始触发功能模块

				//绑定开始按钮的点击事件
				$("#startBtn").click(function(){
					//关闭开始按钮防止重复点击
					$(this).prop("disabled",true);
					//初始化
					 myInit();
					//计时任务
					timetask =  setInterval("timeCount()",10);
					//地鼠出现任务
					mousetask =  setInterval(function(){
						//随机出现0-24的随机数
						var myRandom =  parseInt(Math.random()*25);
						//这段代码的意义是每当展现新图片的时候如果该图片之前被点击过就更换成没被点击照片
						$("#img"+myRandom).prop("src","img/01.jpg");
						//展示随机生成的照片
						$("#img"+myRandom).show();
					setInterval(function(){
							//地鼠消失
							$("#img"+myRandom).hide();
							},2000);					
					},600);
				})

//当点击结束后实行初始化函数
			function myInit(){
				//初始化分数
				$("#showSourcespan").html(0);
				//初始化秒数
				$("#showTimespan").html(0);
				//隐藏结束标签
				$("#gameoverDiv").hide();				
			}			

3.计时功能模块

function timeCount(){
				//每次取出来的是字符串所以用parseFloat来转换成float类型的数值型
				var nowTmie = parseFloat($("#showTimespan").html());
				//游戏规则定时结束当游戏进行到20秒的时候结束游戏
				if(nowTmie>=20){
					//调取结束函数
					myStop();
					return;
				}
				//每次取出加0.01
				nowTmie = nowTmie+0.01;
				//重新赋值给时间标签并且只保留两位小数
				$("#showTimespan").	html(nowTmie.toFixed(2));	
			}	  

4.点击事件，打地鼠功能实现模块

				//绑定点击事件,每个格子中的相片
				$("#mainpanel>div>img").click(function(){
					console.log($(this).prop("src"));
					//当点击的时候判断点击的图片是否为初始图片如果不是就不加分
					//此功能是为了防止多次在一个图片上累计加分
					//如果为初始图片那么这个判断返回的值一定是一个索引值而且大于等于0
					if($(this).prop("src").indexOf("img/01.jpg")>=0){						
						//点击图片改变了实现加分功能
						//获取当前分数，将字符串变成int类型
						var score =  parseInt($("#showSourcespan").html());
						//每次点击实现分数＋1
						//把加后的分数放进展示分数的span
						$("#showSourcespan").html(++score);
						//游戏结束条件当得分大于等于10次的时候游戏停止调取停止函数
						if(score>=10){
							//重新赋值提示框文字为通关
							$("#gameoverDiv").html("好棒棒！");
							myStop();
							//结束进程
							return;
						}
					}
					//改变当前点击照片的属性，当照片被点击更换照片
					$(this).prop("src","img/02.jpg");
				})

5.结束功能实现

//绑定结束按钮调用停止函数
				$("#stopBtn").click(function(){
					//开启结束按钮
					$("#startBtn").prop("disabled",false)
					//调用停止
					myStop();
				})
				
			})
			function myStop(){
				//停止计时器定时任务
				clearInterval(timetask);
				//停止老鼠随机暂时任务
				clearInterval(mousetask);
				//隐藏所有显示的老鼠照片
				$("#mainpanel>div>img").hide(300);
				$("#gameoverDiv").show(200);		
			}