打地鼠小游戏

雯靑爭

已于 2024-06-14 09:16:21 修改

阅读量78

点赞数

文章标签： css 前端 jquery

于 2022-12-06 17:38:19 首次发布

本文链接：https://blog.csdn.net/weixin_52421124/article/details/128206047

版权

打地鼠

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
	<style>
    	#d1{ border:1px solid #000; width:600px; height:600px; margin:0 auto; position:relative;}
		<!--margin:0 auto;让子元素在父元素内左右居中.“position: relative”是设置定位类型为相对定位，它可以配合“top”、“bottom”、“left”、“right”这4个偏移量来实现相对它所属父元素的相对定位。-->
		#d2{width:150px;height:25px;font-size:20px;text-align:center; background:#A69E9E;margin:0 auto; }
		#d3{width:200px;height:50px;font-size:25px;text-align:center;cursor:pointer;margin:0 auto; }
		<!--cursor:pointer;鼠标移动到此时变成小手-->
    </style>
<body>
<div id="d1"></div><br>
<center>
<input id="d2" type="text" readonly value="0"><br><br>
<!--用于计算打地鼠所得分数-->
<input id="d3" type="button" value="开始">
</center>>
<script>
	d1=document.getElementById("d1");
	d2=document.getElementById("d2");
	d3=document.getElementById("d3");
	d3.onclick=function(){
		on_();
	}
	function rnd_(x1,x2){
		return x1+Math.round(Math.random()*(x2-x1));
		}
		//x1加上差距的百分比正好在x1到x2之间
	function color_(){
		//a="0 1 2 3 4 5 6 7 8 9 a b c d e f".split(" ");
		//return "#"+a[rnd_(0,15)]+a[rnd_(0,15)]+a[rnd_(0,15)]+a[rnd_(0,15)]+a[rnd_(0,15)]+a[rnd_(0,15)];采用在“0 1 2 3 4 5 6 7 8 9 a b c d e f”这16个数中随机抽取颜色法
		return"#"+Math.floor(Math.random()*16777215).toString(16); 
		//随机颜色，将其的最大值ffffff先转换为10进制，进行random后再转换回16进制。
	}
		function on_(){
			if(typeof(t)=="undefined"){
				t=setInterval(run_,200);
				//间隔时间
			}
		}
		function off_(){
			clearInterval(t);delete t;
			alert("您的得分为"+d2.value+"。");
			window.location.reload();
			//当时间停止时弹窗弹出最终得分
		}
		function run_(){
			o=document.createElement("img");
			o.src="mouse.png";
			//对于对象o设置为图片
			o.style="width:50px;height:50px;position:absolute;left:"+rnd_(10,540)+"px;top:"+rnd_(10,540)+"px;background:"+color_()+";";
		//图片的长和宽都为50px，为防止图片超出游戏区域，据侧方10px，总活动区域为（600-（50+10）），上下方同理，并加上背景颜色
			o.onmouseover=function(){
				this.remove();
				d2.value++;//分数依次递进加一
			}
			d1.appendChild(o);//将对象o插入到d1当中
			a=d1.getElementsByTagName("img");
			if(a.length>9){
			//长度规定为9，及当有9个地鼠没有打时，则停止计时并计算分数
				off_();
			}

		}
        </script>
</body>
</html>