偶然看到一篇关于随机数的文章,于是花了两小时的时间做了这个小游戏:石头剪刀布,回忆童年有木有,,操作和规则一样简单。建议4.7英寸屏幕以上的手机访问体验更佳,5.5英寸最佳。
更新:
- 优化首屏样式,随机动效更加nice
- 新增历史记录页面,可以查看退出游戏前的最近猜测结果,退出游戏后清空历史记录
- 更新优化逻辑,长时间玩不再使手机发烫
在线预览:
点击预览效果展示:
实现:
整个游戏主页由一个动态面板构成,一个状态存放主页内容页,一个状态下存放历史记录页。
整体流程:
整体流程十分简单,用户选择一个作为自己猜测的结果,然后后台随机生成一个结果再做一次匹配,匹配结果给出不同提示。
首页:
首页右上角为历史按钮,点击进入历史页面。图片区域为一个动态面板,包含了初始状态的图片,随机动效展示,以及点击石头、剪刀、布图标后的不同图片,其中点击剪刀和布出现的图片为本站的一个必应每日图片接口图,这两张图每天都会改变,无法直接在Axure里添加,通过修改html代码来实现。
1.石头、剪刀、布 图标
设置图标选中下的交互效果。
石头图标:
动态面板状态改变的交互说明:
return-result位于结果展示状态下接收随机的结果,sys-radom文本框值接收随机数字对应的图标,为添加到历史页面的中继器里做准备,比如随机值为1则sys-radom的值为石头图标(图标参考fontawesome)
判断随机值和选择值是否相等,如果相等显示相等信息反之显示不相等信息。
当动态面板状态为calculating时,开始随机动效。
历史页面中继器: