html、css、js学习小结-躲避车小游戏

于 2019-05-14 11:28:24 发布
阅读量464 收藏 4
点赞数
文章标签： 游戏 javascript 前端 ViewUI
原文链接：https://juejin.im/post/5cdaa2dff265da03ac0d2dbd
版权

经过20天的前端入门学习，初步掌握了HTML，css，js的语法结构，现尝试写一个躲避车的小游戏。

HTML部分：

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>小汽车</title>
 <link rel="stylesheet" href="index.css">
</head>
<body>
<!--用户接口-->
 <button class="btn_start">start</button>
 <div class="btn">
  <button class="btn_resume">resume</button>
  <button class="btn_pause">pause</button>
 </div>
 <!--动画内容-->
 <div class="road">
  <div class="restart">
   <h2 class="btn_restart">restart</h2>
   <!--行道线参照物-->
  </div>
   <div class="line1"></div>
   <div class="line2"></div>
   <div class="line3"></div>
   <!--控制的小黄车-->
  <div class="car">
   <div class="light1"></div>
   <div class="light2"></div>
   <div class="glass1"></div>
   <div class="glass2"></div>
   <div class="tyre1"></div>
   <div class="tyre2"></div>
   <div class="tyre3"></div>
   <div class="tyre4"></div>
  </div>
  <!--敌对的小蓝车-->
  <div class="car1">
   <div class="light1"></div>
   <div class="light2"></div>
   <div class="glass1"></div>
   <div class="glass2"></div>
   <div class="tyre1"></div>
   <div class="tyre2"></div>
   <div class="tyre3"></div>
   <div class="tyre4"></div>
  </div>
  <div class="car2">
   <div class="light1"></div>
   <div class="light2"></div>
   <div class="glass1"></div>
   <div class="glass2"></div>
   <div class="tyre1"></div>
   <div class="tyre2"></div>
   <div class="tyre3"></div>
   <div class="tyre4"></div>
  </div>
  <div class="car3">
   <div class="light1"></div>
   <div class="light2"></div>
   <div class="glass1"></div>
   <div class="glass2"></div>
   <div class="tyre1"></div>
   <div class="tyre2"></div>
   <div class="tyre3"></div>
   <div class="tyre4"></div>
  </div>
  <div class="car4">
   <div class="light1"></div>
   <div class="light2"></div>
   <div class="glass1"></div>
   <div class="glass2"></div>
   <div class="tyre1"></div>
   <div class="tyre2"></div>
   <div class="tyre3"></div>
   <div class="tyre4"></div>
  </div>
 </div>
 <script src="index.js"></script>
</body>
</html>
复制代码

CSS部分

 body{
 overflow-y: hidden; 
 margin: 0;
 padding: 0;
 background-color: rgb(118,250,101);
}
.road{
 position: relative;
 z-index: 1;
 margin: 0 auto;
 width: 300px;
 height: 100vh;
 background-color: rgb(0,0,0);
 overflow: hidden;
}
.restart{
 position: absolute;
 z-index: 9;
 width: 300px;
 height: 100%;
 background-color: rgb(200,200,200);
 text-align: center;
 opacity: 0;
 transition: opacity 1s;
}
.btn_restart{
 display: inline-block;
 margin: 150px 0;
 padding: 0;
 height: 80px;
 line-height: 80px;
 width: 150px;
 color: #fff;
 background-color: rgb(0,23,64);
 border-radius: 10px;
 cursor: pointer;
}
.btn_restart:active{
background-color: green;
}
.btn_start{
 position: absolute;
 top: -50px;
 left: 870px;
 display: inline-block;
 margin: 150px 0;
 padding: 0;
 height: 50px;
 line-height: 50px;
 width: 80px;
 font-size: 22px;
 color: black;
 background-color: rgb(161,189,174);
 border-radius: 10px;
 cursor: pointer;
 text-align: center;
 outline: none;
 box-shadow: 0 0 25px rgb(0,0,0,.4);
 cursor: pointer;
}
.btn{
 position: absolute;
 top: 200px;
 left: 870px;
 height: 50px;
 width: 80px;
 border-radius: 10px; 
 overflow: hidden;
 box-shadow: 0 0 25px rgb(0,0,0,.3);
}
.btn_pause{
 position: absolute;
 z-index: 1;
 top: 0;
 left: 0;
 display: inline-block;
 padding: 0;
 height: 50px;
 line-height: 50px;
 width: 80px;
 font-size: 20px;
 color: black;
 background-color: rgb(161,189,174);
 border-radius: 10px;
 text-align: center;
 outline: none;
 cursor: pointer;
}
.btn_resume{
 position: absolute;
 z-index: 9;
 top: 50px;
 left: 0px;
 display: inline-block;
 padding: 0;
 height: 50px;
 line-height: 50px;
 width: 80px;
 font-size: 19px;
 color: black;
 background-color: rgb(161,189,174);
 border-radius: 10px;
 outline: none;
 cursor: pointer;
 transition: top 0.5s; 
}
.line1{
    position: absolute;
    top: -150px;
    width: 5%;
 left: 50%;
 margin-left: -7.5px;
    height: 150px;
    background-color: #666;
}
.line2{
    position: absolute;
    top: 150px;
   left: 50%;
 margin-left: -7.5px;
    width: 5%;
    height: 150px;
    background-color: #666;
}
.line3{
    position: absolute;
    top: 450px;
   left: 50%;
 margin-left: -7.5px;
    width: 5%;
    height: 150px;
    background-color: #666;
}
.car{
 position: absolute;
 top: 600px;
 left: 180px;
 height: 50px;
 width: 11%;
 background-color: rgb(250,248,79);
 border-radius: 5px;
}
.light1{
 position: absolute;
 top: -4px;
 left: 3px;
 width: 30%;
 height: 4px;
 border-radius: 5px 5px 0 0;
 background-color: #fff;
}
.light2{
 position: absolute;
 top: -4px;
 right: 3px;
 width: 30%;
 height: 4px;
 border-radius: 5px 5px 0 0;
 background-color: #fff;
}
.glass1{
 position: absolute;
 left: 20%;
 top: 7px;
 height: 10px;
 width: 60%;
 background-color: rgb(45,45,45);
 border-radius: 0 0 5px 5px; 
}
.glass2{
 position: absolute;
 left: 20%;
 bottom: 7px;
 height: 11px;
 width: 60%;
 background-color: rgb(45,45,45);
 border-radius: 5px 5px 0 0 ;
}
.tyre1{
 position: absolute;
 left: -10%;
 top: 20%;
 height: 20%;
 width: 10%;
 background-color: #fff;
 border-radius: 4px 0 0 4px ;
}
.tyre2{
 position: absolute;
 right: -10%;
 top: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(60,60,60);
 border-radius: 0 4px 4px 0 ;
}
.tyre3{
 position: absolute;
 left: -10%;
 bottom: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(60,60,60);
 border-radius: 4px 0 0 4px ;
}
.tyre4{
 position: absolute;
 right: -10%;
 bottom: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(60,60,60);
 border-radius:0 4px 4px 0;
}
.car1{
 position: absolute;
 top: 5%;
 left: 50%;
 height: 50px;
 width: 11%;
 background-color: rgb(15,168,239);
 border-radius: 5px;
}
.light1{
 position: absolute;
 top: -4px;
 left: 3px;
 width: 30%;
 height: 4px;
 border-radius: 5px 5px 0 0;
 background-color: #fff;
}
.light2{
 position: absolute;
 top: -4px;
 right: 3px;
 width: 30%;
 height: 4px;
 border-radius: 5px 5px 0 0;
 background-color: #fff;
}
.glass1{
 position: absolute;
 left: 20%;
 top: 7px;
 height: 10px;
 width: 60%;
 background-color: rgb(45,45,45);
 border-radius: 0 0 5px 5px; 
}
.glass2{
 position: absolute;
 left: 20%;
 bottom: 7px;
 height: 11px;
 width: 60%;
 background-color: rgb(45,45,45);
 border-radius: 5px 5px 0 0 ;
}
.tyre1{
 position: absolute;
 left: -10%;
 top: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(60,60,60);
 border-radius: 4px 0 0 4px ;
}
.tyre2{
 position: absolute;
 right: -10%;
 top: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(60,60,60);
 border-radius: 0 4px 4px 0 ;
}
.tyre3{
 position: absolute;
 left: -10%;
 bottom: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(60,60,60);
 border-radius: 4px 0 0 4px ;
}
.tyre4{
 position: absolute;
 right: -10%;
 bottom: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(60,60,60);
 border-radius:0 4px 4px 0;
}
.car2{
 position: absolute;
 top: 30%;
 left: 25%;
 height: 50px;
 width: 11%;
 background-color: rgb(15,168,239);
 border-radius: 5px;
}
.light1{
 position: absolute;
 top: -4px;
 left: 3px;
 width: 30%;
 height: 4px;
 border-radius: 5px 5px 0 0;
 background-color: #fff;
}
.light2{
 position: absolute;
 top: -4px;
 right: 3px;
 width: 30%;
 height: 4px;
 border-radius: 5px 5px 0 0;
 background-color: #fff;
}
.glass1{
 position: absolute;
 left: 20%;
 top: 7px;
 height: 10px;
 width: 60%;
 background-color: rgb(45,45,45);
 border-radius: 0 0 5px 5px; 
}
.glass2{
 position: absolute;
 left: 20%;
 bottom: 7px;
 height: 11px;
 width: 60%;
 background-color: rgb(45,45,45);
 border-radius: 5px 5px 0 0 ;
}
.tyre1{
 position: absolute;
 left: -10%;
 top: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(60,60,60);
 border-radius: 4px 0 0 4px ;
}
.tyre2{
 position: absolute;
 right: -10%;
 top: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(60,60,60);
 border-radius: 0 4px 4px 0 ;
}
.tyre3{
 position: absolute;
 left: -10%;
 bottom: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(60,60,60);
 border-radius: 4px 0 0 4px ;
}
.tyre4{
 position: absolute;
 right: -10%;
 bottom: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(60,60,60);
 border-radius:0 4px 4px 0;
}
.car3{
 position: absolute;
 top: 57%;
 left: 80%;
 height: 50px;
 width: 11%;
 background-color: rgb(15,168,239);
 border-radius: 5px;
}
.light1{
 position: absolute;
 top: -4px;
 left: 3px;
}
.light2{
 position: absolute;
 top: -4px;
 right: 3px;
}
.glass1{
 position: absolute;
 left: 20%;
 top: 7px;
}
.glass2{
 position: absolute;
 left: 20%;
 bottom: 7px;
}
.tyre1{
 position: absolute;
 left: -10%;
 top: 20%;
}
.tyre2{
 position: absolute;
 right: -10%;
 top: 20%;
}
.tyre3{
 position: absolute;
 left: -10%;
 bottom: 20%;
}
.tyre4{
 position: absolute;
 right: -10%;
 bottom: 20%;
}
.car4{
 position: absolute;
 top: 79%;
 left: 10%;
 height: 50px;
 width: 11%;
 background-color: rgb(15,168,239);
 border-radius: 5px;
}
.light1{
 position: absolute;
 top: -4px;
 left: 3px;
 width: 30%;
 height: 4px;
 border-radius: 5px 5px 0 0;
 background-color: #fff;
}
.light2{
 position: absolute;
 top: -4px;
 right: 3px;
 width: 30%;
 height: 4px;
 border-radius: 5px 5px 0 0;
 background-color: #fff;
}
.glass1{
 position: absolute;
 left: 20%;
 top: 7px;
 height: 10px;
 width: 60%;
 background-color: rgb(45,45,45);
 border-radius: 0 0 5px 5px; 
}
.glass2{
 position: absolute;
 left: 20%;
 bottom: 7px;
 height: 11px;
 width: 60%;
 background-color: rgb(45,45,45);
 border-radius: 5px 5px 0 0 ;
}
.tyre1{
 position: absolute;
 left: -10%;
 top: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(150,150,150);
 border-radius: 4px 0 0 4px ;
}
.tyre2{
 position: absolute;
 right: -10%;
 top: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(150,150,150);
 border-radius: 0 4px 4px 0 ;
}
.tyre3{
 position: absolute;
 left: -10%;
 bottom: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(150,150,150);
 border-radius: 4px 0 0 4px ;
}
.tyre4{
 position: absolute;
 right: -10%;
 bottom: 20%;
 height: 20%;
 width: 10%;
 background-color: rgb(150,150,150);
 border-radius:0 4px 4px 0;
}   
复制代码

问题：

  1. 小车的移动不够源润:已解决

  2. 单位时间内小车的移动速度变化太大，就会卡卡顿顿的

  3. 小车和行道线在从上面出现时的运动速度异常:

经检查是js中的浮点数运算出现误差，当前的left值（getComputedStyle（element）.left）和speed求和，声明speed为1.5时，若element.style.left为负，求和结果变为加二。若element.style.left为正，求和结果变为加一。 网上查的是说可以自己编写运算函数以实现精确计算，尝试后未实现（未解决）。

 ···javascript
   // An highlighted block
    //此处添加加法和减法运算函数以供调用
    var road=document.getElementsByClassName("road")[0];
    
    
    //行车线的移动: 引入计时器timer1
    //知识点：parseInt()将浮点数转为整数
    //        getComputedStyle()获得元素样式
    //问题：发现在对元素的left值进行修改时，尝试声明speed为浮点数，结果发现
    function accAdd(arg1,arg2){
    	var r1,r2,m,c;
    	try{
    		r1=arg1.toString().split(".")[1].length
    	}
    	catch(e){
    		r1=0;  
    	}
    	try{
    		r2=arg1.toString().split(".")[1].length
    	}
    	catch(e){
    		r2=0;  
    	}
    	c=Math.abs(r1-r2);
    	m=Math.pow(10,Math.max(r1,r2));
    	if(c>0){
    		var cm=Math.pow(10,c);
    		if(r1>r2){
    			arg1=Number(arg1.toString().replace(".",""));
    			arg2=Number(arg2.toString().replace(".",""))*cm;			
    		}
    		else{
    			arg2=Number(arg2.toString().replace(".",""));
    			arg1=Number(arg1.toString().replace(".",""))*cm;	
    		}
    	}
    	else{
    			arg1=Number(arg1.toString().replace(".",""));
    			arg2=Number(arg2.toString().replace(".",""));		
    	}
    	return (arg1+arg2)/m;
    }
    var line_speed=2;
    var timer1;
    var line1=document.getElementsByClassName("line1")[0];
    var line2=document.getElementsByClassName("line2")[0];
    var line3=document.getElementsByClassName("line3")[0];
    function line_move(){
    	//添加计时器，清空的判断条件为到达底部后再放回上面
    	timer1=setInterval(function(){
    		if(750 <= parseInt(getComputedStyle(line1).top))
    		{
    			
    			line1.style.top=-150+"px";
    			
    		}
    		else{
    			line1.style.top=parseInt(getComputedStyle(line1).top)+line_speed+"px";
    			console.log(line1.style.top);
    			
    		}
    		if(750 <= parseInt(getComputedStyle(line2).top))
    		{
    			
    			line2.style.top=-150+"px";
    		}
    		else{
    			line2.style.top=parseInt(getComputedStyle(line2).top)+line_speed+"px";
    			
    		}
    		if(750 <= parseInt(getComputedStyle(line3).top))
    		{
    			
    			line3.style.top=-150+"px";
    		}
    		else{
    			line3.style.top=parseInt(getComputedStyle(line3).top)+line_speed+"px";
    		}
    	},10);			
    }
    // 
    // 
    // 
    //小蓝车的移动: 引入计时器timer2
    //知识点：定义小数百分数的转换函数，这里可以规定进位位数
    //        尝试了一下，也可以不用函数
    var car_speed=2;
    var timer2;
    var car1=document.getElementsByClassName("car1")[0];
    var car2=document.getElementsByClassName("car2")[0];
    var car3=document.getElementsByClassName("car3")[0];
    var car4=document.getElementsByClassName("car4")[0];
    //小数转为百分数
    function toPercent(point){
    	var str=Number(point*100).toFixed(1);
    	str+="%";
    	return str;
    }
    function car_move(){
    	timer2=setInterval(function(){
    		if(parseInt(getComputedStyle(road).height) > parseInt(getComputedStyle(car1).top))
    		{
    			car1.style.top=parseInt(getComputedStyle(car1).top)+car_speed+"px";
    		}
    		else{
    			car1.style.top=-50+"px";
    			random_left=Math.random()*(0.02,0.87);
    			car1.style.left=toPercent(random_left);
    		}
    		if(parseInt(getComputedStyle(road).height)>parseInt(getComputedStyle(car2).top))
    		{
    			car2.style.top=parseInt(getComputedStyle(car2).top)+car_speed+"px";
    
    		}
    		else{
    			car2.style.top=-50+"px";
    			random_left=Math.random()*(0.02,0.87);
    			car2.style.left=Number(random_left*100)+"%";
    		}
    		if(parseInt(getComputedStyle(road).height)>parseInt(getComputedStyle(car3).top))
    		{
    			car3.style.top=parseInt(getComputedStyle(car3).top)+car_speed+"px";
    		}
    		else{
    			car3.style.top=-50+"px";
    			random_left=Math.random()*(0.02,0.87);
    			car3.style.left=toPercent(random_left);
    		}
    		if(parseInt(getComputedStyle(road).height)>parseInt(getComputedStyle(car4).top))
    		{
    			car4.style.top=parseInt(getComputedStyle(car4).top)+car_speed+"px";
    		}
    		else{
    			car4.style.top=-50+"px";
    			random_left=Math.random()*(0.02,0.87);
    			car4.style.left=toPercent(random_left);
    		}
    //
    //
    // 
    // 在小蓝车的运动过程中添加撞击判定和加速度
    		value1=check();
            if(value1===false){
                //撞击后
    			gameover();
    		}
    	},20);
    }
    // 
    // 
    // 
    //小黄车的移动
    //首先要知道如何获取按键返回值，以绑定事件
    //因为上下左右的运动由4个按键分别控制，引入4个计时器，抬起按键解除计时停止运动
    //启动后将计时器锁定（flag），连按按键不再触发新一轮计时
    var car=document.getElementsByClassName("car")[0];
    var x_speed=2;
    var y_speed=2;
    var timer3;
    var timer4;
    var timer5;
    var timer6;
    var flag1=false;
    var flag2=false;
    var flag3=false;
    var flag4=false;
    //左键-向左移动	
    function left_move(){
    		timer3=setInterval(function(){
    			if(parseInt(getComputedStyle(car).left)>4){
    				car.style.left=parseInt(getComputedStyle(car).left)-x_speed+"px";
    			}
    			flag1=true;
    		},20);
    }
    //上键-向上移动
    function up_move(){
    		timer4=setInterval(function(){
    			if(parseInt(getComputedStyle(car).top)>4){
    				car.style.top=parseInt(getComputedStyle(car).top)-y_speed+"px";
    			}
    			flag2=true;
    		},20);
    }
    //右键-向右移动
    function right_move(){
    		timer5=setInterval(function(){
    			if(parseInt(getComputedStyle(car).left)<264){
    				car.style.left=parseInt(getComputedStyle(car).left)+x_speed+"px";	
    			}
    			flag3=true;
    		},20);
    }
    //下键-向下移动
    function down_move(){
    		timer6=setInterval(function(){
    			if(parseInt(getComputedStyle(car).top)<601){
    				car.style.top=parseInt(getComputedStyle(car).top)+y_speed+"px";	
    			}
    			flag4=true;
    		},20);
    }
    document.addEventListener("keydown",function(e){
    if(pause_lock===false&&carstart_lock===false){
    	if(e.code==="ArrowLeft"&&flag1===false){ 
    		left_move();   	
    	    }					 		
    	else
    	if(e.code==="ArrowUp"&&flag2===false){ 
    		up_move();   	
    	    }
    	else
    	if(e.code==="ArrowRight"&&flag3===false){ 	    
    		right_move();   	
    	    }					 		
    	else
    	if(e.code==="ArrowDown"&&flag4===false){ 	  
    		down_move();   	
    	    }					 			
    }
    })
    document.onkeyup=function(e){
    	if(e.code==="ArrowLeft"){ 
    	clearInterval(timer3);
    	flag1=false;				 		
    	}else
    	if(e.code==="ArrowUp"){ 
    	clearInterval(timer4);
    	flag2=false;				 		
    	}else
    	if(e.code==="ArrowRight"){ 
    	clearInterval(timer5);
    	flag3=false;			 		
    	}else
    	if(e.code==="ArrowDown"){ 
    	clearInterval(timer6);
    	flag4=false;					 		
    	}	
    }
    // 
    // 
    // 
    //撞击事件，判断游戏结束
    var restart=document.getElementsByClassName("restart")[0];
    var btn_restart=document.getElementsByClassName("btn_restart")[0];
    function check(){
    if(
    	((parseInt(getComputedStyle(car).left)>(parseInt(getComputedStyle(car1).left)+36))||
    	(parseInt(getComputedStyle(car).left)<(parseInt(getComputedStyle(car1).left)-36))||
    	(parseInt(getComputedStyle(car).top)>(parseInt(getComputedStyle(car1).top)+51))||
    	(parseInt(getComputedStyle(car).top)<(parseInt(getComputedStyle(car1).top)-51)))
    	&&(
    	(parseInt(getComputedStyle(car).left)>(parseInt(getComputedStyle(car2).left)+36))||
    	(parseInt(getComputedStyle(car).left)<(parseInt(getComputedStyle(car2).left)-36))||
    	(parseInt(getComputedStyle(car).top)>(parseInt(getComputedStyle(car2).top)+51))||
    	(parseInt(getComputedStyle(car).top)<(parseInt(getComputedStyle(car2).top)-51)))
    	&&(
    	(parseInt(getComputedStyle(car).left)>(parseInt(getComputedStyle(car3).left)+36))||
    	(parseInt(getComputedStyle(car).left)<(parseInt(getComputedStyle(car3).left)-36))||
    	(parseInt(getComputedStyle(car).top)>(parseInt(getComputedStyle(car3).top)+51))||
    	(parseInt(getComputedStyle(car).top)<(parseInt(getComputedStyle(car3).top)-51)))
    	&&(
    	(parseInt(getComputedStyle(car).left)>(parseInt(getComputedStyle(car4).left)+36))||
    	(parseInt(getComputedStyle(car).left)<(parseInt(getComputedStyle(car4).left)-36))||
    	(parseInt(getComputedStyle(car).top)>(parseInt(getComputedStyle(car4).top)+51))||
    	(parseInt(getComputedStyle(car).top)<(parseInt(getComputedStyle(car4).top)-51))))
    {        
        return true;
    }
    else{
        return false;
    }
    }
    //游戏结束动作
    var gameRestart=true;
    var gameover=function(){
    	clearInterval(timer1);
    	clearInterval(timer2);
    	clearInterval(timer3);
    	clearInterval(timer4);
    	clearInterval(timer5);
    	clearInterval(timer6);
    	restart.style.opacity=1;
    	btn_restart.onclick=function(){
    		history.go(0);
    		gameRestart=true;
    	}
    }
    // 
    // 
    // 
    //系统加速度
    function accelerate(){
    	setInterval(function(){
    		if(pause_lock===false){
    			car_speed++;
    			line_speed++;
    			x_speed++;
    			y_speed++;
    		}
    	},10000);
    }
    // 
    // 
    // 
    //用户接口
    //1.给start绑定点击事件
    //(1)判断网页刚打开或刷新后点击生效
    var start=document.getElementsByClassName("btn_start")[0];
    var carstart_lock=true;
    start.onclick=function(){
    	if(gameRestart===true){
    		car_move();
    		line_move();
    		accelerate();
    		carstart_lock=false;
    		gameRestart=false;
    	}
    }
    
    //2.pasue绑定点击事件
    var pause_lock=false;
    var pause=document.getElementsByClassName("btn_pause")[0];
    var resume=document.getElementsByClassName("btn_resume")[0];
    pause.onclick=function(){
    	//清除各计时器运动
        clearInterval(timer1);
    	clearInterval(timer2);
    	clearInterval(timer3);
    	clearInterval(timer4);
    	clearInterval(timer5);
    	clearInterval(timer6);
    	pause_lock=true;
    	//弹出resume按钮
    	btn_resume();
    }
    //resume按键的弹出
    function btn_resume(){
    	value2=pause.className;
    	pause.className=resume.className;
    	resume.className=value2;
    }
    //
    //resume按键的点击事件
    resume.onclick=function(){
        btn_resume();
        pause_lock=false;
        if(gameRestart===false){
    	car_move();
    	line_move();
    	}     
    }
```
复制代码

转载于:https://juejin.im/post/5cdaa2dff265da03ac0d2dbd

weixin_34082789
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值