简化版打地鼠

最新推荐文章于 2024-08-22 14:32:34 发布

向全栈冲

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量69

点赞数

分类专栏：小玩意文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47917392/article/details/118241764

版权

小玩意专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		body{
			background-color: black;
		}
	</style>
	<body>
		<button onclick="start1()">
			游戏开始
		</button>
		<button id="nn" >
			
		</button>
		<button id="grade">
			
		</button>
	</body>
	<script type="text/javascript">
		var n=0;//代表随即方块的数量
		var grade=0;//分数
		var on=document.querySelector('#nn');
			on.innerHTML=n;
		var ograde=document.querySelector('#grade');
			ograde.innerHTML=grade;
			
			function start1(){
				alert('欢迎来带联盟');
			var x=0;
			var n=prompt('请选择难度（普通/困难/魔鬼）')
			if(n=='普通'){
				start(1000);
			}
			if(n=='困难'){
				start(500);
			}
			if(n=='魔鬼'){
				start(300);
			}
			}
		function start(x){
			
			var timer=null;
			
			 timer=setInterval(function(){
				var odiv=document.createElement('div');
				
				document.body.appendChild(odiv);
				odiv.style.width='30px';
				odiv.style.height='30px';
				odiv.style.backgroundColor=setColor();
				var xx=parseInt(Math.random()*(document.documentElement.clientWidth-odiv.offsetWidth));
				var yy=parseInt(Math.random()*(document.documentElement.clientHeight-odiv.offsetHeight));
				odiv.style.position="absolute";
				odiv.style.left=xx+'px';
				odiv.style.top=yy+'px';
				n++;
				odiv.onclick=function(){
					document.body.removeChild(odiv);
					n--;
					grade++;
				}
				on.innerHTML=n;
				ograde.innerHTML=grade;
				if(n>10){
					alert('gameover');
					clearInterval(timer);
				}
				},x)
		}
		function setColor(){
			var col='#'+parseInt(Math.random()*(0xffffff+1)).toString(16);
			return col;
		}
	</script>
</html>

效果图：
在这里插入图片描述

在这里插入图片描述

向全栈冲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简化版打地鼠

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{ background-color: black; } </style> <body> <button onclick="start1()
复制链接

扫一扫

专栏目录