在线预览: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;
虽然整体框架实现起来不难,但是要优化的点还有很多,比如飞机加速控制,飞机随机位置控制,飞机数量控制,留给有兴趣的朋友。