百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

Axure实现石头剪刀布小游戏 石头剪刀布的手机游戏

yuyutoo 2024-10-12 01:15 6 浏览 0 评论

偶然看到一篇关于随机数的文章，于是花了两小时的时间做了这个小游戏：石头剪刀布，回忆童年有木有？游戏的实现逻辑和操作一样简单。等不及了，先围观下效果吧：

实现：

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

整体流程：

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

全局变量：

首页：

首页右上角为历史按钮，点击进入历史页面。

图片区域为一个动态面板，包含了初始状态的图片，随机动效展示，以及点击石头、剪刀、布图标后的不同图片，其中点击剪刀和布出现的图片为本站的一个必应每日图片接口图，这两张图每天都会改变，无法直接在Axure里添加，通过修改html代码来实现。

1. 石头、剪刀、布 图标

设置图标选中下的交互效果。

石头图标：

剪刀图标：

布图标：

点击图标改变图片区域面板状态,选中当前图标，记录当前值（设置文本框值为：图标【本站使用fontawesome字体，所以值可以直接记录为三个图标】；全局变量choosed=1,选中剪刀布分别设置为2,3），显示选中的结果（文本标签cd为显示结果） 此动作是停止随机动效，如果不设置就会在完成一次猜测后随机动效继续执行，消耗设备资源导致发热发烫…

2. 图片动态面板区

共6个状态：

  1. null：初始图片
  2. calculating：随机动效
  3. result：随机后匹配选择的结果展示
  4. b1：点击石头显示的图片
  5. b2：点击剪刀显示的图片
  6. b3：点击布显示的图片

动态面板状态改变的交互说明：

return-result位于结果展示状态下接收随机的结果，sys-radom文本框值接收随机数字对应的图标，为添加到历史页面的中继器里做准备，比如随机值为1则sys-radom的值为石头图标（图标参考fontawesome）

判断随机值和选择值是否相等，如果相等显示相等信息反之显示不相等信息。

当动态面板状态为calculating时，开始随机动效。

3. 猜一猜按钮

没有点击任何图标下点击当前按钮弹出错误提示框

点击任何一个结果图标后点击当前按钮触发图片轮播图向上滑动到随机动效图状态，设置并生成一个随机值：

random=[[Math.floor(Math.random()*3+1)]]

等待一秒后切换图片区动态面板为结果状态

给历史记录页面中继器添加一行，记录本次猜的结果与随机值

中继器添加筛选使得数据新的数据展示在最上方

历史页面中继器设置：

历史记录页面：

点击清空显示确认弹窗

确定按钮交互：标记中继器全部内容，删除已标记的内容，隐藏弹窗

源rp文件下载：https://www.lylares.com/shitou-jiandao-bu.html

本文由 @小白不吃菜 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Pexels，基于 CC0 协议

相关推荐

苹果要求全新App开发四月起必须支持“齐刘海”

今日消息，苹果公司通过邮件告知应用程序开发者，从2018年4月起提交给AppStore的所有新应用必须支持iPhoneX的超级视网膜显示器。这意味着新应用程序的开发者必须确保它们适应“齐刘海”，并...

耗时一年多，QEMU开发者成功在电脑上模拟了初版iPhone OS

IT之家12月24日消息，用户通过黑苹果（Hackintosh）工具，已经可以在非Mac设备上运行macOS系统。但由于种种限制，至今也没有多少人能够在PC上运行iOS系统。现...

下个月的WWDC后，苹果将发布原生Watch SDK测试版本

在近日Re/code举办的CodeConference上，苹果的运营副总裁JeffWilliams称，目前有4000多个AppleWatch应用上线，而未来的苹果表开发者套件，将允许开发者直接获...

苹果再次提醒:4月起强制要求APP进行适配

点击右上角关注我们，每天给您带来最新最潮的科技资讯，让您足不出户也知道科技圈大事！软件适配对于许多厂商来说都是一个比较头疼的事，苹果在握紧AppStore审核权的情况下情况要好许多。最近他们公布了...

苹果Xcode 16首个Beta版发布，AI代码补全最少需16GB内存

IT之家6月12日消息，在苹果WWDC24开发者大会上，苹果发布了iOS18、macOS15Sequoia等最新版本系统更新。与此同时，苹果推出了Xcode16开发工具的首...

传苹果已向特定开发者开放iWatch SDK

|责编：薄志强苹果会不会在这次发布会中发布全新的智能手表产品iWatch还很难说，不少人认为由于iWatch的消息少之又少，很可能这次还是没有iWatch。不过现在又有外媒传出消息称，苹果已经选定了...

苹果发布Swift 6语言:引入新测试框架、增强C++ 互操作性

IT之家9月20日消息，科技媒体devclass昨日（9月19日）报道，苹果公司在发布iOS/iPadOS18和macOS15Sequoia系统之外，还发布了Sw...

发布Siri SDK 之前苹果还是先想想这个问题

今年的GoogleI/O大会上，在预览GoogleHome时，我们就看到了设备可以互相对话的场景是多么惊艳，苹果快点跟上吧。最近因为亚马逊Echo和谷歌GoogleHome的火热...

iOS 17.2 SDK代码确认古尔曼爆料:免开箱更新苹果iPhone系统

IT之家10月27日消息，彭博社的马克古尔曼（MarkGurman）本月早些时候发布报道，称苹果正在研发新的系统，可以让员工在不拆开包装的情况下，升级iPhone的iOS系统。根据国...

《企业应用架构模式》之事件驱动架构

事件驱动架构(Event-DrivenArchitecture,EDA)是一种强调事件流和异步通信的应用程序架构。在该架构中，应用程序被分解为多个小型、可独立部署的组件，这些组件通过事件进行通信...

k8s中常用的controller以及用途和对应机制

controller的用途ReplicaSet、Deployment、StatefulSet：用于无状态和有状态应用的副本管理。DaemonSet：确保每个节点上都运行一个副本的控制器。...

Disruptor框架源码阅读-如何不重复消费

RingBuffer如何保证数据不丢失由于ringbuffer是一个环形的队列，那么生产者和消费者在遍历这个队列的时候，如何制衡呢？1、生产快，消费慢，数据丢失？生产者速度过快，导致一个对象还没消...

C# 控制电脑睡眠，休眠，关机以及唤醒

最近碰到一个关于芯片测试过程中的问题，这颗芯片是用在笔记本端口上，笔记本客户那边会有一个压力测试，就是频繁的电脑电源状态切换，S0(正常使用的开机状态),S3（睡眠模式）,S4（休眠模式）以及S5（关...

大厂防止超卖的7种实现，很受用!（大厂防止超卖的7种实现,很受用的产品）

高并发场景在现场的日常工作中很常见，特别是在互联网公司中，这篇文章就来通过秒杀商品来模拟高并发的场景。本文环境：...

臻识车牌识别配制MQTT通讯，解析车号

在物联网项目中，我们的软件与车牌识别通讯，通常使用MQTT通讯更简单。...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表