从制作“打地鼠”小游戏,看对接客户的最后一步

产品老司机手把手教写文档,10天线上课程,零基础掌握产品经理必备7大文档撰写法。了解一下>

本文通过分享一个用Axure做打地鼠小游戏的小案例,希望大家通过这个案例能了解到:循环事件的设置方法;全局变量/局部变量的使用方法;函数公式的使用方法;事件用例的使用方法;数据传值的方法;倒计时的实现。

作为一名经常与客户打交道的设计师,是不是经常遇到下面的场景?

老板:只有两天时间,来不及开发产品去汇报了,做个原型吧

而去汇报了无数次后才发现客户都是这样的:

客户:这里为什么点不了啊?你们产品是不是有bug

我:这只是个原型……

客户:什么是原型?

我:就是假的,示意的。

客户:假的,可是这里又能点啊

我:……

所以,设计师除了要拥有深厚的设计功底、透彻的业务分析,还需要做出一份能以假乱真的原型。

毕竟,给客户汇报就是要尽量规避在沟通时可能造成障碍的问题,一分一秒都不能浪费

所以,最近一直想把这些内容进行整理,和大家分享。整理过程中,就产生了用axure做小游戏的想法,寓教于乐,这次就分享一个用Axure做打地鼠小游戏的小案例,通过这个案例能了解到:

  • 循环事件的设置方法
  • 全局变量/局部变量的使用方法
  • 函数公式的使用方法
  • 事件用例的使用方法
  • 数据传值的方法
  • 倒计时的实现

1. 梳理需求

不论是做什么产品的demo,首先需要梳理需求,梳理完需求就能了解到我们最终的成品大概是什么模样。我们梳理了本次的“打地鼠”游戏的需求如下:

核心功能:打地鼠,用户可以使用锤子击打随机钻出的地鼠。

配套功能:

  1. 分数记录:当击中地鼠后记一分;
  2. 游戏计时:限定游戏时长,到达指定时长后游戏截止;
  3. 展示最终分数:到达时长后展示用户分数;
  4. 设置用户昵称:用户能设置昵称,在游戏展示分数时显示,增强代入感。

2. 游戏流程

功能梳理完成后,下一步我们就需要把功能串联起来,制成流程,方便梳理制作思路。

从“打地鼠”看对接客户的最后一步

3. 划分页面

我们将绘制好的流程拆分成单个的页面,将功能划分至不同的页面中(画完后纵向摆放在Axure同一个页面内即可)。

页面1:起始页面

从“打地鼠”看对接客户的最后一步

页面2:游戏页面

从“打地鼠”看对接客户的最后一步

页面3:结束页面

从“打地鼠”看对接客户的最后一步

4. 添加交互事件

接下来我们就开始正菜啦,添加交互事件。

4.1 核心功能:打地鼠

从“打地鼠”页面开始设计,因为“打地鼠”是核心页面所以我们从这个页面开始,现在我们就一起分析下这个页面的交互事件:

  1. 地鼠会周期性(每0.5秒一次)从地面随机位置钻出;
  2. 锤子跟随鼠标移动;
  3. 当地鼠被锤子击中后会立即缩回底下,并从其他随机位置重新出现;
  4. 锤子击中地鼠后记一分;
  5. 限制游戏时长30s。

功能1:周期性改变地鼠位置

首先要解决的是解决周期出现的地鼠,聪明的你一定想到了Axure的自动循环器动态面板,利用自动循环切换面板实现定时切换面板状态,再利用动态面板状态改变时执行命令“改变地鼠位置”,这样就实现了地鼠随机出现的设计

(1)我们制作两张打地鼠的地图,放在一个动态面板内起名为“地鼠地图”,动态面板内的两个状态分别起名“地图1”、“地图2”,“地图1”内绘制50*50的圆形作为“地鼠1”,“地图2”内绘制50*50的圆形作为“地鼠2”(地鼠的位置随意摆放即可)。

从“打地鼠”看对接客户的最后一步

(2)给“开始游戏”按钮加上事件,单击时循环0.5s切换“地鼠地图”的面板状态,如下:

从“打地鼠”看对接客户的最后一步

(3)给“地鼠地图”加上事件,当面板状态改变时,移动地鼠至随机位置。

从“打地鼠”看对接客户的最后一步

Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值,通过Math.random()*600即是令地鼠的x与y的值在600*600的画布范围内随机出现,而“+60”则是防止x与y取值为0时,地鼠移出画板边界

功能2:设置锤子跟随鼠标移动

(1)添加动态面板“锤子”,状态1为抬起的锤子,状态2为锤下的锤子。

从“打地鼠”看对接客户的最后一步

从“打地鼠”看对接客户的最后一步

(2)给整个页面添加事件,当鼠标移动时,移动“锤子”面板至鼠标位置(减去60px是减去锤子自身的宽高)。

从“打地鼠”看对接客户的最后一步

功能3:当地鼠被锤子击中后会立即缩回底下,并从其他随机位置重新出现

(1)给锤子面板添加事件,鼠标按下时锤子变为锤下的“状态2”,鼠标释放时变为抬起的“状态1”。

从“打地鼠”看对接客户的最后一步

(2)添加设置事件,当锤下的锤子接触到任意地鼠时,执行改变“地鼠地图”面板状态,这时就会触发之前设置的“移动地鼠位置”事件,实现打中地鼠后刷新地鼠位置的功能。

从“打地鼠”看对接客户的最后一步

4.2 配套功能

至此,核心功能部分完成,接下来就完善配套功能。

功能1:分数记录

(1)首先设置一个全局变量score,初始值为0,作为储存数值功能。

从“打地鼠”看对接客户的最后一步

从“打地鼠”看对接客户的最后一步

(2)在“锤子面板”刚刚设置的打中地鼠的事件后继续追加,当锤下的锤子接触到任意地鼠时,设置变量score=[[score+1]],实现击中后数值自增1,再设置界面中分数的文本值=[[score]]。

从“打地鼠”看对接客户的最后一步

功能2:游戏计时

主要利用文本框元件的“当文字改变时”事件实现:

(1)设置文本框初始值为“时间:30s”,设置条件“当元件文字不等于时间”时,等待1秒后文本框设置值为当前文本值减一。

从“打地鼠”看对接客户的最后一步

(2)设置局部变量time用于储存数字。

从“打地鼠”看对接客户的最后一步

从“打地鼠”看对接客户的最后一步

(3)将“起始页面”与“结束页面”放在同一个动态面板,命名为“游戏遮罩”,覆盖于“游戏页面”上。

从“打地鼠”看对接客户的最后一步

(4)给“开始”按钮添加事件,鼠标单击时,设置time=30,并隐藏游戏遮罩。

从“打地鼠”看对接客户的最后一步

(5)设置当time=0时,显示“游戏遮罩”达到结束游戏的目的。

从“打地鼠”看对接客户的最后一步

功能3:展示游戏分数

当time=0时,设置“最终分数”的值等于当前score。

从“打地鼠”看对接客户的最后一步

从“打地鼠”看对接客户的最后一步

功能4:展示用户昵称

用户点击“开始”按钮时设置“昵称”的文本值等于“输入框”内的文本值。

从“打地鼠”看对接客户的最后一步

从“打地鼠”看对接客户的最后一步

4.3 其他功能

初始化数据:点击“开始”按钮时,设置分数文本等于0,设置score=0。

从“打地鼠”看对接客户的最后一步

设置“重新开始”事件:与“开始”按钮事件相同。

从“打地鼠”看对接客户的最后一步

设置“回到首页”:设置“回到首页”为切换回“起始页面”面板。

从“打地鼠”看对接客户的最后一步

至此我们完成了本个版本“打地鼠”游戏的所有功能,点击页面右上角的预览按钮,即可疯狂地play自己的“大作”。

从“打地鼠”看对接客户的最后一步

最后,将游戏内各类元素换成卡通元素即可获得一份能以假乱真的“打地鼠”小游戏,赶紧动手试试吧~

源文件地址:https://pan.baidu.com/s/1Hmn-fs8ubbGvY7Ib3tJuPA

 

作者:麋鹿,北京华宇元典高级交互设计师,微信公众号:元典UED

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

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
评论
欢迎留言讨论~!
  1. 有点厉害

    回复
    1. 谢谢

      回复