axure8.0游戏原型案例教程:微信经典黑白打飞机大战射击游戏

2017年6月7日 阅读:632

微信中的飞机大战相信大家还记得吧?随着微信5.0版的推出,这款黑白《飞机大战》射击类游戏大火了一把。风格简约,玩法简单,射击刺激……都是这款游戏的成功之处,更是吸引了不少微信玩家。其实之前也有人已经用axure制作出这款游戏,而且引起了众多“围观者”,毕竟是第一个吃螃蟹的人,必须给作者一个赞。但是这里的《飞机大战》与之前的制作原理完全不一样,具体有哪些不一样?具体怎么制作?请往下看。

一、游戏效果图

二、设计不同点

三、游戏链接

http://weidublog.com/wp-content/case/prototyping2/201706071757/

四、玩法介绍

敌机随机从上方出现,使用鼠标前后左右随意拖拉战机,使其射击出的子弹可以击中敌机。大型敌机击中可以积200分,小型敌机击中可以积100分。战机如果与敌机撞机即爆炸消耗一条生命,总共有3条生命,用完即游戏结束。

五、整体设计

采用三个页面,开始页面——游戏页面——结束页面,其中主逻辑主要放在游戏页面。

六、素材准备

首先,要准备3种飞机,一种是战机,另外两种是敌机,每一种飞机都有自己的正常状态和爆炸状态,正常状态分别由1张图片展示,爆炸状态分别由4张图片展示,因此,每一种飞机都有5张图片;

然后,需要准备一个背景图、一颗子弹,一个飞机大战logo和两个按钮,一个按钮是开始游戏,一个按钮是重新开始;

最后,需要准备开始页面的飞机动画,有三张图片组成。

七、元件拖拉摆放

1、一个小矩形充当判断器,用来判断生命是否用完;

2、一张太空背景图片;

3、一个生命组合,由一个飞机图标和一个文本标签组成;

4、一个战斗机动态面板,有正常状态和爆炸状态两种面板状态;

5、三个敌机(大)动态面板,每一个动态面板都设有正常状态和爆炸状态两种面板状态;

6、五个敌机(小)动态面板,每一个动态面板都设有正常状态和爆炸状态两种面板状态;

7、一个子弹组合,由7个子弹图片组成;

8、一个得分组合,用来记录射击敌机的总分数。

八、初始化全局变量

主要初始化两个全局变量,一个是战机的生命数,初始化为3,一个是射击的总分数,初始化为0。

九、交互用例设计

1、为判断器添加鼠标单击时用例

当life小于等于0时,结束游戏

2、为战斗机添加载入时用例

载入时,200毫秒切换一次战斗机的面板状态,同时移动子弹1至战斗机的正前方,并且显示子弹1。

3、为战斗机添加拖动时用例

战斗机跟随着鼠标的拖动而移动,并且移动的范围控制在太空底图之内。

4、为每架敌机添加载入时用例

即载入时要移动敌机至y轴为0,x轴为随机位置。然后显示该敌机。

5、为每架敌机添加移动时用例

移动过程分击中时、撞机时、出界时和其他4中状态添加相对应的交互用例,具体的交互用例如下:

6、为每个子弹添加显示时用例

先移动自身一段距离,然后显示下一个子弹,再移动自身一段距离,最后将自己隐藏起来。

十、其他

维度君这阵子会持续更新axure游戏设计的教程,希望大家可以持续关注维度君的博客:http://weidublog.com,你们的关注就是维度君坚持的动力,谢谢~~

更多axure游戏设计教程:http://weidublog.com/index.php/2017/05/16/154/

作者:维度

转载请注明:http://weidublog.com/index.php/2017/06/07/878/

没有评论

评论已关闭。