用Axure 实现“打飞机”，骚年，来一发(上)

来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

看到标题想歪的，请先面壁三秒钟，我向来是一位严肃正经有节操的人。

话说，前段时间忽然怀念微信5.0的黑白版的飞机大战，进微信游戏大厅寻了个遍，好像找不到了，有种物是人非的赶脚。突发奇想利用业余时间用Axure打造了一个飞机大战，在空虚寂寞冷的时候可以撸一把。效果如下方左图：

一、功能描述

1. 有无限多的敌机无耻地向你扑面而来；
2. 你用键盘的方向键控制战斗机参加战斗（被敌机撞击算报废，你一共有3架战斗机）；
3. 战斗机可以源源不断地向敌机发射子弹；
4. 计分系统（打掉一架敌机得100分）；
5. 难度等级系统（打10架敌机增加一个难度等级，敌机飞行速度加快）；

因为涉及知识点比较多，又希望将他们描述清楚，所以本文只实现上方右图的效果。①让敌机循环飞行②让子弹连续发射。请基础较好的童鞋见谅。

二、素材准备

敌机.png、战斗机.png、子弹.png（为了效果好，老老实实用PS抠出2个透明背景的飞机，此处省略N个字）、拉出四个矩形用途和尺寸分别为：450*530px作为背景、2个450*42px分别作为地面和天花板、开始按钮。将敌机.png、战斗机.png、子弹.png按照下图方式打包成“战斗机+子弹”、“敌机-壳”两个动态面板。

三、构建敌机循环飞行效果

实现方法：

用一个空的动态面板命名为“循环”，协助敌机实现循环飞行。流程开始后，设置动态面板“循环”显示→“循环”显示后触发：“敌机-壳”复位：移动敌机到界面顶部绝对位置（范围内随机,0）的位置and启动飞机：相对位置移动敌机（0,1），“敌机-壳”在移动的情况下设置用例→如果“敌机-壳”撞击到地面，隐藏“循环”，“循环”隐藏后触发显示“循环”的用例→“敌机-壳”未接触到地面，则继续向下飞行，从而达到敌机飞行的循环。具体流程图如下所示：

在上述流程图中，红色的闭环促进敌机不断地继续向前飞行，蓝色的闭环促进敌机不断重现。

下面贴出“循环”和“敌机-壳”的交互用例

四、构建子弹连续射击效果

根据同样的原理，我们可以做出子弹循环向上飞行的样子。区别在于①子弹飞行的方向在纵坐标的负方向。②子弹飞行速度较快。③子弹在“子弹轨道”这个动态面板里飞行。因此子弹在移动时触发每一个移动单位是(0,-20)，子弹撞击天花板之后复位的位置是绝对位置(0,390)。具体用例不在此复述。

五、函数讲解

在上述用例中出现两处函数，在此进行简单讲解

1、敌机撞击地面后，触发“循环”对敌机进行复位的用例

[[Math.floor(Math.random()*300+80)]]

Math.random函数的作用是在[0-1]区间产生一个任意数，这个用法与该函数在Java或js里都是相通的。要函数返回指定范围的随机数(m-n之间)的公式如是：Math.random*(n-m)+m；而在本文中，我们希望敌机在[0,450]区间产生随机数，因此理论上应该是Math.random*450，其中450是背景矩形的宽度，但是由于Axure认为元件的坐标就是元件从左上角顶点的坐标，而敌机自身的宽度为72px，因此正确的表达式应该为Math.random*(450-72)，本人在试验中发现疑似由于浏览器的兼容问题，这样控制范围仍然会出现飞机飞出范围外，因此将范围进行适当缩小最终设定的公式定位文中的数据。

Math.floor是向下取整的函数，由于Math.random产生的是多位小数。因此在取整函数里嵌套一个随机函数的目的是在一定范围内产生一个随机整数，得益于这两个函数的使用，才让敌机能在不同轨道上飞行。

2、敌机正常飞行用例中的函数

[[Math.log(level)+0.5]]

写到此我居然忘了一件重要的事情，为以后完善游戏的难度系统做准备，我们应该建立两个全局变量“level”和“fighter”通过“level”的值来控制敌机飞行速度，通过“fighter”的值来检测战斗机剩余数量，从而随时判断游戏是否结束。在点击"开始游戏"的时候给"level"赋值2，给"fighter"赋值3这是初始化数据。回到函数的话题，这个函数的值最终将成为敌机在固定时间内（用例执行的时间是1ms固定不变）飞行的距离，也就是说敌机的飞行速度成正比。在本游戏中预想设定每击落10架敌机level的值加1，这样不同level下，敌机的飞行速度是成线性增长的。我们先来回顾一下中学时期学到关于对数函数和直线函数曲线的区别：

从上图不难看出，我使用对数函数的目的是为了控制敌机飞行速度的增量。拉长用户可升级的空间，增加游戏的可玩性。在Axure里[[Math.log(x)]]函数使用数学常量e作为对数的底(e约为2.71828)，因此范围的只一定为正数。但是当x比较小的时候log(x)返回的值仍然比较小这就意味着在前几个level里飞机的飞行速度非常慢，近乎龟速，用户会没耐心玩，游戏可玩性不高。这也是为什么我会在函数后面加一个常量0.5的原因。

六、写在最后

希望感兴趣的同学别心急，先按跟着本文的进展动起来，让敌机起飞，让子弹飞一会儿！后面会更精彩。

最后照旧，献上本文效果的rp源文件，需要更多沟通的童鞋，欢迎来公众号iambin找我。

作者提供源：

人人官方源：

作者：@陈滨淋，国内某知名电商公司产品总监，起点学院北京1508期优秀学员。

本文由人人都是产品经理专栏作家 @陈滨淋（微信公众号：iambin） 独家发布于人人都是产品经理 。未经人人都是产品经理许可，禁止转载。违者追究责任，谢谢合作。