开发html5 2d 赛车游戏以及打包发布为手机APP 第二话让单调的背景动起来

接着上一话，得到一个死板的“图片”肯定没人会喜欢，因此，这一话，咱们来让死板的背景动动，让车子看起来是在前进，所以上一话没用到的道路分界线图片在这一话有用了

我们要画道路分界线,首先定义2个变量

var fenjiepic;    //用于保存道路分界线图片对象
var fen_y;        //第一个分界线的Y坐标

在init()方法里面添加fenjiepic的实例化处理并设置图片路径

fenjiepic=new Image();

fenjiepic.src="img/fenjie.png";

然后去画，怎么画?由于道路肯定不只1条的道路分界线，而是N条道路分界线，而且行车过程中，汽车的速度作用下，道路分界线实际是1条接1条不断接近车子并远离车子，我们可以这样做

用for循环分别作画50次分界线，每一条分界线都比前一条分界线往上80像素

for(var i=0;i<50;i++)
{
    ctx.drawImage(fenjiepic,canvas1.width/2-10/2,fen_y-80*i,10,30); 
}

会看到下面的效果，，还不会动

接下来然所有的分界线都快速往下移动，，而且超过画布的高度就重新返回起始位

    		if(fen_y<canvas1.height)
    		{
    			fen_y=fen_y+150;
    		}else if(fen_y>=canvas1.height)
    		{
    			fen_y=0;
    		}

原理就是由于上面的代码在计时器的animate()动作中，计时器是按照每( )毫秒不断执行的。

就不断执行如果fen_y小于canvas1.height画布的高，fen_y自动加150；否则要是fen_y大于canvas1.height画布的高，fen_y赋值为0。

这样就实现了分界线不断往下移动，还是不够生动？咱们再让路面“抖”一下

再定义一个全局变量road_d

 var road_d;

在init()中给 road_d 赋值为1

road_d=1;

在animate()方法中，对画路的代码进行添加判断

    		if(road_d==1)
    		{
    		ctx.drawImage(roadpic,0,0,canvas1.width+8,canvas1.height+8); 
    		road_d=0;
    		}
    		else{
    			ctx.drawImage(roadpic,0,0,canvas1.width,canvas1.height); 
    			road_d=1;
    		}

其实也就是相当于对错对错对错对错对错对错的无限重复判断，当road_d等于1时，画比画布更宽8像素，更高8像素的路面图片，并把road_d赋值为0；当road_d不等于1时，画跟画布一样大小的路面图片。

最后，为了让车速看起来更快，游戏更顺畅，咱们把计时器的执行间隔修改为每50毫秒一次

    		setInterval(function(e) {
					animate();
				}, 50);

背景的处理完成，车子看起来真够快了，在每次完成一项新功能以后都建议大家用hbuilder线上打包发布测试一下，并且备份一下代码，无论是在做什么样的程序（啰嗦吧，我自己也觉得啰嗦）。

下一话咱们来讲让邪恶的敌对NPC也出现

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>赛车游戏</title>
    <script type="text/javascript">
        var ctx;
	var canvas1;
	    
        var roadpic;
        var zhujuepic;
        var fenjiepic;
        
        var fen_y;
        var road_d;
    	function init() {
    		
    		ctx = document.getElementById('canvas').getContext('2d');
		    canvas1 = document.getElementById('canvas');
				        
				        
            roadpic = new Image();  
            zhujuepic=new Image();
            
            fenjiepic=new Image();
            roadpic.src ="img/road.png";
            zhujuepic.src="img/car1.png";
            fenjiepic.src="img/fenjie.png";
            
            
            fen_y=0;
            road_d=1;
            
    		setInterval(function(e) {
					animate();
				}, 50);
				
    	}
    	
    	function animate() {
    		ctx.clearRect(0, 0, canvas1.width, canvas1.height);

    		//----------------------------------//
    		
    		if(road_d==1)
    		{
    		ctx.drawImage(roadpic,0,0,canvas1.width+8,canvas1.height+8); 
    		road_d=0;
    		}
    		else{
    			ctx.drawImage(roadpic,0,0,canvas1.width,canvas1.height); 
    			road_d=1;
    		}
    		
    		
    		
    		for(var i=0;i<50;i++)
    		{
    		ctx.drawImage(fenjiepic,canvas1.width/2-10/2,fen_y-80*i,10,30); 
    		}
    		
    		if(fen_y<canvas1.height)
    		{
    			fen_y=fen_y+150;
    		}else if(fen_y>=canvas1.height)
    		{
    			fen_y=0;
    		}
    		
    		
    		ctx.drawImage(zhujuepic,canvas1.width/2-40/2,canvas1.height-80,40,80); 
    		
	
    		
    	}
    </script>
</head>

<body onLoad="init();">
		<canvas id="canvas" width="300" height="540">
	
		</canvas>
	</body>
</html>

开发html5 2d 赛车游戏以及打包发布为手机APP 第二话 让单调的背景动起来

猜你喜欢

开发html5 2d 赛车游戏以及打包发布为手机APP 第二话让单调的背景动起来