一個(gè)有趣的實(shí)例，通過axure制作一個(gè)打地鼠的游戲，可以進(jìn)行難度選擇。其中如果選擇難度一地鼠為正常大小，選擇難度二，地鼠則為縮小版。雖然小游戲很簡單，但其中用到的axure技能并不簡單，接下來將為大家介紹其制作方法。

之前已經(jīng)發(fā)布過一個(gè)釣魚的小游戲《有趣的Axure案例：釣魚游戲的設(shè)計(jì)》，該游戲也有難度的變化等功能，某種程度上講，那一個(gè)實(shí)例的難度反而要大一些，因?yàn)樯婕暗叫◆~的往復(fù)運(yùn)動(dòng)以及自動(dòng)轉(zhuǎn)身。

本實(shí)例相對(duì)比較簡單，但是難度切換的時(shí)候需要進(jìn)行的工作量比較大，而小魚實(shí)例中僅僅修改一個(gè)數(shù)據(jù)即可以實(shí)現(xiàn)難度切換。

一、成果展示

交互內(nèi)容：

• 難度選擇：將鼠標(biāo)移入相應(yīng)的難度框即可以實(shí)現(xiàn)難度切換，難度切換之后地鼠的大小將會(huì)發(fā)生變化；
• 打地鼠：將木槌移動(dòng)到地鼠所在的位置，按下敲擊即可以實(shí)現(xiàn)打地鼠的動(dòng)作，被敲打的地鼠將會(huì)被重置。
• 得分統(tǒng)計(jì)：上方的得分界面將會(huì)隨著打地鼠數(shù)量的增加而增加。

體驗(yàn)地址：點(diǎn)我體驗(yàn)

二、單難度制作過程

1.繪制基本元件

圖片可以從網(wǎng)上搜集，所需要的圖片有草地的圖片，老鼠洞的圖片，老鼠和洞的圖片，木槌的圖片，木槌砸下的圖片。當(dāng)然對(duì)于圖片進(jìn)行摳圖處理是必不可少的步驟。

2.設(shè)置動(dòng)態(tài)面板

為了實(shí)現(xiàn)木槌的敲擊需要將木槌設(shè)置為動(dòng)態(tài)面板，狀態(tài)1和狀態(tài)2分別為木槌的正常位置以及敲擊后的位置。老鼠的動(dòng)畫實(shí)現(xiàn)方式也是一樣的，將狀態(tài)1設(shè)置為僅僅有一個(gè)洞，狀態(tài)2設(shè)置為老鼠從洞中爬出來，這樣就獲取了老鼠從洞中出現(xiàn)的動(dòng)畫。

3.小木錘的動(dòng)作實(shí)現(xiàn)

實(shí)現(xiàn)方式比較簡單，設(shè)置方式如上所示，即鼠標(biāo)單擊的時(shí)候?qū)⒛鹃车臓顟B(tài)設(shè)置為敲打的狀態(tài)，然后等待200毫秒后將木槌復(fù)位。

接著通過上圖的方式進(jìn)行設(shè)置，使得小木槌可以跟隨鼠標(biāo)。cursor.x為獲取當(dāng)前鼠標(biāo)所在位置的x坐標(biāo)，cursor.y為獲取當(dāng)前鼠標(biāo)所在位置的y坐標(biāo)。

4.設(shè)置全局變量

為了實(shí)現(xiàn)得分統(tǒng)計(jì)，需要一個(gè)全局變量score，其初始值為0，將隨著用戶擊打老鼠而增加。且每打中一只老鼠，其數(shù)值將會(huì)增加1。

5.地鼠動(dòng)畫設(shè)計(jì)

觸發(fā)的條件為接觸觸發(fā)，值得注意的是不是讓木槌的動(dòng)態(tài)面板和地鼠接觸后觸發(fā)，而是讓砸下狀態(tài)的木槌和地鼠接觸之后觸發(fā)。觸發(fā)后將會(huì)重置地鼠的位置，重置方式使用隨機(jī)函數(shù)來完成。

為了實(shí)現(xiàn)地鼠從洞中爬出來的動(dòng)畫，先將地鼠的動(dòng)態(tài)面板設(shè)置為狀態(tài)1等待500毫秒之后切換為狀態(tài)2，同時(shí)增加得分。

三、增加難度選項(xiàng)

1.增加狀態(tài)

將整個(gè)游戲界面轉(zhuǎn)化為動(dòng)態(tài)面板，該界面將會(huì)成為狀態(tài)1，接下來再添加狀態(tài)2，將狀態(tài)2中的地鼠體積縮小到一定程度。

作為難度二的游戲界面，按照先前的方式為狀態(tài)二中的所有區(qū)域增加交互，這樣，我們就擁有了兩個(gè)不同難度的游戲。

2.狀態(tài)切換

增加兩個(gè)按鈕，即難度一和難度二，用于難度的切換。因?yàn)榇藭r(shí)小木槌是跟隨鼠標(biāo)的，所以我們并沒有辦法按到這兩個(gè)按鍵，因此將交互的方式設(shè)置為當(dāng)鼠標(biāo)移入時(shí)進(jìn)行切換。

其中難度二是將頁面切換至狀態(tài)二，而難度一則是將頁面切換至狀態(tài)一。

四、總結(jié)

該例子的難度適合于有一定基礎(chǔ)的axure使用者，雖然總體思路不是很困難，但是如果基本操作不過關(guān)，很容易導(dǎo)致游戲出了bug但是卻找不到在哪里。希望通過這個(gè)實(shí)例能夠讓大家對(duì)axure有更加深入的了解。

#專欄作家#

馬璐，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注產(chǎn)品設(shè)計(jì)以及用戶體驗(yàn)，力求在技術(shù)一定的情況下將產(chǎn)品做到極致，充分發(fā)揮技術(shù)的潛能。

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

題圖來自網(wǎng)絡(luò)