Aure 原型教程：利用 Aure 制作剪刀石头布小游戏

2017-01-26 13:04:00

文章分享了如何利用Axure制作剪刀石头布的小游戏，与大家分享，相信大家一定会有所收获。

Axure 原型教程：利用Axure制作剪刀石头布小游戏
教你用Axure做个剪刀石头布的小游戏。
先睹为快：【点我预览】

Axure 原型教程：利用Axure制作剪刀石头布小游戏
教程开始：

第一步：整理业务需求

做个和电脑剪刀石头布的小游戏。
规则…略。
用户方，固定选择；电脑方随机。
输赢+平局，需要直观展示。

第二步：规划思路和实现方法

电脑出招》随机，需要使用随机数。
我方出招》固定值。
对比每局我方固定值和电脑随机值进行比较。
判定输赢或平局

第三步：开工

1、找素材，略。

2、axure创建游戏界面。

Axure 原型教程：利用Axure制作剪刀石头布小游戏

电脑每次只出一个，且随机，所以用动态面板控制。
判定胜负也是需要变化，所以使用动态面板。
我方，使用固定的三张图片组成。

3、编写规则逻辑

定义【剪刀=1】【石头=2】【布=3】。
电脑随机为1-3之间。
我方固定出1-3。

通过剪刀石头布的逻辑，推导判定条件的共用表达式。

电脑为1，则：

我方出1====平【1-1=0】
我方出2====赢【2-1=1】
我方出3====输【3-1=2】

电脑为2，则：

我方出1====输【1-2=-1】
我方出2====平【2-2=0】
我方出3====赢【3-2=1】

电脑出3，则：

我方出1====赢【1-3=-2】
我方出2====输【2-3=-1】
我方出3====平【3-3=0】

查看结果分布【-2,-1,0,1,2】即：【赢，输，平，赢，输】

找到规律后，我们就可以开始写逻辑了：

1、通过[[Math.ceil(Math.random()*3)]]函数，获取1-3之间的随机数，并赋值接给电脑。
2、将我方的值，减去电脑的值，进行判定。
Axure 原型教程：利用Axure制作剪刀石头布小游戏
3、设置动态面板的5个状态，分别对应5个结果。

P.S.动态面板顺序为1.2.3.4.5，没有负数，所以将结果加3以便操作。
增加诱惑点：