恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
打地鼠原型交互设计教程
0.0°
2017-11-21 原创文章 教程 举报 2293 8 3 0

如何设计一款小游戏


前一段时间,暴走大乐哥发了个《打地鼠》游戏原型,并放话说:「你尽管玩,通关算我输!」

这勾起了墨墨姐强烈的好胜心,不就是拼手速么?打开链接就是干!

Image title



然而,在玩了 20 分钟后,没通关的我向大乐哥吐槽:你这游戏也太变态了,手速完全不够。

不过大乐哥却说不少刀友们已经通关了领到了红包,差点就要破产啦!

Image title


扫码感受被地鼠支配的恐惧↑


现在大乐哥终于将这款风靡的小游戏原型制作秘方公开啦,请戳视频(声音超级好听的大乐哥亲录)




喏,文字版是这样的。


1、页面逻辑

以大乐哥的原型作为案例,我们可以从工作流看到整个游戏只有九个页面:

游戏首页、第一关倒计时、第一关游戏、第二关倒计时、第二关游戏、第三关倒计时、第三关游戏、Game Over、联系作者


Image title

工作流为墨刀自动生成

页面关系逻辑清晰,相信聪明宝宝们就不用我再赘述了。



2、制作游戏页

打地鼠相信大家都不陌生,主要是拼手速。

游戏规则是:在一定时间内,如果打到地鼠,就会出现下一个地鼠,如果没打到地鼠,就 Game Over。

在墨刀中,应用「状态」和「定时器」即可完成这样的游戏逻辑。

第一关,我们设置 10 只地鼠,加上「下一关」提示页,共 11 个页面状态,在定时器定时结束前点击地鼠即可跳转到下一个状态(下一只地鼠),若定时器结束还未点击地鼠则跳转到 Game Over 页面。

Image title


等到了第 11 个状态(下一关),则连线到第二关倒计时页面,这样一关就完成啦~

Image title


小 tip:将定时器放在「全局状态」即可将所有状态设置定时,就不用一个一个设啦~


第二关和第三关的设置也跟第一关基本一致,你只需要调整定时器的时间就好啦~

其他几个页面都不算难,相信机智的你可以自己搞定。如果你是个善良的小天使,也可以设置通关页面~

Image title

Image title



更多原型交互的课程,请扫码关注「墨刀小课堂」,用2个小时精通产品原型设计~

还是免费的吆~


Image title




Image title



更新:2017-11-21

收藏

8人已收藏

墨刀_MockingBot

在线产品设计写作一体化平台

  • 494

    作品

  • 1448

    粉丝

  • 3

    关注

  • 产品经理和设计师谈恋爱,看得我比“老坛酸菜”还酸!
  • Figma”断供“后:墨刀能为中国企业做什么?
  • 产品经理干久了,有哪些后遗症?
  • 超实用的后台原型,产品大佬的摸鱼技巧都在这里!
相关标签

    猜你喜欢

      2017-11-21 原创文章 教程 举报 2293 8 3 0

      打地鼠原型交互设计教程

      0.0°

      你确定要举报打地鼠原型交互设计教程

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年11月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      8
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录