GameBuilder开发游戏应用系列之100行代码实现微信打飞机

在线预览：http://osgames.duapp.com/apprun.html?appid=osgames1-951421981197090
在线编辑：http://osgames.duapp.com/gamebuilder.php?appid=osgames1-951421981197090
微信扫描：
微信打飞机实现起来并不难，需要用到的知识点有如下几点：

• 碰撞检测：敌机与敌机之间不检测，子弹与敌机需要检测。
• 触摸跟随：我方飞机要根据触摸点的位置变化而变化。
• 子弹与敌机生成：子弹需要定时发射，敌机随机生成。
• 背景滚动：不能看出背景图片是拼接而成。

碰撞检测

• 碰撞只能发生在刚体与刚体之间，这里的飞机是用帧动画实现的，因此需要该帧动画放在刚体内，作为刚体的子控件。子弹是图片，也要放在刚体里面。
  

• 如果希望同一类型的刚体不发生碰撞，只需要在刚体属性中设置分组为同一复数即可。
  

触摸跟随

• 触摸按下、移动、抬起，都会有对应的事件，这里只需要处理移动事件即可，根据触摸点的位置，调整飞机的位置。
  
  代码如下：

var win = this.getWindow();
var me = win.find("my-plane");
me.setPosition(point.x - 0.5 * me.w , point.y - 0.5 * me.h);

子弹与敌机生成

• 子弹应该是源源不断往前发射的，因此需要一个定时器，在GameBuilder里面有对应的定制器控件UITimer。只要像一般控件一样拖进窗口里面就能用，定时周期和次数在定时器特有属性里面配置，相关代码只要写到onTimeout事件里面去即可。
  
• 敌机的位置用javascript自带的Math.random()函数即可。

背景滚动

在场景里面，可以设置虚拟宽度/高度大于窗口宽度/高度，在背景图片设置为水平/垂直方向平铺，然后只要对刚体设置属性镜头跟随我，即可实现场景跟着主角滚动的效果，例子参见李先静老师的demo松鼠酷跑。
但是我这里做了触摸跟随，飞机的运动时随机的，因此不适合设置镜头跟随我，那样的话场景就会上下晃动有点怪异。

我这里用另外一种方法，就是利用3张图片和一个定时器来实现。定时器onTimeout事件代码如下：

var win = this.getWindow();
var bg1 = win.find("bg-1");
var bg2 = win.find("bg-2");
var bg3 = win.find("bg-3");
var h = bg1.getHtmlImage().height;
bg1.setPosition(0, win.offset);
bg2.setPosition(0, win.offset - h);
bg3.setPosition(0, win.offset - 2*h);
win.offset += 2;
win.offset %= 2*h;

虽然整体框架实现起来不难，但是要优化的点还有很多，比如飞机加速控制，飞机随机位置控制，飞机数量控制，留给有兴趣的朋友。