用Aure 实现“打飞机”，骚年，来一发（下）

2016-04-11 13:51:00

在上篇里我们提到如何用Axure实现微信5.0飞机大战的游戏。并跟大家讲解了第一步实现让敌机飞，让子弹飞。没看过上篇的同学可以先回读一下http://www.imspm.com/rp/248429.html

下方左图就是最终达到的效果，下方右图是上篇实现的状态。

so，今天把剩余的效果都实现！我们需要让敌机、子弹、战斗机之间碰撞后引发我们想要的事件。如何实现，且听我细细道来！

一、功能描述

子弹碰撞到敌机，敌机爆炸并计得100分；
敌机撞击到战斗机，战斗机爆炸并减少剩余飞机数量，直至剩余飞机数量为0游戏结束；
每击落10架敌机，难度等级+1，敌机飞行速度相应提速；
对游戏进行其他修饰；

二、材料准备

云朵.png还是老办法，用PS抠抠抠。“仪表盘”和“剩余飞机”这两个动态面板是为了显示游戏中的相关数据，几个-txt结尾的文本框是后续事件写入数据的载体。按下图方式组织好动态面板。

三、构建敌机的撞击事件

我们上篇实现的效果中，敌机在移动状态下有两个事件分别是正常飞行和撞击地面。那么根据上述功能要求，敌机在移动状态下完整的事件如下：

正常飞行
被子弹击中
撞击到战斗机
沉入地面

也就是说，敌机在飞行中最多会先后触发上述事件。一图胜千字，奉上流程图，在上篇的基础上增加几个判断。

我们将敌机飞行中一些触发事件的逻辑关系理清楚之后，需要把这些逻辑用Axure的交互事件表达出来。关于Axure同一个触发事件下触发的不同用例之间的逻辑关系，涉及一个知识点需要重点解释一下。听起来很抽象？举个栗子，敌机在移动状态会触发飞行、中弹、撞机、入地等不同用例，这几个用例之间可以用"if→if→if"的关系表达，也可以用"if→else-if→else-if→else-if"的并列关系来完成（右键点击用例条件可切换这两种关系）。“"if→if”和“"if→else-if”最大的区别在于“if→if”是指两个并列的事项，如果两个条件同事满足Axure会同时去执行if下的两个用例（记住是同时），“if→else-if”则会从上到下去判断，如果第一个if的条件满足，Axure执行完第一个用例就不再执行下面的用例。

说了这么多关于”if→if“和”if→else-if“的关系，是为了更好理解下面几个事件的关系。在本例子中我们采用的是”if→else-if“的逻辑关系，因为在几个撞击事件都是独立发生的，我们不希望它们同时进行（敌机在一边飞行一边敌机被子弹击落同时与战斗机相撞，同时还要入地，这样的场景无法想象，太惨烈无法直视）。既然是独立发生的，我们每一个事件发生的条件就必须互斥。

比如，当我们描述飞机正常飞行的时候，必须定义为：“敌机”未接触“地面”且“敌机”未接触“子弹”且“敌机”未接触“战斗机”只有这几个条件同时满足才算。以此类推，“敌机”撞击“战斗机”的条件也必须包含“敌机”未接触“子弹”未接触“地面”。一方面我们确保几个用例不会同时发生，另一方面确保几个用例之间条件独立。

点击图片放大，按F键查看原图

1、子弹击中敌机

敌机-壳：从状态1（飞行状态）切换到状态2（爆炸状态）等待200ms→切换回状态1（状态复位）→隐藏（避免重复计分）→计分[[LVAR1+100]]（局部变量LVAR1=得分-txt）→升级[[LVAR1*0.001+2]]（局部变量LVAR1=得分-txt，击落1架得100分，击落10架升1级，因此分数和等级是1000的关系，要乘以0.001，level初始值为2加上2是为了让敌机飞行速度合理），显示仪表盘上的等级[[Math.floor(level)-1]]（向下取整的目的是为了让击落飞机达到10架之后再升级，为确保敌机飞行速度合理将level初始值设为2，因此计算结果必须减去1）。

2、敌机撞击战斗机

战斗机：从状态1（正常状态）切换到状态2（爆炸状态）→切换回状态1（状态复位）→扣减剩余飞机数量[[fighter-1]]→将剩余飞机数量在界面显示出来剩余飞机-txt=[[fighter]]→隐藏（避免击落战斗机的数量重复计算）

3、防止敌机溢出

在测试中发现等级高的时候，敌机飞行速度快，可能当会穿过地面。或者由于浏览器的原因敌机会离开控制范围，无止境地往下飞行，这样游戏就无法继续。因此根据“战场背景”的高度设定一个条件，当敌机飞行距离超过一定阶段，就让飞机复位。

四、让战斗机动起来

通过在主页写页面交互实现战斗机移动，由于子弹是跟随着战斗机一起的，因此在最开始的时候我们就已经将两者合并在同一个动态面板上：“战斗机+子弹”，准确的说，我们应该移动“战斗机+子弹”。为了让它移动的时候不会超过背景的边界经过计算贴出下面用例：

总而言之，动态面板要移动必须满足两个条件：

按下按钮
还在活动范围内

五、装饰和美化

为了让游戏具有更好的可玩性，我们要做以下几件事情：

1、让战斗机飞行的时候增加喷尾气的效果

只要增加一个动态面板，在动态面板的两个状态分别的飞机尾气形状有所差异。游戏开始的时候让这两个状态循环切换则能得到尾气不断喷射的状态。

2、再复制出一架敌机，增加游戏可玩性

同时复制一个“循环”和“敌机-壳”将其命名为“循环2”和“敌机-壳2”在 ”循环2“复位敌机位置的用例里，绝对坐标的Y方向设置为-180这样就能确保同时复位的两架飞机是一先一后。当然，在”开始“按钮要增加对这两个动态面板控制的用例。在两架敌机”敌机撞击战斗机“的用例里也需要对彼此进行控制（具体请查看用例）。增加天空中的飞机打起来更刺激。

3、让美化战场

把云.png拉成不同大小散落在战场，把地板和天花板设置成全透明，将游戏里所有字体都改成你喜欢的字体，当然最好有点手写的感觉，不然与画风不一致；

4、给游戏加一个封面&给游戏设置一个重新开始的对话框

将战场全选右键转换成动态面板。将这个大的动态面板取名为”战斗区域“分为”战场“和”封面“两个状态。进入游戏默认是在”封面状态“游戏开始后是在”战场“状态。游戏结束的时候增加一个对话框，显示当前这局的得分和重新开始的按钮。本案例美其名曰”继续撸“。