按照昔日做给上头拿去找汽车商卖钱的一个赛车游戏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>下一话，咱们将讲解如何让东西动起来
6192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
