一个Axure小游戏…

发布于 / 教程 / 34 条评论

偶然看到一篇关于随机数的文章,于是花了两小时的时间做了这个小游戏:石头剪刀布,回忆童年有木有,,操作和规则一样简单。建议4.7英寸屏幕以上的手机访问体验更佳,5.5英寸最佳。

shitoujiandaobu

更新:

  1. 优化首屏样式,随机动效更加nice
  2. 新增历史记录页面,可以查看退出游戏前的最近猜测结果,退出游戏后清空历史记录
  3. 更新优化逻辑,长时间玩不再使手机发烫

在线预览:

点击预览

效果展示:

game-shitou-jiandao-bu
game-shitou-jiandao-bu

实现:


整个游戏主页由一个动态面板构成,一个状态存放主页内容页,一个状态下存放历史记录页。
shitoujiandaobu

整体流程:

整体流程十分简单,用户选择一个作为自己猜测的结果,然后后台随机生成一个结果再做一次匹配,匹配结果给出不同提示。
shitoujiandaobuflow
全局变量:
shitoujiandaobuflow

首页:

首页右上角为历史按钮,点击进入历史页面。图片区域为一个动态面板,包含了初始状态的图片,随机动效展示,以及点击石头、剪刀、布图标后的不同图片,其中点击剪刀和布出现的图片为本站的一个必应每日图片接口图,这两张图每天都会改变,无法直接在Axure里添加,通过修改html代码来实现。
shitjiandaobu
1.石头、剪刀、布 图标
设置图标选中下的交互效果。
石头图标:
delehistory
剪刀图标:
delehistory
布图标:
delehistory
点击图标改变图片区域面板状态,选中当前图标,记录当前值(设置文本框值为:图标【本站使用fontawesome字体,所以值可以直接记录为三个图标】;全局变量choosed=1,选中剪刀布分别设置为2,3),显示选中的结果(文本标签cd为显示结果)
此动作是停止随机动效,如果不设置就会在完成一次猜测后随机动效继续执行,消耗设备资源导致发热发烫…

2.图片动态面板区
6个状态:
null:初始图片
calculating:随机动效
result:随机后匹配选择的结果展示
b1:点击石头显示的图片
b2:点击剪刀显示的图片
b3:点击布显示的图片
images
动态面板状态改变的交互说明:
return-result位于结果展示状态下接收随机的结果,sys-radom文本框值接收随机数字对应的图标,为添加到历史页面的中继器里做准备,比如随机值为1则sys-radom的值为石头图标(图标参考fontawesome)
判断随机值和选择值是否相等,如果相等显示相等信息反之显示不相等信息。
当动态面板状态为calculating时,开始随机动效。
images
3.猜一猜按钮
没有点击任何图标下点击当前按钮弹出错误提示框
images
点击任何一个结果图标后点击当前按钮触发图片轮播图向上滑动到随机动效图状态,设置并生成一个随机值:random=[[Math.floor(Math.random()*3+1)]]
等待一秒后切换图片区动态面板为结果状态
images
给历史记录页面中继器添加一行,记录本次猜的结果与随机值
中继器添加筛选使得数据新的数据展示在最上方
radom
历史页面中继器:
shitoujiandaobuflow

历史记录页面:

点击清空显示确认弹窗
确定按钮交互:标记中继器全部内容,删除已标记的内容,隐藏弹窗
delehistory

温馨提示 :附件解压密码需评论本文后才能查看,评论成功后刷新页面密码自动显示,评论是否成功以邮件通知为准。


转载原创文章请注明,转载自: LYLARES'S BLOG » 一个Axure小游戏…

  1. avatar

    佩服,等待密码中,谢谢~

  2. avatar

    厉害

  3. avatar

    没做出来,要个大神的密码

  4. avatar

    厉害的

  5. avatar

    LZ,密码不是你评论写的那两个啊,评论了也没找到诶

    1. avatar
      @jaems48 刷新页面在文章末尾可以看到的。
      1. avatar
        @lylares 好的看到了,感谢
  6. avatar

    刷新页面也没找到诶

  7. avatar

    你好,解压密码不对呀,

    1. avatar
      @123 刷新页面就可以看到了
  8. avatar

  9. avatar

    厉害

  10. avatar

    很厉害

  11. avatar

    厉害啊

  12. avatar

    挺厉害的

  13. avatar

    啊是真的厉害啊楼主

  14. avatar

    谢谢

  15. avatar

    挺不错的学习的样例

  16. avatar

    可以给我邮箱发一份儿吗

    1. avatar
      @hui 文章后面有下载链接
      1. avatar
        @lylares 可是解压需要密码啊
        1. avatar
          @hui 密码上面有啊,没仔细看吧,https://www.lylares.com 要么是lylares.com
          1. avatar
            @lylares 谢谢!
            1. avatar
              @hui 不客气,你是从哪里来找到这个的啊,是自己搜索进来的吗。
  17. avatar

    请问解压密码是多少?

    1. avatar
      @Ryan
      
      lylares.com 你看对不,要不然就是https://www.lylares.com
      
      1. avatar
        @lylares 不对啊 看评论的时候已经试过了
  18. avatar

    请问解压密码是多少

    1. avatar
      @Zhaozy 你试试:https://www.lylares.com
      1. avatar
        @lylares ok了 谢谢lz
  19. avatar

    怎么才能下载呀

    1. avatar
      @jie 你好,我将把文件发到你的邮箱。
  20. avatar

    右上角这个音乐播放器简直大赞啊,有相关教程吗?

    1. avatar
      @龙笑天 这个是主题自带的播放器哈