Axure教程:怎么制作口红机游戏

7 评论 2968 浏览 12 收藏 4 分钟

本文给大家介绍用axure制作口红机游戏,一起来看看~

原型演示地址:http://8ke4co.axshare.cn/#g=1&p=index

效果如下:

原材料:动态面板、西瓜图(圆圈)、唇膏图、背景图、挑战失败弹窗(默认隐藏)、挑战成功弹窗(默认隐藏),2个默认隐藏文本框(记录位置x和y)。

步骤1

设置西瓜图载入时的事件。

  1. 旋转西瓜,方向和速度可以自己设置
  2. 设置记录文字x文本框=唇膏1的横坐标,设置记录文字y文本框=唇膏1的纵坐标。
  3. 设置动态面板在state1和2之间不断循环。用于后续判断挑战是否成功。
  4. 禁用唇膏2-11。

步骤2

设置唇膏点击时事件:

  1. 禁用本元件,点击后不能再点。
  2. 移动该元件到西瓜的底部。
  3. 移动下一唇膏(唇膏2)到本唇膏的位置(记录x文本框和y文本框的值)。
  4. 设置等待时间=唇膏移动的时间
  5. 旋转唇膏,速度和方向和西瓜旋转一致。
  6. 启用下一唇膏。

步骤3

最后一根唇膏鼠标单击时:

  1. 禁用本元件,点击后不能再点。
  2. 移动该元件到西瓜的底部。
  3. 设置等待时间=唇膏移动的时间
  4. 旋转唇膏,速度和方向和西瓜旋转一致。
  5. 等待500毫秒。
  6. 显示挑战成功弹窗

步骤4

设置动态面板:

载入时:设置面板不断循环

状态变更时:判断唇膏1-11之间有没有是否接触,如果接触了显示挑战失败弹窗。

步骤5

设置挑战失败弹窗显示时事件:

  • 禁用所有唇膏。
  • 隐藏挑战成功弹窗下面全部元件(这样最后一根失败也不会弹出)。

原型可在axure官网下载,希望大家做出自己喜欢的原型。

 

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

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 原型预览及下载地址:https://axhub.im/pro/675e35d1196c1e47

    来自广东 回复
  2. a代表西瓜还是唇膏1

    来自广东 回复
    1. 一年前的文章我也记得不是太清楚了哈

      来自广东 回复
  3. 产品小白没看懂复杂的交互设计,想从基础开始学,却无从下手?

    可以找Axure实战班的助教小可爱@CC-起点学院(微信:qidiancc520),回复关键词:礼物

    :mrgreen: 领取原型设计大礼包,还有不定期的Axure免费视频课程分享,老师在线答疑,多学多看多思考,你也能成为Axure原型设计大牛哦~

    来自广东 回复
  4. 能否给个下载原型的详细地址呢?

    来自黑龙江 回复
  5. 能否给个下载原型的详细地址呢?

    来自广东 回复
    1. 谢谢

      来自广东 回复