JavaScript游戏:实现打地鼠

本博客介绍了一个基于HTML、CSS和JavaScript实现的互动式网页游戏——打地鼠。游戏通过动态更新图片源来模拟地鼠出现,玩家点击出现的地鼠可以得分,点击错误则游戏结束。游戏页面背景为棕色,游戏区域为黑色方框,包含9个可点击的区域。通过定时器每500毫秒随机更新地鼠位置,玩家需快速反应以获取高分。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果图显示

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			body{
				background: brown;				
			}			
			#box{
				width: 620px;
				height: 620px;
				border: 2px solid white;
				background: black;
				margin: 150px 150px;
				cursor: pointer;
			}		
			#box>img{
				width: 200px;
				height: 200px;	
				border: 1px solid white;			
			}
			p{
				width: 200px;
				height: 40px;
				border: 2px solid white;
				background: blanchedalmond;
/*				margin: auto 150px;*/
				line-height: 40px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<br />
		<br />
		<br />
		<p id="fs">得分:</p>
		<div id="box">												
			<img src="../img/timg.jpg"/>
			<img src="../img/timg.jpg"/>
			<img src="../img/timg.jpg"/>
			<img src="../img/timg.jpg"/>
			<img src="../img/timg.jpg"/>
			<img src="../img/timg.jpg"/>
			<img src="../img/timg.jpg"/>
			<img src="../img/timg.jpg"/>
			<img src="../img/timg.jpg"/>										
		</div>		
	</body>
	<script type="text/javascript">
		var grade=0;
		var box=document.getElementById('box');
		var imgs=document.getElementById('box').children;
		var df=document.getElementById('fs');//分数盒子
			
		setInterval(()=>{
			var x=Math.round(Math.random()*8);
			imgs[x].src='../img/mouse.jpg';
			
			var x=Math.round(Math.random()*8);//
			imgs[x].src='../img/timg.jpg';
			
		},500);
		
		for(var i=0;i<imgs.length;i++){
			imgs[i].onclick=function(){
				var src=this.src;
				console.log(src.charAt(src.length-5)=='e');
				if(src.charAt(src.length-5)=='e'){
					grade=grade+2;
					df.innerText='得分:'+grade;
					this.src='../img/timg.jpg';
				}else{
					setTimeout(()=>{
					location.reload();
					},5000)
				}			
			}
		}
	</script>
</html>

源码下载:https://github.com/YanHSana/killmouse

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值