HTML+js实现简单的打地鼠小游戏

最新推荐文章于 2024-06-10 09:58:41 发布

千年-today

最新推荐文章于 2024-06-10 09:58:41 发布

阅读量5.9k

点赞数 12

文章标签：打地鼠 HTML JavaScript

本文链接：https://blog.csdn.net/qq_36336898/article/details/86089075

版权

首先是内容和样式
这里是建立了3*3的方格
statu属性用于记录是否砸中了地鼠

	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.main{
			width: 300px;
			height: 300px;
			margin:100px auto;
		}
		tr{
			height: 100px;
		}
		td{
			width: 100px;
		}
		
	</style>
	<body>
		<div class="main">
		<form>
			<div class="curResult">
				<input type="text" id="time" value="剩余时间"/>
				<input type="text" id="put" value="打到0个"/>
			</div>
			<div>
			<table frame="box" rules="all">
				<tr>
					<td id="0" onclick="onClick(this)" state="no"></td>
					<td id="1" onclick="onClick(this)" state="no"></td>
					<td id="2" onclick="onClick(this)" state="no"></td>
				</tr>
				<tr>
					<td id="3" onclick="onClick(this)" state="no"></td>
					<td id="4" onclick="onClick(this)" state="no"></td>
					<td id="5" onclick="onClick(this)" state="no"></td>
				</tr>
				<tr>
					<td id="6" onclick="onClick(this)" state="no"></td>
					<td id="7" onclick="onClick(this)" state="no"></td>
					<td id="8" onclick="onClick(this)" state="no"></td>
				</tr>
			</table>
		 </div>
		 <input type="button" onclick="start()" value="开始"/>
		</form>
		<div/>
	</body>

然后是script

<script>
		
		var curCount;
		var ranCount;
		var curTotal=0;
		var Count = document.getElementsByTagName("td");
		var time = 10;  //初始时间为10
        var overRandom;
        var overClear;
		var overSub;
		
		function randomCount(){
			var ran = Math.random()*9|0;//随机一个1到9的数
			curCount = document.getElementById(ran);
			curCount.style.backgroundImage="url(img/1.jpg)"; //背景图片为地鼠出现
			curCount.style.backgroundSize="cover";
			curCount.state="yes";                            
			ranCount=ran;
		}
		//清空9个方格
		function clear(){
			for(var i=0;i<9;i++){
		       var forCount = document.getElementById(i);
			   forCount.style.backgroundImage="url(img/0.jpg)";
			   forCount.style.backgroundSize="cover";
			   forCount.state="no";
			}
		}
		//点击砸中地鼠
		function onClick(v){
			
		    if(v.state=="yes"){
			v.style.backgroundImage="url(img/2.jpg)";
			v.style.backgroundSize="cover";
			curTotal++;
			document.getElementById("put").value="打到"+curTotal+"个";
		    }
		    
		}
		//时间减少
		function timeSub(){
			time--;
		    document.getElementById("time").value="剩余时间"+time+"s";
		    if(time<=0){
		    	window.clearInterval(overRandom);
		    	window.clearInterval(overClear);
		    	window.clearInterval(overSub);
		    	clear();
		    	alert("游戏结束，你打到了"+curTotal+"个");
		    }
		}
		//用定时器周期生成和清空地鼠
		function start(){
		 time=10;
		 curTotal=0;
		 overRandom = window.setInterval("randomCount()",600);
		 overClear = window.setInterval("clear()",2100);
		 overSub = window.setInterval("timeSub()",1000);
		}
	</script>

效果演示
在这里插入图片描述

千年-today

关注

12
点赞
踩
37

收藏

觉得还不错? 一键收藏
1
评论
HTML+js实现简单的打地鼠小游戏

首先是内容和样式这里是建立了3*3的方格statu属性用于记录是否砸中了地鼠 &lt;style type="text/css"&gt; *{ margin: 0; padding: 0; } .main{ width: 300px; height: 300px; margin:100px auto; } tr{ height: 100...
复制链接

扫一扫