您的位置:首頁 > 國內新聞

從制作“打地鼠”小游戲,看對接客戶的最后一步

時間:2019-08-29

  本文通過分享一個用Axure做打地鼠小游戲的小案例,希望大家通過這個案例能了解到:循環事件的設置方法;全局變量/局部變量的使用方法;函數公式的使用方法;事件用例的使用方法;數據傳值的方法;倒計時的實現。

  

  作為一名經常與客戶打交道的設計師,是不是經常遇到下面的場景?

  老板:只有兩天時間,來不及開發產品去匯報了,做個原型吧

  而去匯報了無數次后才發現客戶都是這樣的:

  客戶:這里為什么點不了???你們產品是不是有bug

  我:這只是個原型……

  客戶:什么是原型?

  我:就是假的,示意的。

  客戶:假的,可是這里又能點啊

  我:……

  所以,設計師除了要擁有深厚的設計功底、透徹的業務分析,還需要做出一份能以假亂真的原型。

  畢竟,給客戶匯報就是要盡量規避在溝通時可能造成障礙的問題,一分一秒都不能浪費

  所以,最近一直想把這些內容進行整理,和大家分享。整理過程中,就產生了用axure做小游戲的想法,寓教于樂,這次就分享一個用Axure做打地鼠小游戲的小案例,通過這個案例能了解到:

  循環事件的設置方法全局變量/局部變量的使用方法函數公式的使用方法事件用例的使用方法數據傳值的方法倒計時的實現

  1. 梳理需求

  不論是做什么產品的demo,首先需要梳理需求,梳理完需求就能了解到我們最終的成品大概是什么模樣。我們梳理了本次的“打地鼠”游戲的需求如下:

  核心功能:打地鼠,用戶可以使用錘子擊打隨機鉆出的地鼠。

  配套功能:

  分數記錄:當擊中地鼠后記一分;游戲計時:限定游戲時長,到達指定時長后游戲截止;展示最終分數:到達時長后展示用戶分數;設置用戶昵稱:用戶能設置昵稱,在游戲展示分數時顯示,增強代入感。

  2. 游戲流程

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

  

  3. 劃分頁面

  我們將繪制好的流程拆分成單個的頁面,將功能劃分至不同的頁面中(畫完后縱向擺放在Axure同一個頁面內即可)。

  頁面1:起始頁面

  

  頁面2:游戲頁面

  

  頁面3:結束頁面

  

  4. 添加交互事件

  接下來我們就開始正菜啦,添加交互事件。

  4.1 核心功能:打地鼠

  從“打地鼠”頁面開始設計,因為“打地鼠”是核心頁面所以我們從這個頁面開始,現在我們就一起分析下這個頁面的交互事件:

  地鼠會周期性(每0.5秒一次)從地面隨機位置鉆出;錘子跟隨鼠標移動;當地鼠被錘子擊中后會立即縮回底下,并從其他隨機位置重新出現;錘子擊中地鼠后記一分;限制游戲時長30s。

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

  首先要解決的是解決周期出現的地鼠,聰明的你一定想到了Axure的自動循環器動態面板,利用自動循環切換面板實現定時切換面板狀態,再利用動態面板狀態改變時執行命令“改變地鼠位置”,這樣就實現了地鼠隨機出現的設計

 ?。?)我們制作兩張打地鼠的地圖,放在一個動態面板內起名為“地鼠地圖”,動態面板內的兩個狀態分別起名“地圖1”、“地圖2”,“地圖1”內繪制50*50的圓形作為“地鼠1”,“地圖2”內繪制50*50的圓形作為“地鼠2”(地鼠的位置隨意擺放即可)。

  

 ?。?)給“開始游戲”按鈕加上事件,單擊時循環0.5s切換“地鼠地圖”的面板狀態,如下:

  

 ?。?)給“地鼠地圖”加上事件,當面板狀態改變時,移動地鼠至隨機位置。

  

  Math.random是令系統隨機選取大于等于 0.0 且小于 1.0 的偽隨機 double 值,通過Math.random*600即是令地鼠的x與y的值在600*600的畫布范圍內隨機出現,而“+60”則是防止x與y取值為0時,地鼠移出畫板邊界

  功能2:設置錘子跟隨鼠標移動

 ?。?)添加動態面板“錘子”,狀態1為抬起的錘子,狀態2為錘下的錘子。

  

 ?。?)給整個頁面添加事件,當鼠標移動時,移動“錘子”面板至鼠標位置(減去60px是減去錘子自身的寬高)。

  

  功能3:當地鼠被錘子擊中后會立即縮回底下,并從其他隨機位置重新出現

 ?。?)給錘子面板添加事件,鼠標按下時錘子變為錘下的“狀態2”,鼠標釋放時變為抬起的“狀態1”。

  

 ?。?)添加設置事件,當錘下的錘子接觸到任意地鼠時,執行改變“地鼠地圖”面板狀態,這時就會觸發之前設置的“移動地鼠位置”事件,實現打中地鼠后刷新地鼠位置的功能。

  

  4.2 配套功能

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

  功能1:分數記錄

 ?。?)首先設置一個全局變量score,初始值為0,作為儲存數值功能。

  

 ?。?)在“錘子面板”剛剛設置的打中地鼠的事件后繼續追加,當錘下的錘子接觸到任意地鼠時,設置變量score=[[score+1]],實現擊中后數值自增1,再設置界面中分數的文本值=[[score]]。

  

  功能2:游戲計時

  主要利用文本框元件的“當文字改變時”事件實現:

件“當元件文字不等于時間”時,等待1秒后文本框設置值為當前文本值減一。

  

 ?。?)設置局部變量time用于儲存數字。

  

 ?。?)將“起始頁面”與“結束頁面”放在同一個動態面板,命名為“游戲遮罩”,覆蓋于“游戲頁面”上。

  

 ?。?)給“開始”按鈕添加事件,鼠標單擊時,設置time=30,并隱藏游戲遮罩。

  

 ?。?)設置當time=0時,顯示“游戲遮罩”達到結束游戲的目的。

  

  功能3:展示游戲分數

  當time=0時,設置“最終分數”的值等于當前score。

  

  功能4:展示用戶昵稱

  用戶點擊“開始”按鈕時設置“昵稱”的文本值等于“輸入框”內的文本值。

  

  4.3 其他功能

  初始化數據:點擊“開始”按鈕時,設置分數文本等于0,設置score=0。

  

  設置“重新開始”事件:與“開始”按鈕事件相同。

  

  設置“回到首頁”:設置“回到首頁”為切換回“起始頁面”面板。

  

  至此我們完成了本個版本“打地鼠”游戲的所有功能,點擊頁面右上角的預覽按鈕,即可瘋狂地play自己的“大作”。

  

  最后,將游戲內各類元素換成卡通元素即可獲得一份能以假亂真的“打地鼠”小游戲,趕緊動手試試吧~

  源文件地址:

  作者:麋鹿,北京華宇元典高級交互設計師,微信公眾號:元典UED

  本文由

  • 友情鏈接:
  • 萬家新聞網 版權所有? www.salemonice.com 技術支持:萬家新聞網| 網站地圖

    延边| 娄底| 乳山| 沛县| 黑龙江哈尔滨| 巴中| 四川成都| 东莞| 朔州| 昭通| 晋中| 赤峰| 河南郑州| 江苏苏州| 哈密| 三门峡| 如皋| 平顶山| 高密| 天水| 海拉尔| 十堰| 娄底| 铁岭| 丽水| 安庆| 宜春| 定西| 衢州| 洛阳| 乳山| 徐州| 咸阳| 芜湖| 温州| 塔城| 忻州| 黑龙江哈尔滨| 昭通| 迁安市| 牡丹江| 克孜勒苏| 嘉兴| 东阳| 辽阳| 宁波| 莒县| 铜陵| 台北| 扬中| 如东| 石狮| 晋城| 厦门| 景德镇| 三明| 黔东南| 保亭| 宣城| 安徽合肥| 宝应县| 徐州| 三门峡| 阜新| 温州| 中山| 七台河| 大连| 遵义| 贵州贵阳| 南平| 南充| 肥城| 漯河| 鸡西| 台中| 丹阳| 白城| 湘西| 鄂州| 任丘| 广元| 抚州| 安吉| 石狮| 盐城| 阿拉尔| 德宏| 衡水| 红河| 灌云| 诸城| 泸州| 黑河| 江苏苏州| 赣州| 高密| 晋城| 海拉尔| 聊城| 四平| 桐乡| 白城| 廊坊| 株洲| 怀化| 辽阳| 如东| 和县| 台州| 仁怀| 日照| 吉安| 枣庄| 玉树| 邹平| 库尔勒| 三沙| 南充| 焦作| 邹城| 南充| 娄底| 项城| 乌海| 莱州| 邢台| 仁怀| 河源| 许昌| 文山| 揭阳| 阜阳| 七台河| 哈密| 涿州| 白城| 长垣| 徐州| 五家渠| 龙岩| 汕头| 台湾台湾| 日喀则| 广安| 琼海| 林芝| 昆山| 盐城| 崇左| 日照| 日照| 永新| 云南昆明| 七台河| 三明| 漳州| 余姚| 和县| 乐清| 肇庆| 湘西| 永州| 山西太原| 贵州贵阳| 文昌| 昭通| 沭阳| 三河| 黄冈| 信阳| 西藏拉萨| 咸阳| 伊犁| 和田| 焦作| 昆山| 庆阳| 雄安新区| 桓台| 芜湖| 黔南| 绵阳| 滕州| 唐山| 通化| 泰州| 阳江| 嘉善| 临猗| 玉树| 新余| 运城| 普洱| 赤峰| 临海| 辽宁沈阳| 大丰| 迁安市| 长治| 徐州| 吉林长春| 鸡西| 包头| 灵宝| 广安| 德阳| 鄂州| 诸城| 灌云| 慈溪| 丽水| 邹城| 神木| 咸宁| 潜江| 神农架| 四川成都| 曲靖| 沧州| 博尔塔拉| 吕梁| 单县| 肥城| 巴中| 大兴安岭| 武夷山| 抚顺| 乳山| 醴陵| 湖南长沙| 广安| 无锡| 韶关| 泉州| 蚌埠| 定州| 台中| 中卫| 乌兰察布| 丹阳| 攀枝花| 潍坊| 惠东| 武夷山| 泗洪| 昌吉| 蚌埠| 如皋| 天门| 随州| 唐山| 徐州| 寿光| 济南| 广西南宁| 孝感| 瑞安| 九江| 黔东南| 漳州| 贵港| 柳州| 青海西宁| 淄博| 海东| 淮南| 梧州| 温州| 白银| 大连| 山南| 禹州| 和县| 顺德| 聊城| 达州| 昌吉| 澄迈| 溧阳| 许昌| 汉中| 鹤壁| 沧州| 无锡| 香港香港| 白山| 东方| 宜春| 鹤岗| 许昌| 盘锦| 和县| 定西| 菏泽| 肇庆| 眉山| 泉州| 桐城| 云浮|