Axure7.0教程:实现猜数字小游戏

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

caishuzixiaoyou

最近在学Axure,看到一篇关于数字抽奖的教程,于是在此基础上扩展了一些功能,增添了一些游戏元素,游戏规则如下:

  1. 初始金币为100,每次抽奖花费10金币
  2. 输入1位数字点击抽奖,如有1个开奖数字与输入数字相同,奖励20金币,两个相同奖励40金币,3个相同奖励60金币
  3. 金币为0,则无抽奖机会

原型效果:点我抽奖

下面简单介绍一下制作流程:

1.设置全局变量和添加元件

设置全局变量

360截图-13261114

  • suijishu:用来记录保存随机数
  • jinbi:金币数量,初始值100,每次抽奖减10
  • cishu:抽奖次数,初始值0,每次抽奖加1

添加元件及命名

360截图-21196339

  • shuru为单行文本框,设置最大文字数为1;
  • one、two、three为矩形框调整为圆形,可根据自己兴趣调整形状和填充色,设置为隐藏,单击抽奖方可显示;
  • choujiang按钮下方设置tishi,用以显示中奖、没中奖、金币用完等信息

2.添加点击事件

所有的点击事件都是基于“点击抽奖”实现,选择“choujiang”,设置鼠标单击时事件

用例1:产生随机数

设置条件为:

360截图-22251842

  1. 显示one、two、three(之前未隐藏的话不用显示)
  2. 移动第一个圆one,使其产生上下晃动效果
  3. 使用random和substring函数给全局变量suijishu赋值,使其产生0-9的随机数,并把数字赋予第一个圆one
  4. 移动第二个圆two,使其产生上下晃动效果(时间比第一个久一些)
  5. 用random和substring函数给全局变量suijishu赋值,使其产生0-9的随机数,并把数字赋予第二个圆two
  6. 移动第三个圆three,使其产生上下晃动效果(时间比第二个久一些)
  7. 用random和substring函数给全局变量suijishu赋值,使其产生0-9的随机数,并把数字赋予第三个圆three
  8. 设置变量值jinbi=jinbi-10,cishu=cishu+1
  9. 把加减后的变量值赋予元件jinbi和cishu

360截图-23284256

用例2:中奖

3个圆的中奖事件是平行且独立的,分别判断输入的数字是否与该圆赋予的随机数相同,如果相同,金币数加20,可最高累计加60。

以第一个圆的中奖事件为例:

设置条件

360截图-24112887

其中[[sr]]为局部变量,元件shuru的文字;[[one]]为局部变量,元件one的文字。

  1. 设置tishi文字为“恭喜您!中奖啦!”
  2. 设置变量值jinbi=jinbi+20
  3. 把更新后的jinbi数值显示在元件jinbi上
  4. 提示文字设置为800ms自动消失

360截图-24508225

第二个圆和第三个圆的用例和第一个类似,可直接复制修改。

用例3:没中奖

设置条件

360截图-25012435

  1. 设置tishi文字为“很遗憾!再来一次!”
  2. 左右晃动抽奖按钮
  3. 提示文字设置为800ms自动消失

360截图-25245064

用例4:金币用完

设置条件

360截图-25330584

  1. 设置tishi文字为“呜呜呜~金币用完啦~”
  2. 禁用shuru文本框,重要!(不然金币为0时可修改输入框与下方数字相同,继续游戏)

360截图-25436072

用例5:输入框为空

  1. 设置条件:如果shuru=“”
  2. 设置tishi文字为“请输入1位数字!”
  3. 左右晃动抽奖按钮
  4. 提示文字设置为800ms自动消失

360截图-25766778

3.补充说明

  • 上下左右晃动效果纯属XX,如嫌麻烦可忽略之
  • 各用例的设置条件并未详细说明原因,其实都是在做的过程中填的一个个坑
  • 周围有个小伙伴最多玩到100多次,有人打破记录吗?

 

本文由 @你猜我是谁 原创发布于人人都是产品经理。未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。
2人打赏

评论( 10

登录后参与评论
  1. 能不能给我发个H5或者原型文件,992794436@qq.com,谢谢

    回复
    1. 回复

      已发,请查收

    2. 回复

      收到,相当感谢

  2. :sad: 噢,肉,用8.0做,3个圆形后面两个会乱跳是我哪里操作错了还是版本问题呢??求看见~求回复~~谢谢~

    回复
    1. 回复

      本来设计的就是让3个都上下晃动呀,模拟一个滚动抽奖的效果,只是第一个晃动时间最短,最后一个最长,如果不想要上下晃动效果,把用例1中移动onetwothree的语句删掉就好

    2. 回复

      呃~~~我描述的有问题,是会晃动到别的位置恢复不了这样,就不是水平晃动,只有one是水平晃动,其他都跑到其他地方卡主了这样~我确认了逻辑和语句,没有发现问题,所以请教一下是不是哪里还有不对的地方~~

    3. 回复

      不是上下晃动吗,另外检查移动语句是否少一句,正负正负最后加起来应该是0的(才能保持原位置不变),实在不行就把移动语句删了吧

    4. 回复

      :oops: 刚刚重新写了移动的又可以了~应该是我哪里写错了~就抽风啦~~ :mrgreen: 感谢~~

  3. 有什么意义 费这大紧 几句话描述完了

    回复
  4. 从程序员的角度来看,代码不规范

    回复
加载中