master

分支 (1)

管理

管理

master

zhangyifang
/
index.html

!<!DOCTYPE html>
<html>
<head>
	<title>打地鼠</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
	<div class="total">
	<img src="./images/mouse.png">
	<img src="./images/mouse.png">
	<img src="./images/mouse.png">
	<img src="./images/mouse.png">
	<img src="./images/mouse.png">
	<img src="./images/mouse.png">
	<img src="./images/mouse.png">
	<img src="./images/mouse.png">
	<img src="./images/mouse.png">

		<span class="timer">剩余时间：<span class="miao">10</span>秒</span>
		<span class="score">当前得分：<span class="fs">0</span> 分</span>
		<button class="start_game">开始游戏</button>
	</div>

</body>

<script>
	var time = 10;
	var score = 0;
	var btn_start_game = document.getElementsByClassName("start_game")[0];
	var fs = document.getElementsByClassName("fs")[0];
	var miao = document.getElementsByClassName("miao")[0];
	var mouse_shu = document.getElementsByTagName("img");
	var cd = mouse_shu.length;
	console.log(Math.floor(Math.random() * cd ));
	btn_start_game.onclick=function(){
		this.style.visibility='hidden';
		var timer = setInterval(function(){
			var shu = Math.floor(Math.random() * cd);
			mouse_shu[shu].style.visibility="visible";
			var canclick = true;
			mouse_shu[shu].onclick=function(){
				this.src="./images/mouse2.png"
				if(canclick){
					fs.innerText = ++score;
				}
				canclick = false;
			}
			setTimeout(function(){
				for (var i = 0; i < cd; i++) {
				    mouse_shu[i].src="./images/mouse.png"
					mouse_shu[i].style.visibility="hidden";
				}
			},800);
		},1600);
		var timer2 = setInterval(function(){
			// console.log(time--);
			miao.innerText = time--;
			if(time<0){
				clearInterval(timer);
				clearInterval(timer2);
				btn_start_game.style.visibility='visible';
				time=10;
				miao.innerText = time;
				fs.innerText = 0;
				btn_start_game.innerText = "重新开始游戏"
			}

		},800)
	}
</script>

</html>