网页版别踩白块

最新推荐文章于 2021-06-02 17:59:44 发布
yueloveme
最新推荐文章于 2021-06-02 17:59:44 发布
阅读量1k
点赞数
分类专栏： JAVA
本文链接：https://blog.csdn.net/yueloveme/article/details/77528512
版权
JAVA 专栏收录该内容
110 篇文章 0 订阅
订阅专栏
给大家推荐个靠谱的公众号程序员探索之路，大家一起加油
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>别踩白块</title>
		<style>
			#games{
				position:absolute;
				top:100px;
				left:400px;
			}
			#ss{
				position: absolute;
				top: 0px;
				left: 50px;
			}
			#socre{
				position: absolute;
				top: 50px;
				left: 50px;
				width: 100px;
				height: 100px;
				border-radius: 1px;
				border-style: solid;
				border-width: 1px;
				border-color: #00FFFF;
			}
			#start{
				position: absolute;
				top: 500px;
				left: 400px;
			}
			#stop{
				position: absolute;
				top: 500px;
				left: 500px;
			}
			/*
			#end{
				position: absolute;
				top: 200px;
				left: 400px;
			}*/

			#reset{
				position: absolute;
				top: 270px;
				left: 350px;
			}
			#times{
				position: absolute;
				top: 50px;
				left: 600px;
			}
		</style>
	</head>
	<body>
   <canvas id="games" onmousedown="onDown();"></canvas>
   <h3 id="ss">分数：</h3><br/>
   <div id="times"></div>
    <div id="socre">0</div>
    <input id="start" type="image"  src="img/开始.png" onclick="a()"/>
    <input id="stop" type="image"  src="img/暂停.png" onclick="b()"/>
   <!-- <input id="end" type="image" src="img/结束.png" onclick="c()"/>-->
    <input id="reset" type="button" value="重置" onclick="c()"/>
    <script type="text/javascript">
    	var w = 260;
    	var h = 400;
    	var socre = 0;
    	var starttime;
    	var endtime;
    	var allTime = 0;
    	var quicknum = 0.5;
    	function rect(arr,y){
    		//每个rect表示一行
    		//y表示  这一行的高度
    		this.y = y;
    		//arr  是数组  表示 这一行 每个 矩形的颜色
    		this.arr = arr;
    	}
    	//设置画布
    	var games = document.getElementById("games");
    	games.widht = w;
    	games.height = h;
    	var canvas = games.getContext("2d");
    	
    	//设置初始矩形
    	var rectArr = new Array();
    	function drawStartRect(){
    		for(var i = 0;i < 6;i++){
    			var arr = new Array();
    		//0表示 白色  1 表示 红色   2 表示 黑色  3表示 灰色  3以上 还是 灰色
    			for(var j = 0;j < 4;j++){
    				arr[j] = 0;
    			}
    			var num = Math.floor(Math.random()*4);
    			arr[num] = 2;
    			rectArr[i] = new rect(arr,i*100-200);
    		}
    	}
    	drawStartRect();
    	//画出具体的矩形  就是 每一行的矩形
    	function drawRect(){
    		for(var i = 0;i < rectArr.length;i++){
    			for(var j = 0;j < rectArr[i].arr.length;j++){
    				switch(rectArr[i].arr[j]){
    					//白色
    					case 0:{
    						canvas.fillStyle="#ffffff";
    						break;
    					}
    					//红色
    					case 1:{
    						canvas.fillStyle="#ff0000";
    						break;
    					}
    					//黑色
    					case 2:{
    						canvas.fillStyle="#000000";
    						break;
    					}
    					//灰色
    					case 3:{
    						canvas.fillStyle="#dddddd";
    						break;
    					}
    					//大于3同样是灰色
    					default:{
    						canvas.fillStyle="#dddddd"
    					}
    					
    				}
    				canvas.fillRect(j*(w/4),rectArr[i].y,(w/4),(h/4));
    				canvas.strokeStyle="#666666";
    				canvas.strokeRect(j*(w/4),rectArr[i].y,(w/4),(h/4));
    			}
    			
    		}
    		canvas.strokeStyle="#000000";
    		canvas.strokeRect(0,0,w,h);
    		
    	}
    	
    	//让矩形动的方法
    	function run(){
    		drawRect();
    		for(var i = 0;i < rectArr.length;i++){
    			rectArr[i].y += quicknum;
    			
    			if(rectArr[i].y > h){
    				for(var j = 0;j < rectArr[i].arr.length;j++){
    					//有黑块没点此时游戏结束
    					if(rectArr[i].arr[j] == 2){
    						isrunning = false;
    						clearInterval(running);
    						rectArr[i].arr[j] = 1;
    						print();
    						//回退
    						backing = setInterval("goback()" , 1);
    						return;
    					}
    				}
    				
    				//如果出去回收利用的方法  
    				//就是给 这 一行的 四个长方形的颜色 重新为1
    				//然后 随机 产生一位置 为 黑色
    				//最后 将这一行 放到 最上面
    				for(var j = 0;j < 4;j++){
    					rectArr[i].arr[j] = 0;
    				}
    				var num = Math.floor(Math.random()*4);
    				rectArr[i].arr[num] = 2;
    				rectArr[i].y -= (h/4) * 6;
    			}
    			endtime = new Date();
    			allTime = (endtime - starttime - stoptime)/1000;
    			document.getElementById("times").innerHTML=allTime + "秒";
    		}
    		
    	}
    	//用于结束画布的动
    	var running = null;
    	//用于第一次点击使画布动
    	var begin = true;
    	//用于判断 游戏 是否 结束  如果 结束  那么 其他的方块就不能点击了
    	var isrunning = true;
    	function onDown(event){
    		if(begin){
    			if(flagstop){
    				starttime = new Date();
    			}
    			running = setInterval("run();" , 10);
    			begin = false;
    			isrunning = true;
    		}
    		if(isrunning){
    			//获取点击时  的 x y坐标
    			event = event || window.event;
    			//var d = document.getElementById("dd");
    			//document.getElementById("socre").innerHTML=document.getElementById("games").style.left;
    			var x = event.clientX - 400;
    			var y = event.clientY - 100;
    			//每行进行判断  如果 y值在 该行的起始位置（rectArr[i].y）  与结束位置 中间（rectArr[i].y + (h/4)）
    			for(var i = 0;i<rectArr.length;i++){
    				if(rectArr[i].y < y && rectArr[i].y + (h/4) > y){
    					var num = Math.floor(x/(w/4));
    					rectArr[i].arr[num]++;
    					drawRect();
    					if(rectArr[i].arr[num] == 1){
    						print();
    						clearInterval(running);
    						isrunning = false;
    						return;
    					}else if(rectArr[i].arr[num] == 3){
    						socre++;
    						var copysocre = socre;
    						if(socre % 10 == 0 ){
    							quicknum = quicknum + 0.2;
    						}
    						document.getElementById("socre").innerHTML=socre;
    					}
    					
    				}
    			}
    		}
    		
    	}
    	//每回退一步都需要 重新把  矩形画一遍 达到更新的 效果
    	//用于记录回退的多少
    	var backnum = 0;
    	//用于结束回退
    	var backing = null;
    	function goback(){
    		if(backnum == (h/4)){
    			clearInterval(backing);
    		}
    		for(var i = 0;i < rectArr.length;i++){
    			rectArr[i].y--;
    		}
    		drawRect();
    		backnum++;
    	}
    	//按钮开始方法
    	//按钮 开始的时候  那么  第一次 点击方块的begin就需要 置为false  然后 记录时间   让画布动起来
		function a() {
			if(flagstop) {
				starttime = new Date();
			}
			running = setInterval("run();", 5);
			begin = false;
			isrunning = true;

		}//按钮暂停方法
		//如果 flagstop  为true  而且点击了 那么 说明 是 走着 要暂停   
		//如果 flagstop  为false  而且点击了 那么 说明 是 暂停 要走   
		var stoptime = 0;
    	var stopstartime = null;
    	var stopendtime = null;
		var flagstop = true;
		function b(){
			if(flagstop && !begin){
				stopstartime = new Date();
				//对应的状态改变
				clearInterval(running);
				flagstop = false;
				isrunning = false;
				begin = true;
			}else if(!flagstop){
				//对应的状态改变
				stopendtime = new Date();
				stoptime = stopendtime - stopstartime;
				running = setInterval("run();" , 5);
				flagstop = true;
				isrunning = true;
				begin = false;
			}
			
		}
		//按钮重置方法
		//让一切变量  恢复初始值
		//停止 画布动的方法  和  回退方法
		function c(){
//			 clearInterval(running);
//  		 clearInterval(backing);
//			 running = null;
//  		 begin = true;
//  		 isrunning = true;
//  		 backnum = 0;
//  		 backing = null;
//  		 socre = 0;
//  		 starttime = null;
//  		 endtime = null;
//  		 allTime = 0;
//  		 quicknum = 0.5;
//  		 flagstop = true;
//  		 drawStartRect();
//  		 drawRect();
//  		 print(); 
			window.location.reload();
		}
		//用于打印分数和秒数
		function print(){
			 document.getElementById("socre").innerHTML=socre + "分"
    		 document.getElementById("times").innerHTML=allTime + "秒";
		}
  	drawRect();
  	print();
    </script>
  </body>
</html>