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

在线预览:http://osgames.duapp.com/apprun.html?appid=osgames1-951421981197090
在线编辑:http://osgames.duapp.com/gamebuilder.php?appid=osgames1-951421981197090
微信扫描:GameBuilder开发游戏应用系列之100行代码实现微信打飞机
微信打飞机实现起来并不难,需要用到的知识点有如下几点:

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

碰撞检测

  • 碰撞只能发生在刚体与刚体之间,这里的飞机是用帧动画实现的,因此需要该帧动画放在刚体内,作为刚体的子控件。子弹是图片,也要放在刚体里面。
    GameBuilder开发游戏应用系列之100行代码实现微信打飞机

  • 如果希望同一类型的刚体不发生碰撞,只需要在刚体属性中设置分组为同一复数即可。
    GameBuilder开发游戏应用系列之100行代码实现微信打飞机

触摸跟随

  • 触摸按下移动抬起,都会有对应的事件,这里只需要处理移动事件即可,根据触摸点的位置,调整飞机的位置。
    GameBuilder开发游戏应用系列之100行代码实现微信打飞机
    代码如下:
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事件里面去即可。
    GameBuilder开发游戏应用系列之100行代码实现微信打飞机
  • 敌机的位置用javascript自带的Math.random()函数即可。

背景滚动

在场景里面,可以设置虚拟宽度/高度大于窗口宽度/高度,在背景图片设置为水平/垂直方向平铺,然后只要对刚体设置属性镜头跟随我,即可实现场景跟着主角滚动的效果,例子参见李先静老师的demo松鼠酷跑
但是我这里做了触摸跟随,飞机的运动时随机的,因此不适合设置镜头跟随我,那样的话场景就会上下晃动有点怪异。
GameBuilder开发游戏应用系列之100行代码实现微信打飞机
我这里用另外一种方法,就是利用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;

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

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

上一篇:[Android]实现类似微信的延迟加载的Fragment——LazyFragment


下一篇:CSS让表格透明时能不能让字不透明