作为一名经常与客户打交道的设计师，您是否经常遇到以下场景？
老板：我只有两天时间。 现在开发产品并报告已经太晚了。 让我们制作一个原型。
经过无数次举报后，我发现客户是这样的：
顾客：为什么我不能在这里订购？ 你的产品有bug吗？
我：这只是一个原型……
客户：什么是原型？
我：那只是假的，只是一个暗示。
顾客：是假的，但是你可以在这里订购。
我：……
因此，设计师除了拥有深厚的设计功力和透彻的业务分析之外，还需要创建一个看起来真实的原型。
毕竟，向客户汇报是为了避免可能造成沟通障碍的问题，不能浪费一秒钟。
所以最近一直想把这些内容整理出来分享给大家。 在整理的过程中，我萌生了利用Axure制作一款小游戏的想法，既具有教育意义，又具有娱乐性。 这次分享一个使用Axure制作打地鼠小游戏的小案例。 通过这个案例，您可以了解到：
1. 梳理需求
无论我们演示什么产品，我们首先需要梳理需求。 梳理完需求之后，我们就可以了解我们的最终产品大概会是什么样子。 我们整理了这款“打地鼠”游戏的需求如下：
核心功能：打地鼠，用户可以用锤子敲击随机钻出的地鼠。
支持功能：
记分：击中地鼠记一分； 游戏计时：游戏时间有限，到达规定时间后游戏结束； 最终分数显示：时间到达后显示用户的分数； 设置用户昵称：用户可以设置昵称，并在游戏中及时显示得分，增强沉浸感。 2. 游戏流程
功能梳理好后，下一步就是将功能连接在一起，创建流程，方便梳理生产思路。
3. 分页
我们将绘制的流程拆分为单独的页面，并将功能划分为不同的页面（绘制后，将它们垂直放置在Axure的同一页面上即可）。
第 1 页：起始页
第2页：游戏页面
第 3 页：结束页
4.添加互动事件
接下来我们开始做正事，添加互动事件。
4.1 核心功能：打地鼠
从“打地鼠”页面开始设计。 因为“打地鼠”是核心页面，所以我们就从这个页面开始。 现在我们一起来分析一下这个页面的交互事件：
鼹鼠会周期性地（每 0.5 秒一次）从地面上的随机位置出现； 锤子跟随鼠标移动； 鼹鼠被锤子击中后会立即缩回下方，并从另一个随机位置重新出现； 锤子击中地鼠的后果一分； 将游戏时间限制在 30 秒。
功能一：周期性改变地鼠位置
首先要解决的是解决仓鼠周期性出现的问题。 如果你聪明的话，你一定想到了Axure的自动循环仪动态面板。 使用自动循环切换面板定时切换面板状态，然后在状态变化时使用动态面板状态执行“换仓鼠”命令。 Position”，从而实现了地鼠随机外观的设计。
(1) 我们制作两张打地鼠地图并将它们放置在名为“Mole Map”的动态面板中。 动态面板中的两个状态分别命名为“地图1”、“地图2”和“地图1”。 在“地图2”中画一个50*50的圆圈作为“戈尔斯特1”，在“地图2”中画一个50*50的圆圈作为“戈尔斯特2”（痣的位置可以随意放置）。
（2）为“开始游戏”按钮添加事件，点击时循环0.5s切换“地鼠地图”面板状态，如下：
（3）在“Gole Map”中添加一个事件，当面板状态发生变化时，将仓鼠移动到随机位置。
Math.random允许系统随机选择一个大于或等于0.0且小于1.0的伪随机双精度值。 使用Math.random*600表示地鼠的x和y值在600*600的画布范围内随机出现，“+60”是为了防止地鼠移动到画板边界之外当x和y的值为0时。
功能2：设置锤子跟随鼠标移动
(1)添加动态面板“锤子”3D动画，状态1为锤子抬起，状态2为锤子落下。
(2)向整个页面添加事件。 当鼠标移动时，将“锤子”面板移动到鼠标位置（负60px就是减去锤子本身的宽度和高度）。
功能三：被锤子击中后，地鼠会立即缩回下方打地鼠游戏设计，并从其他随机位置重新出现。
(1) 在锤子面板中添加事件。 当按下鼠标时，锤子变为“状态2”，即锤子按下，当释放鼠标时，则变为“状态1”。
(2)添加设置事件。 当锤子接触到任何地鼠时，“戈尔地图”面板的状态就会改变。 此时就会触发之前设置的“移动地鼠位置”事件打地鼠游戏设计，实现击中地鼠。 稍后刷新地鼠位置的功能。
4.2 支持功能
至此，核心功能已经部分完成，接下来将完善支撑功能。
功能一：乐谱记录
(1)首先设置一个全局变量score，初始值为0，作为存储数值的函数。
（2）在“锤子面板”中刚刚设置的击中仓鼠事件后继续添加。 当锤子下的锤子碰到任意仓鼠时，设置变量score=[[score+1]]即可实现击中后的值。 加1，然后设置界面中分数的文本值=[[score]]。
功能2：游戏计时
主要利用文本框组件的“当文本改变时”事件来实现：
（1）设置文本框初始值为“时间：30s”，设置条件“当组件文本不等于时间”。 等待1秒后，文本框设置值为当前文本值减1。
(2) 设置局部变量time来存储数字。
(3) 将“起始页”和“结束页”放在同一个动态面板中，命名为“游戏蒙版”，并将其覆盖在“游戏页”上。
(4)向“开始”按钮添加事件。 当鼠标点击时，设置time=30并隐藏游戏遮罩。
(5) 设置当time=0时，显示“游戏掩码”，结束游戏。
功能三：显示游戏得分
当time=0时，将“最终得分”的值设置为等于当前得分。
功能四：显示用户昵称
当用户单击“开始”按钮时3D交通工具，将“昵称”的文本值设置为等于“输入框”中的文本值。
4.3 其他功能
初始化数据：点击“开始”按钮时，将分数文本设置为0，并设置score=0。
设置“重新启动”事件：与“开始”按钮事件相同。
设置“返回主页”：设置“返回主页”可切换回“起始页”面板。
至此，我们就完成了该版本《打地鼠》游戏的所有功能。 点击页面右上角的预览按钮，疯狂播放你的“杰作”。
最后，通过用卡通元素替换游戏中的各种元素，你就可以得到一个看起来像真实的“打地鼠”小游戏。 赶快来尝试一下吧~
源文件地址：
文章来源:https://blog.csdn.net/weixin_39673293/article/details/110835691
