用实现打飞机骚年来一发下

　　在上篇里我们提到如何用Axure实现微信5。0飞机大战的游戏。并跟大家讲解了第一步实现让敌机飞，让子弹飞。没看过上篇的同学可以先回读一下http：www。woshipm。comrp248429。html
　　下方左图就是最终达到的效果，下方右图是上篇实现的状态。
　　so，今天把剩余的效果都实现！我们需要让敌机、子弹、战斗机之间碰撞后引发我们想要的事件。如何实现，且听我细细道来！
　　一、功能描述
　　子弹碰撞到敌机，敌机爆炸并计得100分；
　　敌机撞击到战斗机，战斗机爆炸并减少剩余飞机数量，直至剩余飞机数量为0游戏结束；
　　每击落10架敌机，难度等级1，敌机飞行速度相应提速；
　　对游戏进行其他修饰；
　　二、材料准备
　　云朵。png还是老办法，用PS抠抠抠。仪表盘和剩余飞机这两个动态面板是为了显示游戏中的相关数据，几个txt结尾的文本框是后续事件写入数据的载体。按下图方式组织好动态面板。
　　三、构建敌机的撞击事件
　　我们上篇实现的效果中，敌机在移动状态下有两个事件分别是正常飞行和撞击地面。那么根据上述功能要求，敌机在移动状态下完整的事件如下：
　　正常飞行
　　被子弹击中
　　撞击到战斗机
　　沉入地面
　　也就是说，敌机在飞行中最多会先后触发上述事件。一图胜千字，奉上流程图，在上篇的基础上增加几个判断。
　　我们将敌机飞行中一些触发事件的逻辑关系理清楚之后，需要把这些逻辑用Axure的交互事件表达出来。关于Axure同一个触发事件下触发的不同用例之间的逻辑关系，涉及一个知识点需要重点解释一下。听起来很抽象？举个栗子，敌机在移动状态会触发飞行、中弹、撞机、入地等不同用例，这几个用例之间可以用ififif的关系表达，也可以用ifelseifelseifelseif的并列关系来完成（右键点击用例条件可切换这两种关系）。ifif和ifelseif最大的区别在于ifif是指两个并列的事项，如果两个条件同事满足Axure会同时去执行if下的两个用例（记住是同时），ifelseif则会从上到下去判断，如果第一个if的条件满足，Axure执行完第一个用例就不再执行下面的用例。
　　说了这么多关于ifif和ifelseif的关系，是为了更好理解下面几个事件的关系。在本例子中我们采用的是ifelseif的逻辑关系，因为在几个撞击事件都是独立发生的，我们不希望它们同时进行（敌机在一边飞行一边敌机被子弹击落同时与战斗机相撞，同时还要入地，这样的场景无法想象，太惨烈无法直视）。既然是独立发生的，我们每一个事件发生的条件就必须互斥。
　　比如，当我们描述飞机正常飞行的时候，必须定义为：敌机未接触地面且敌机未接触子弹且敌机未接触战斗机只有这几个条件同时满足才算。以此类推，敌机撞击战斗机的条件也必须包含敌机未接触子弹未接触地面。一方面我们确保几个用例不会同时发生，另一方面确保几个用例之间条件独立。
　　点击图片放大，按F键查看原图
　　1、子弹击中敌机
　　敌机壳：从状态1（飞行状态）切换到状态2（爆炸状态）等待200ms切换回状态1（状态复位）隐藏（避免重复计分）计分〔〔LVAR1100〕〕（局部变量LVAR1得分txt）升级〔〔LVAR10。0012〕〕（局部变量LVAR1得分txt，击落1架得100分，击落10架升1级，因此分数和等级是1000的关系，要乘以0。001，level初始值为2加上2是为了让敌机飞行速度合理），显示仪表盘上的等级〔〔Math。floor（level）1〕〕（向下取整的目的是为了让击落飞机达到10架之后再升级，为确保敌机飞行速度合理将level初始值设为2，因此计算结果必须减去1）。
　　2、敌机撞击战斗机
　　战斗机：从状态1（正常状态）切换到状态2（爆炸状态）切换回状态1（状态复位）扣减剩余飞机数量〔〔fighter1〕〕将剩余飞机数量在界面显示出来剩余飞机txt〔〔fighter〕〕隐藏（避免击落战斗机的数量重复计算）
　　3、防止敌机溢出
　　在测试中发现等级高的时候，敌机飞行速度快，可能当会穿过地面。或者由于浏览器的原因敌机会离开控制范围，无止境地往下飞行，这样游戏就无法继续。因此根据战场背景的高度设定一个条件，当敌机飞行距离超过一定阶段，就让飞机复位。
　　四、让战斗机动起来
　　通过在主页写页面交互实现战斗机移动，由于子弹是跟随着战斗机一起的，因此在最开始的时候我们就已经将两者合并在同一个动态面板上：战斗机子弹，准确的说，我们应该移动战斗机子弹。为了让它移动的时候不会超过背景的边界经过计算贴出下面用例：
　　总而言之，动态面板要移动必须满足两个条件：
　　按下按钮
　　还在活动范围内
　　五、装饰和美化
　　为了让游戏具有更好的可玩性，我们要做以下几件事情：
　　1、让战斗机飞行的时候增加喷尾气的效果
　　只要增加一个动态面板，在动态面板的两个状态分别的飞机尾气形状有所差异。游戏开始的时候让这两个状态循环切换则能得到尾气不断喷射的状态。
　　2、再复制出一架敌机，增加游戏可玩性
　　同时复制一个循环和敌机壳将其命名为循环2和敌机壳2在循环2复位敌机位置的用例里，绝对坐标的Y方向设置为180这样就能确保同时复位的两架飞机是一先一后。当然，在开始按钮要增加对这两个动态面板控制的用例。在两架敌机敌机撞击战斗机的用例里也需要对彼此进行控制（具体请查看用例）。增加天空中的飞机打起来更刺激。
　　3、让美化战场
　　把云。png拉成不同大小散落在战场，把地板和天花板设置成全透明，将游戏里所有字体都改成你喜欢的字体，当然最好有点手写的感觉，不然与画风不一致；
　　4、给游戏加一个封面amp；amp；给游戏设置一个重新开始的对话框
　　将战场全选右键转换成动态面板。将这个大的动态面板取名为战斗区域分为战场和封面两个状态。进入游戏默认是在封面状态游戏开始后是在战场状态。游戏结束的时候增加一个对话框，显示当前这局的得分和重新开始的按钮。本案例美其名曰继续撸。
　　六、写在最后
　　制作本案例的目的是出于好玩，将案例制作过程写出来是为了分享。案例本身没有实际价值，但是在制作过程涉及到动态面板、用例条件、页面交互、数学函数、全局变量、局部变量等知识点的应用。可以相对深刻地理解Axure的运行原理也算没白忙活。
　　最后依然双手献上rp源文件，需要更多沟通的童鞋，欢迎来公众号iambin找我。
　　作者提供源：
　　链接：http：pan。baidu。coms1mhvAXFq密码：xdoi
　　人人官方源：
　　链接：http：pan。baidu。coms1kU3eT2R密码：7tat