究极简单版打地鼠游戏-JQ实现

最新推荐文章于 2021-11-17 09:47:10 发布

GYS_98

最新推荐文章于 2021-11-17 09:47:10 发布

阅读量500

点赞数 1

文章标签： javascript html5 jquery

本文链接：https://blog.csdn.net/qq_39117154/article/details/106167790

版权

简化版打地鼠游戏-JQ实现

其实就是打黑块。
有倒计时和计分功能。

<!DOCTYPE html>
<html>
<head>
	<title>打黑块</title>
	<meta charset="UTF-8">
	<style type="text/css" media="screen">
		.main{			 
			margin:20px auto ;
			width: 320px;
			
		}
		.main-foot{			 
			margin:20px auto ;
			width: 320px;
			height: 320px;
			background: #757575;
		}
		.ds{
			margin-left: 5px;
			margin-top: 5px;
			width: 100px;
			height: 100px;
			background: white;
			float: left;
		}
		.ds:hover{
			background:#D3D3D3; 
		}
		.black{
			background:#C0C0C0;
		}
	</style>
</head>

<script src="./JQ/jquery-3.2.1.js"></script>
<body>

	<div id="main" class="main">		
		<font>分数：</font><font id="fraction"></font>
		<br>
		<font>倒计时：</font> <span id="second_show"></span>
		<br>
		<br>
		<button id="start">开始</button>
		<br>
		<div id="main-foot" class="main-foot">
			<div class="ds" id="ds_1"></div>
			<div class="ds" id="ds_2"></div>
			<div class="ds" id="ds_3"></div>
			<div class="ds" id="ds_4"></div>
			<div class="ds" id="ds_5"></div>
			<div class="ds" id="ds_6"></div>
			<div class="ds" id="ds_7"></div>
			<div class="ds" id="ds_8"></div>
			<div class="ds" id="ds_9"></div>
		</div>	
	</div>

	<script type="text/javascript">
		var flag=0;//标记游戏是否已经开始,0未开始
 		var fraction=0;//分数

		$("#start").click(function(){	//倒计时函数
			if(flag==1){
				alert('游戏已经开始');
			}else{
				flag=1;
				var intDiff = parseInt(30);//倒计时总秒数量
				var timeID;			
			　　timeID = window.setInterval(function(){//开始计时器
			　　　　var second=0;//时间默认值
			　　　　if(intDiff > 0){					   
			　　　　　　second = Math.floor(intDiff);
					   //每秒生成随机黑块							
					    $("[id^='ds_']").removeClass('black');
					    var rand = parseInt(Math.random() * 9 + 1);  //生成随机数1-9
					    //console.log(rand);
					    var div_id="ds_"+rand;
					    $('#'+div_id).addClass("black");	
			　　　　}else{
					   //游戏结束
					   flag=0;  //倒计时结束，标识符变为0
					   fraction=0; //总分归零
			　　　　　　window.clearInterval(timeID);//停止计时器
			　　　　}
			　　　　$('#second_show').html('<s></s>'+second+'秒');
			　　　　intDiff--;
			　　}, 1000);
			}
		});	

		$("div[id^='ds_']").on('click', function(e) {                
		  if ($(this).hasClass("black")) {
				$(this).removeClass("black")
				fraction++;
				$('#fraction').text(fraction);
		   } 
		});
	</script>
</body>
</html>