开发html5 2d 赛车游戏以及打包发布为手机APP 第一话 工欲善其事

    按照昔日做给上头拿去找汽车商卖钱的一个赛车游戏APP的经验来说明这个例子（不过当然只说有关游戏的部分）

 

思路：一幅赛道画面，赛道上面有一辆主角车，可以由玩家用手指拖拽去控制赛车的移动

 

           设置计时器，画面上方会不断刷新出不属于主角控制的NPC车辆，这些车辆不断向下移动，直到离开屏幕下方

 

 

           设置计时器，如果主角车辆没被NPC车辆撞击，每生存一秒增加100分（实际就是一个生存型游戏）

 

           直到主角车辆被NPC车辆撞击中，游戏结束，这时得到的分数为一盘游戏最终分数，关闭所有计时器

 

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

 

 

准备：赛车图片 （注：所有图片均来自网络，仅用于学习，不用于商业用途，如需将程序用于商业用途，请自行置换为原创图片，同时感谢以下图片的作者，大功大德）

           

 

公路赛道图片

 

道路分界线图片：

 

 

 
   

 

（一白色的竖线图片,x=5像素，y=15像素，可以自行用画图工具画，就在在上面，由于背景色也是白色，隐身了）

 

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

 

代码准备：（废话）

最基本的html5实现动画和游戏的代码，大家可以看看前一篇文章的一些最基本介绍：

关于开发html5 2d 动画和游戏以及打包发布为手机APP（简单入门）

 

 

 》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

 

下面说说如何画出咱们的图片

 

要是你有hbuilder代码编辑软件（没有就直接新建一个文件夹，用文本来编辑好了），那就打开hbuilder，新建一个移动APP项目，程序名字为saiche（这可以自己设定），在项目管理器找到saiche项目，找到img文件夹，然后把咱们的图片全部放进img文件夹

 

 

紧跟着就是定义2个变量，用来保存图片对象

 

 

 var roadpic;
 var zhujuepic;

 

 

在init()方法里面添加给roadpic，zhujuepic变量实例化并设置图片路径的处理

 

 

    	function init() {
    		
    		ctx = document.getElementById('canvas').getContext('2d');
		    canvas1 = document.getElementById('canvas');
				        
	    //用new image()实例化变量			        
            roadpic = new Image();  
            zhujuepic=new Image();
          
            //设置image实例的图片路径
            roadpic.src ="img/road.png";        //公路图片的路径
            zhujuepic.src="img/car1.png";       //主角车的路径
            
            
            
    		setInterval(function(e) {
					animate();
				}, 100);
				
    	}
    	

 

 

到animate()里面画出图片，drawImage（哪个image实例，坐标X位置，坐标Y位置，宽度，高度）

 

    		ctx.drawImage(roadpic,0,0,canvas1.width,canvas1.height); 
    		ctx.drawImage(zhujuepic,canvas1.width/2-40/2,canvas1.height-80,40,80); 

 

 

看效果

 

 

这样，我们就实现了让车辆出现在公路上，大家可以用上一篇介绍到的线上打包成安装包的方法打包成APK到自己的手机测试一下，值得注意的是我们这里只是固定了画面的大小，大家得自己去调整画面的大小去适应不同手机设备，项目源码在下面

 下一话，咱们将讲解如何让东西动起来

 

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