中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文通過分享一個(gè)用Axure做打地鼠小游戲的小案例，希望大家通過這個(gè)案例能了解到：循環(huán)事件的設(shè)置方法；全局變量/局部變量的使用方法；函數(shù)公式的使用方法；事件用例的使用方法；數(shù)據(jù)傳值的方法；倒計(jì)時(shí)的實(shí)現(xiàn)。

作為一名經(jīng)常與客戶打交道的設(shè)計(jì)師，是不是經(jīng)常遇到下面的場(chǎng)景？

老板：只有兩天時(shí)間，來不及開發(fā)產(chǎn)品去匯報(bào)了，做個(gè)原型吧

而去匯報(bào)了無數(shù)次后才發(fā)現(xiàn)客戶都是這樣的：

客戶：這里為什么點(diǎn)不了??？你們產(chǎn)品是不是有bug

我：這只是個(gè)原型……

客戶：什么是原型？

我：就是假的，示意的。

客戶：假的，可是這里又能點(diǎn)啊

我：……

所以，設(shè)計(jì)師除了要擁有深厚的設(shè)計(jì)功底、透徹的業(yè)務(wù)分析，還需要做出一份能以假亂真的原型。

畢竟，給客戶匯報(bào)就是要盡量規(guī)避在溝通時(shí)可能造成障礙的問題，一分一秒都不能浪費(fèi)

所以，最近一直想把這些內(nèi)容進(jìn)行整理，和大家分享。整理過程中，就產(chǎn)生了用axure做小游戲的想法，寓教于樂，這次就分享一個(gè)用Axure做打地鼠小游戲的小案例，通過這個(gè)案例能了解到：

• 循環(huán)事件的設(shè)置方法
• 全局變量/局部變量的使用方法
• 函數(shù)公式的使用方法
• 事件用例的使用方法
• 數(shù)據(jù)傳值的方法
• 倒計(jì)時(shí)的實(shí)現(xiàn)

1. 梳理需求

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

核心功能：打地鼠，用戶可以使用錘子擊打隨機(jī)鉆出的地鼠。

配套功能：

1. 分?jǐn)?shù)記錄：當(dāng)擊中地鼠后記一分；
2. 游戲計(jì)時(shí)：限定游戲時(shí)長(zhǎng)，到達(dá)指定時(shí)長(zhǎng)后游戲截止；
3. 展示最終分?jǐn)?shù)：到達(dá)時(shí)長(zhǎng)后展示用戶分?jǐn)?shù)；
4. 設(shè)置用戶昵稱：用戶能設(shè)置昵稱，在游戲展示分?jǐn)?shù)時(shí)顯示，增強(qiáng)代入感。

2. 游戲流程

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

3. 劃分頁(yè)面

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

頁(yè)面1：起始頁(yè)面

頁(yè)面2：游戲頁(yè)面

頁(yè)面3：結(jié)束頁(yè)面

4. 添加交互事件

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

4.1 核心功能：打地鼠

從“打地鼠”頁(yè)面開始設(shè)計(jì)，因?yàn)椤按虻厥蟆笔呛诵捻?yè)面所以我們從這個(gè)頁(yè)面開始，現(xiàn)在我們就一起分析下這個(gè)頁(yè)面的交互事件：

1. 地鼠會(huì)周期性（每0.5秒一次）從地面隨機(jī)位置鉆出；
2. 錘子跟隨鼠標(biāo)移動(dòng)；
3. 當(dāng)?shù)厥蟊诲N子擊中后會(huì)立即縮回底下，并從其他隨機(jī)位置重新出現(xiàn)；
4. 錘子擊中地鼠后記一分；
5. 限制游戲時(shí)長(zhǎng)30s。

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

首先要解決的是解決周期出現(xiàn)的地鼠，聰明的你一定想到了Axure的自動(dòng)循環(huán)器動(dòng)態(tài)面板，利用自動(dòng)循環(huán)切換面板實(shí)現(xiàn)定時(shí)切換面板狀態(tài)，再利用動(dòng)態(tài)面板狀態(tài)改變時(shí)執(zhí)行命令“改變地鼠位置”，這樣就實(shí)現(xiàn)了地鼠隨機(jī)出現(xiàn)的設(shè)計(jì)

（1）我們制作兩張打地鼠的地圖，放在一個(gè)動(dòng)態(tài)面板內(nèi)起名為“地鼠地圖”，動(dòng)態(tài)面板內(nèi)的兩個(gè)狀態(tài)分別起名“地圖1”、“地圖2”，“地圖1”內(nèi)繪制50*50的圓形作為“地鼠1”，“地圖2”內(nèi)繪制50*50的圓形作為“地鼠2”（地鼠的位置隨意擺放即可）。

（2）給“開始游戲”按鈕加上事件，單擊時(shí)循環(huán)0.5s切換“地鼠地圖”的面板狀態(tài)，如下：

（3）給“地鼠地圖”加上事件，當(dāng)面板狀態(tài)改變時(shí)，移動(dòng)地鼠至隨機(jī)位置。

Math.random()是令系統(tǒng)隨機(jī)選取大于等于 0.0 且小于 1.0 的偽隨機(jī) double 值，通過Math.random()*600即是令地鼠的x與y的值在600*600的畫布范圍內(nèi)隨機(jī)出現(xiàn)，而“+60”則是防止x與y取值為0時(shí)，地鼠移出畫板邊界

功能2：設(shè)置錘子跟隨鼠標(biāo)移動(dòng)

（1）添加動(dòng)態(tài)面板“錘子”，狀態(tài)1為抬起的錘子，狀態(tài)2為錘下的錘子。

（2）給整個(gè)頁(yè)面添加事件，當(dāng)鼠標(biāo)移動(dòng)時(shí)，移動(dòng)“錘子”面板至鼠標(biāo)位置（減去60px是減去錘子自身的寬高）。

功能3：當(dāng)?shù)厥蟊诲N子擊中后會(huì)立即縮回底下，并從其他隨機(jī)位置重新出現(xiàn)

（1）給錘子面板添加事件，鼠標(biāo)按下時(shí)錘子變?yōu)殄N下的“狀態(tài)2”，鼠標(biāo)釋放時(shí)變?yōu)樘鸬摹盃顟B(tài)1”。

（2）添加設(shè)置事件，當(dāng)錘下的錘子接觸到任意地鼠時(shí)，執(zhí)行改變“地鼠地圖”面板狀態(tài)，這時(shí)就會(huì)觸發(fā)之前設(shè)置的“移動(dòng)地鼠位置”事件，實(shí)現(xiàn)打中地鼠后刷新地鼠位置的功能。

4.2 配套功能

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

功能1：分?jǐn)?shù)記錄

（1）首先設(shè)置一個(gè)全局變量score，初始值為0，作為儲(chǔ)存數(shù)值功能。

（2）在“錘子面板”剛剛設(shè)置的打中地鼠的事件后繼續(xù)追加，當(dāng)錘下的錘子接觸到任意地鼠時(shí)，設(shè)置變量score=[[score+1]]，實(shí)現(xiàn)擊中后數(shù)值自增1，再設(shè)置界面中分?jǐn)?shù)的文本值=[[score]]。

功能2：游戲計(jì)時(shí)

主要利用文本框元件的“當(dāng)文字改變時(shí)”事件實(shí)現(xiàn)：

（1）設(shè)置文本框初始值為“時(shí)間：30s”，設(shè)置條件“當(dāng)元件文字不等于時(shí)間”時(shí)，等待1秒后文本框設(shè)置值為當(dāng)前文本值減一。

（2）設(shè)置局部變量time用于儲(chǔ)存數(shù)字。

（3）將“起始頁(yè)面”與“結(jié)束頁(yè)面”放在同一個(gè)動(dòng)態(tài)面板，命名為“游戲遮罩”，覆蓋于“游戲頁(yè)面”上。

（4）給“開始”按鈕添加事件，鼠標(biāo)單擊時(shí)，設(shè)置time=30，并隱藏游戲遮罩。

（5）設(shè)置當(dāng)time=0時(shí)，顯示“游戲遮罩”達(dá)到結(jié)束游戲的目的。

功能3：展示游戲分?jǐn)?shù)

當(dāng)time=0時(shí)，設(shè)置“最終分?jǐn)?shù)”的值等于當(dāng)前score。

功能4：展示用戶昵稱

用戶點(diǎn)擊“開始”按鈕時(shí)設(shè)置“昵稱”的文本值等于“輸入框”內(nèi)的文本值。

4.3 其他功能

初始化數(shù)據(jù)：點(diǎn)擊“開始”按鈕時(shí)，設(shè)置分?jǐn)?shù)文本等于0，設(shè)置score=0。

設(shè)置“重新開始”事件：與“開始”按鈕事件相同。

設(shè)置“回到首頁(yè)”：設(shè)置“回到首頁(yè)”為切換回“起始頁(yè)面”面板。

至此我們完成了本個(gè)版本“打地鼠”游戲的所有功能，點(diǎn)擊頁(yè)面右上角的預(yù)覽按鈕，即可瘋狂地play自己的“大作”。

最后，將游戲內(nèi)各類元素?fù)Q成卡通元素即可獲得一份能以假亂真的“打地鼠”小游戲，趕緊動(dòng)手試試吧～

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

作者：麋鹿，北京華宇元典高級(jí)交互設(shè)計(jì)師，微信公眾號(hào)：元典UED

本文由 @麋鹿 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議