快好知 kuaihz

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

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

教你用Axure做个剪刀石头布的小游戏。

先睹为快:【点我预览】

教程开始:

第一步:整理业务需求

做个和电脑剪刀石头布的小游戏。

规则…略。

用户方,固定选择;电脑方随机。

输赢+平局,需要直观展示。

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

电脑出招》随机,需要使用随机数。

方出招》固定值。

对比每局我方固定值和电脑随机值进行比较。

判定输赢或平局

第三步:开工

1、找素材,略。

2、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、将我方的值,减去电脑的值,进行判定。

3、设置动态面板的5个状态,分别对应5个结果。

P.S.动态面板顺序为1.2.3.4.5,没有负数,所以将结果加3以便操作。

增加诱惑点:

完成8次连胜,有福利,加油加油~~,至于有没有福利,就看能不能连赢八局了!瞄·~

内容下载地址:

作者链接:http://pan.baidu.com/s/1qYCUuBy 密码: vdt7

在线预览:http://t9ymya.axshare.com/auto.html

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:Axure  Axure词条  原型  原型词条  剪刀  剪刀词条  小游戏  小游戏词条  石头  石头词条  
原型

 9000字完整案例,模拟拼多多A...

网络上的教程都是关于Axure的某个功能,或者基于某个实现方法而进行解释的。但作者更希望,是从头到尾打造一个完整的应用,而从中学习到Axure的使用与方法。Ax...(展开)

原型

 Axure交互原型设计:动态面板...

动态面板的功能很强大,了解了动态面板的原理,便可以运用自如。在目前的工作中,我把经常使用动态面板制作的交互总结了一下,希望与大家讨论并分享。动态面板在交互中常常...(展开)

原型

 Axure教程:如何制作可视化图...

产品经理日常工作中,避免不了需要去设计后台,在后台中需要去实现一些可视化的图表,那么这些可视化图表如何制作呢?产品经理日常工作中,避免不了需要去设计后台,在后台...(展开)