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

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

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

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

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

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

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

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

公路赛道图片

道路分界线图片：

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

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

代码准备：（废话）

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

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

<!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">function init() {setInterval(function(e) {animate();}, 100);}function animate() {}</script>
</head>
<body onLoad="init();"><canvas id="canvas"></canvas></body>
</html>

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

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

要是你有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到自己的手机测试一下，值得注意的是我们这里只是固定了画面的大小，大家得自己去调整画面的大小去适应不同手机设备，项目源码在下面

<!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;function init() {ctx = document.getElementById('canvas').getContext('2d');canvas1 = document.getElementById('canvas');roadpic = new Image();  zhujuepic=new Image();roadpic.src ="img/road.png";zhujuepic.src="img/car1.png";setInterval(function(e) {animate();}, 100);}function animate() {ctx.clearRect(0, 0, canvas1.width, canvas1.height);//----------------------------------//ctx.drawImage(roadpic,0,0,canvas1.width,canvas1.height); 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 第二话让单调的背景动起来