这是一个小小的打地鼠游戏,里面有详细的步骤(在参考了一些资料的情况下,写的代码)

本文链接：https://blog.csdn.net/qq_39689605/article/details/78035496
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>疯狂的打地鼠</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		
		.map{
			width: 400px;
			height: 410px;
			margin: 0 auto;
			margin-top: 30px;
			background-color: rgb(146,197,0);
			
		}
		h1{
			color: red;
			text-align: center;
		}
		img{
			margin-top: 31px;
			width: 100px;
			height: 100px;
		}
		#Score{
			width: 200px;
			height: 100px;
			background-color: gray;
			float: right;
			margin-top: -450px;
			margin-right: 150px;
			color: red;
			font-size: 20px;
			line-height: 100px;
			text-align: center;
		}
		
	 table td{
	  	 width: 200px;
	 	 height: 100px;
		 }
		#colok{
			width: 200px;
			height: 100px;
			background-color: blue;
			float: right;
			margin-top: -400px;
			margin-right: 150px;
			text-align: center;
			color: white;
			font-size: 20px;
			line-height: 100px;
		}
		#counts{
			width: 400px;
			height: 30px;
			background-color: gray;
	
			margin-top: 10px;
			margin-left: 33%;
			text-align: center;
			color: red;
			font-size: 20px;
		}
		#Pause{
		margin-left: 40%;
	  border: 1px solid skyblue;
	  color: white;
	  background: skyblue;
	  width: 50px;
	  height: 30px;
	  margin-bottom: 10px;
	  border-radius: 5px;
		}
		#Start,#Refresh,#Speed{
	  border: 1px solid skyblue;
	  background: skyblue;
	  color: white;
	  width: 55px;
	  height: 30px;
	  border-radius: 5px;
	  margin-left: 10px;
	}
	#cover{
	  margin-top: 0px;
	 position: absolute;
	 z-index: 2;
	 width: 800px;
	 height: 600px;
	 top: 0px; 
	 left: 0px; 
	 right: 0px; 
	 bottom: 0px; 
	 margin: auto; 
	 background :rgba(128,128,128,0.5);
	 color: red;
	 font-size: 30px;
	 text-align: center;
	 vertical-align: middle;

	 }
	</style>
</head>
<body>
	<div class="main">
		<h1>打地鼠</h1>
		<!-- 地图块 -->
		<div class="map">
		<table>

	<tr>
		<!-- 坑的图片 -->
		<td><img src="img/3.png"></td>
		<td><img src="img/3.png"></td>
		<td><img src="img/3.png"></td>
	</tr>
	<tr>
		<td><img src="img/3.png"></td>
		<td><img src="img/3.png"></td>
		<td><img src="img/3.png"></td>
	</tr>
	<tr>
		<td><img src="img/3.png"></td>
		<td><img src="img/3.png"></td>
		<td><img src="img/3.png"></td>
	</tr>
	</table>
	<!-- 记录成绩的块 -->
	</div>
	<div id="Score">最佳记录:<span id="score">0</span>分</div>
	<div id="counts">当前得分:<span id="nowScore">0</span>分</div>
	<div id="colok"></div>
	</div>
	<!-- 暂停按钮 -->
	<input type="button" name="name" value="Pause" id="Pause">
	<!-- 开始按钮 -->
	<input type="button" name="name" value="Start" id="Start">	
	<!-- 刷新按钮 -->
	<input type="button" name="name" value="Refresh" id="Refresh">
	<!-- 调节难度的按钮-->
	<select id="Speed">
		<option>普通型</option>
		<option>一般型</option>
		<option>困难型</option>
	</select>		
	<div id="cover" style="display: none;"><span id="text"></span></div>
</body>
	<script type="text/javascript">
	//获取元素	
	var imgs = document.getElementsByTagName('img');
	//设置随机数
	var rank;
	//获取计算分数的 span
	var sscore = document.getElementById('score');
	var newScore = document.getElementById('nowScore');
	//定义变量记录分数
	var count = 0;
	// 定义记录最佳成绩的变量
	var preScore = 0;
	//localStorage.getItem(key):获取指定key本地存储的值
	preScore = localStorage.getItem("bestScore");
	//获取时间
	var times =document.getElementById('colok');
	//获取最后的结果 div
	var cover = document.getElementById('cover');
	// 最后的输出的文字
	var text = document.getElementById('text');
	//显示最佳成绩
	sscore.innerHTML = preScore;

	//定义变量控制游戏的进行
	var play = true;

	//定义变量控制速度
	var sspeed = 1000;
	//设置自调函数
	//通过 play 和 时间来控制游戏的进程
	if (play) {
		setTimeout('chulai()',1000);
	}else{
		alert('11')
	}
	//为了能够开始
	function mov(){
		setTimeout('paole()',sspeed);
	}	
	

	//设置出来的函数
	function chulai(){
		//设置开始/暂停和结束循环
		if (play&&seconds>0) {
			rank = Math.floor(Math.random()*9);
			// 冒出来的图片
			imgs[rank].src='img/2.png';
			imgs[rank].style.marginTop="0px";
			// 建立点击事件
			imgs[rank].setAttribute('onclick','die()');
			mov();
		}
		
	}

	//设置跑了的函数
	function paole(){
		//设置开始/暂停和结束循环
		if (play&&seconds>0) {
			// 坑的图片
			imgs[rank].src='img/3.png';
			imgs[rank].style.marginTop='31px';
			//移除点击
			imgs[rank].removeAttribute('onclick');
			setTimeout('chulai()',sspeed);
		}
		
	}
	//设置被打中的函数
	function die(){
		// 被打中的图片
		imgs[rank].src='img/6.png';
		imgs[rank].style.marginTop='3px';
		imgs[rank].removeAttribute('onclick');
		// 记录分数
		count++;
		newScore.innerHTML=count;
		// 分数和最佳成绩比较
		if (count>preScore) {
			sscore.innerHTML=count;
			preScore=count;
		}
		//给本地保存最佳成绩
		localStorage.setAttribute('bestScore',preScore);
	}

	//创建时间控制游戏进度

	var seconds = 60;
	var speed = 1000;
	// 时间的方法
	function creatTime(seconds,speed){
		//判断时间是不是小于10
		var txt = '剩余时间: '+((seconds>10)?seconds:'0'+seconds)+'秒';
		// 将时间显示在页面上
		times.innerHTML = txt;
		// 按钮控制的逻辑
		if (play) {
			var timeId = setTimeout("creatTime(seconds--,speed)",speed);
		}else{
			clearTimeout(timeId);
		}
		// 如果时间结束的成绩判断
		if (seconds==0) {
			// 清除延时
			clearTimeout(timeId);
			//localStorage.setItem(key,value)：将value存储到key字段
			localStorage.setItem("bestScore",preScore);
			// 显示隐藏的结果块
			if(cover.style.display=='none'){
				cover.style.display='block';
				//如果没有成绩 输出的结果
				if(count==undefined){
					text.innerHTML = "当前成绩为："+0+"分"+"<br/>"+"游戏结束！";
					//localStorage.getItem(key):获取指定key本地存储的值
					//如果有超过原来的最佳成绩
				}else if(count==localStorage.getItem("bestScore")){
					text.innerHTML = " 恭喜你打破记录,当前成绩为："+count+"分"+"<br/>"+"游戏结束！";
					//最后的结果
				}else{
					text.innerHTML = "当前成绩为："+count+"分"+"<br/>"+"游戏结束！";
				}
			}
		}
	}
	//调用方案
	creatTime(seconds,speed);

	//获取按钮
	var pause = document.getElementById('Pause');
	var start = document .getElementById('Start');
	var refresh = document.getElementById('Refresh');
	var dl = document.getElementById('Speed');

	//创建按键
	pause.onclick = function(){
		play =false;

	}

	start.onclick = function(){
		play=true;
		mov();
		//建立延时
		timeId = setTimeout("creatTime(seconds--,speed)",speed);
	}

	refresh.onclick = function(){
		window.location.reload();
	}

	dl.onclick = function(){
		//通过改变速度来改变难度
		if (dl.value=='普通型') {
				sspeed = 700;
			}else if (dl.value=='一般型') {
				sspeed=600;
			}else {
				sspeed = 480;
			}
	}


</script>

</html>