开发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=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也出现

 

完整代码：