打地鼠小游戏（HTML5+CSS+JS）

打地鼠小游戏（HTML5+CSS+JS）

预设有两个文件（htlm和css）加一个文件夹(放图片)

html文件就是编写这个游戏界面，css文件放置其表现的形式

专门建立一个文件夹，放置背景图，老鼠，洞的图片

下图为我所设置的基本内容：

设置基本界面

（1）背景图

在index.css文件先设置主要游戏界面大小800px * 500px（放置16个洞）

*{
	magin:0px;
	padding: 0px;
}
.area{
	width: 800px;
	height: 500px;
	/* border: 1px solid red; */
	margin: 0px auto;
}
body{
	background-image: url(./image/background.png);
}

（2）开始按钮

<button class='box' id='tel_btn' >
    开始游戏
</button>

功能：按下触发事件，开启游戏

.css文件 --按钮呈现形式

.box{
	position: absolute;
	bottom: 10px;
	left: 640px;
	width: 250px;
	height: 60px;
	font-size: 40px;
	font-family: "arial black";
	background-color: #ecaf;
}

（3）放置16个洞 老鼠随机出现

这里利用jQuery，首先介绍一下如何引入这个库，（本次没有将其下载到本地，而引用微软的在线的地址）

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

var hole = "<div class='hole'><img src='./image/mole.svg' alt='' /></div>"
				//利用循环将16个洞添加到游戏主区域中
				var holenum = 16;
				for(var i=0;i<holenum;i++){
					$(".area").append(hole);
				}
				function range(m,n){
					var arr=[];
					for(var j = m;j<=n;j++){
						arr.push(j);
					}
					return arr;
				}
				var time = setInterval(function(){
					//每次随机出现1-4只小鼠
					var num = Math.ceil(Math.random()*4);
					var arr2 = range(0,15);
					for(var i=0;i<num;i++){
						//在0-15的范围内生成一个随机数字
						var randNum = Math.floor(Math.random()*arr2.length);
						//将每次出现的小老鼠的编号取出使用eq()，并且删除（防止重复出现）
						var mouse = $('img').eq(arr2.splice(randNum,1));
						//获取小老鼠的编号后判断它的状态
						//：hidden ------> 匹配所有的不可见元素
						if(mouse.is(":hidden")){
							//淡入淡出，淡入，speed为100毫秒，监听器调用回调函数淡出
							mouse.fadeIn(100,function(){
								//2秒后消失
								$(this).delay(2000).fadeOut();
							})
						}
					}
				},1000)

在为了让洞排列整齐，这里我们配置.css文件时，将洞设置为相对的位置

.hole{
	width: 180px;
	height: 130px;
	margin-top: 30px;
	margin-right: 20px;
	float:left;
	border-radius: 50%;
	background-image: url(image/dirt.svg);
	object-fit: cover;
	position: relative;
}
.hole img{
	display: none;//先隐藏地鼠
	position: absolute;
	width:150px; height:150px;
	width="100%" height="100%"
}

.css文件设置

.hole img{
	display: none;//先隐藏地鼠
	position: absolute;
	width:150px; height:150px;
	width="100%" height="100%"
}

设置倒计时功能

（1）设置游戏时长变量second为10s，利用函数setInterval() 方法会不停地调用函数使得second自减一，直到为0，将上一次的调用setInterval() 传回来的time直送入clearInterval() 函数关闭游戏

（2）借鉴发送验证短信，按下开始游戏按钮，该按钮就失效，并显示剩下几秒生效

var second = 10;
var time2 = setInterval(function(){
second--;
if(second>=0){
	$(".second span").html(second);
	$('#tel_btn').addClass("disabled");
	$('#tel_btn').attr("disabled", true);
	$('#tel_btn').html("重新游戏(" + second + ")");
else{
	clearInterval(time);				
	$('.area').html('<h1>游戏结束!</h1>');
	$('#tel_btn').attr("disabled", false);
	$('#tel_btn').html("重新游戏");
	}
},1000)

打老鼠------计分设置

$('.hole img').click(function(){
	$(this).hide();
	var score = parseInt($('.score span').html())+1;
	$('.score span').html(score);
});	

先设置点击前隐藏老鼠，每点击一次就记1分

.css文件 设置秒钟和分数字体和位置

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

最终效果图

目前没有解决的问题

没法按下重新游戏，再次运行游戏

详细见GitHub