在生活中遇到壓力需要發(fā)泄時(shí)，我們常常會(huì)選擇解壓小游戲。通過Axure原型設(shè)計(jì)，我們也可以制作出一款解壓小游戲。作者用Axure設(shè)計(jì)了一款《沉重打“雞”》游戲，為我們展示Axure設(shè)計(jì)的可能性，一起來看看吧。

首先還是先看成品，下方是游戲頁面，跳轉(zhuǎn)鏈接：https://996.pm/Yw2DA?可以試玩。

接下來我從幾個(gè)要點(diǎn)來介紹這款游戲的實(shí)現(xiàn)思路。

一、會(huì)飛的拳擊手套

首先要實(shí)現(xiàn)的就是點(diǎn)擊拳擊手套時(shí)，手套能夠往上飛出去，飛出屏幕之后，再生成一個(gè)新的手套，這里用到一個(gè)【動(dòng)態(tài)面板】作為拳擊手套的控制器，通過動(dòng)態(tài)面板的循環(huán)來控制手套的運(yùn)動(dòng)，如果大家想知道怎么用動(dòng)態(tài)面板來做循環(huán)控制器，可以回顧一下我的另一篇教程《【Axure 動(dòng)態(tài)面板】讓你的動(dòng)畫變成“永動(dòng)機(jī)”》。

具體的實(shí)現(xiàn)是這樣的

1. 首先放置好拳擊手套的位置
2. 在頁面中拖入一個(gè)動(dòng)態(tài)面板作為拳擊手套的控制器，至少需要添加2個(gè)狀態(tài)
3. 給拳擊手套添加【載入時(shí)】通過變量記錄手套位置和大?。ê竺鏁?huì)用到）以及【點(diǎn)擊時(shí)】開啟動(dòng)態(tài)面板循環(huán)的事件

給控制器（動(dòng)態(tài)面板）添加循環(huán)時(shí)的事件，當(dāng)【狀態(tài)改變時(shí)】，進(jìn)行以下判斷：

當(dāng)手套還在屏幕內(nèi)時(shí)，不斷向上移動(dòng)，向上移動(dòng)的本質(zhì)其實(shí)就是不斷地減少手套的 y 值，這里減少的 y 值我用了一個(gè)【gloves_speed】的變量來控制，方便調(diào)整手套飛出的速度，簡單講就是相同時(shí)間內(nèi)減少的 y 值越大，手套飛出的速度就越快

當(dāng)手套移出屏幕外時(shí)，就停止動(dòng)態(tài)面板循環(huán)，將手套移動(dòng)到初始位置（上面已經(jīng)提到，在手套載入時(shí)通過變量記錄了手套的初始位置）

但這里還有一個(gè)問題，就是怎么判斷手套是在屏幕內(nèi)還是屏幕外呢，這里就會(huì)用到我們在拳擊手套載入時(shí)記錄的手套尺寸了，我們主要用到高度 height，當(dāng)我們把手套往上拖動(dòng)到剛好全部離開頁面（進(jìn)入頁面的【負(fù)空間】）時(shí)，此時(shí)手套的 y 值恰好等于手套的高度的負(fù)值，也就是-height，所以要判斷手套是在屏幕內(nèi)還是在屏幕外，只需要判斷當(dāng)前手套的 y 值，如果 y>=-height，說明還在頁面內(nèi)，如果 y<-height，說明手套已經(jīng)完全離開頁面。

這樣，當(dāng)我們點(diǎn)擊手套時(shí)，會(huì)啟用循環(huán)控制器，控制器啟動(dòng)后，手套在屏幕內(nèi)，會(huì)向上飛出，飛出屏幕外后，控制器停止，手套回到原先的位置，就呈現(xiàn)出我們在游戲中看到的效果。

二、會(huì)來回跑的雞

雖然我們看到游戲中有很多雞跑來跑去，但是實(shí)際上真正雞的“本體”就兩只，剛介紹完拳擊手套的邏輯，相信你很容易就能聯(lián)想到，雞的運(yùn)動(dòng)邏輯，也是跟手套差不多，其中一只雞從左向右移動(dòng)，另外一只從右向左移動(dòng)，當(dāng)移出屏幕的時(shí)候，回到初始位置，不過雞的移動(dòng)邏輯，要比拳擊手套復(fù)雜一點(diǎn)，最主要的是兩點(diǎn)：

1. 雞會(huì)從屏幕的上半部分的隨機(jī)位置出現(xiàn)，但只能在屏幕的上半部分運(yùn)動(dòng)，不能跑到屏幕外去，也不能在屏幕下方，否則一出現(xiàn)就會(huì)自己碰到拳擊手套；
2. 雞每次出現(xiàn)的速度是隨機(jī)的，有時(shí)候快，有時(shí)候慢。

雞【載入時(shí)】的事件是這樣的：

首先需要3個(gè)變量，分別用來存儲(chǔ)雞位置 x 和 y，以及雞的速度 speed：

• x 的值是雞的寬度的負(fù)值 -width，就是確保雞出現(xiàn)的時(shí)候，會(huì)“躲在”左邊屏幕外；
• y 的值是隨機(jī)的，這里需要用到 Axure 的 JavaScript 函數(shù)，這里的值是 [[Math.random()*(Window.height*0.5)]]，其中 Math.random() 表示生成 0-1 的隨機(jī)數(shù)，Window.height*0.5 表示獲取屏幕高度的一半，整個(gè)函數(shù)的作用就是生成從 0 到 屏幕的一半高度的隨機(jī)數(shù)，代入到y(tǒng)值就是確保生成的值落在屏幕頂部到屏幕中部的任意位置，然后把雞放到相應(yīng)位置上（這里如果要更嚴(yán)謹(jǐn)一點(diǎn)的話，應(yīng)該再減去雞自身的高度，才能確保雞會(huì)半屏內(nèi)移動(dòng)）；
• speed 也是隨機(jī)的，值是 [[(Math.random()*speed_level)+speed_level]] ，speed_level 是一個(gè)專門用來控制速度等級(jí)的變量參數(shù)，剛剛講過，Math.random() 是生成0-1的隨機(jī)數(shù)，如果乘以 speed_level 就是生成0-speed_level的隨機(jī)數(shù)，假設(shè) level=10，生成的值就是0-10，這種情況會(huì)有一個(gè)問題，就是快的時(shí)候特別快（速度10），慢的時(shí)候特別慢（速度零點(diǎn)幾），于是再+level（10），就會(huì)變成生成10-20的隨機(jī)數(shù)，這個(gè)時(shí)候的速度就比較能接受了。

設(shè)置完上述變量之后，把雞移到 x，y的位置就行了，這個(gè)時(shí)候，雞就會(huì)貼在左邊屏幕外，且是屏幕上半部分的隨機(jī)位置，同時(shí)生成了一個(gè)隨機(jī)的運(yùn)動(dòng)速度。但想要雞動(dòng)起來，我們還需要一個(gè)控制器，這個(gè)時(shí)候再拖進(jìn)一個(gè)動(dòng)態(tài)面板（至少需要2個(gè)狀態(tài)），控制器的配置如下：

跟手套的邏輯類似，由于雞是橫向運(yùn)動(dòng)，所以根據(jù)雞自身的 x 值來判斷雞是在屏幕內(nèi)還是屏幕外：

• 當(dāng)雞在屏幕內(nèi)的時(shí)候，將雞的移動(dòng)速度 speed 作為橫向移動(dòng)的距離 x，不斷從左向右移動(dòng)；
• 當(dāng)雞在屏幕外的時(shí)候，【觸發(fā)】一個(gè)【載入時(shí)】的事件，這是 Axure 提供的一種方便的調(diào)用方式，如果你需要重復(fù)執(zhí)行某個(gè)組件的某個(gè)事件，只要通過【觸發(fā)事件】，選擇相應(yīng)的組件后選擇需要觸發(fā)的事件就行了，這里就相當(dāng)于雞移出屏幕外之后，又把雞移回到左側(cè)，并生成隨機(jī) y 值和隨機(jī)速度。

右邊的雞也是相同的方式，同樣會(huì)用到另外一個(gè)動(dòng)態(tài)面板作為控制器，不過要注意的是移動(dòng)的方向是相反的，所以相關(guān)的參數(shù)需要反過來設(shè)置，這里不再贅述。

兩只雞和兩個(gè)控制器配置好之后，只需要開啟兩個(gè)控制器的循環(huán)，雞自然就會(huì)運(yùn)動(dòng)起來。

三、打“雞”和爆炸效果

這個(gè)實(shí)現(xiàn)起來很簡單，前提是你得知道 Axure 有一個(gè)“碰撞判斷”——【元件范圍】。

首先，你得知道，這個(gè)雞它殊不簡單，它也是一個(gè)動(dòng)態(tài)面板，里面有兩個(gè)狀態(tài)，一個(gè)是默認(rèn)的雞的狀態(tài)，另外一個(gè)則是跟手套發(fā)生“碰撞”時(shí)的爆炸狀態(tài)。

要判斷雞是否被拳擊手套擊中，只需要在雞【移動(dòng)時(shí)】判斷是否【接觸到】拳擊手套，如果接觸到，就表示發(fā)生了“碰撞”，將雞的狀態(tài)切換到“爆炸”狀態(tài)即可。

這里還有一個(gè)細(xì)節(jié)需要注意，就是在爆炸火焰移出屏幕外之后，需要將狀態(tài)切換回默認(rèn)的雞的狀態(tài)，否則下次出來的還是爆炸火焰的效果，就不符合我們的要求了。右邊的雞也是相同道理。

四、計(jì)分

當(dāng)我們擊中移動(dòng)中的雞的時(shí)候，右上角的分?jǐn)?shù)會(huì)+1，這個(gè)功能的實(shí)現(xiàn)需要一個(gè)全局變量 score，計(jì)分的邏輯是當(dāng)雞被擊中，就加1分，這里需要給兩只雞添加一個(gè)判斷：當(dāng)雞這個(gè)【動(dòng)態(tài)面板】變化時(shí)，判斷是否是變成“爆炸效果”，如果是，就表示被擊中了，這個(gè)時(shí)候，就給 score +1，并把 score 通過【設(shè)置文本】的事件顯示到右上角。

五、Game over

如果飛出去的拳擊手套沒有擊中任何一只雞，那游戲就失敗了，這一步的實(shí)現(xiàn)，首先需要一個(gè)全局變量 is_hit 用來記錄是否擊中，默認(rèn)=0表示未擊中，接著給手套添加一個(gè)【移動(dòng)時(shí)】判斷是否擊中雞的事件，如果在飛出去的過程中有接觸（擊中）其中的任意一只雞，就將 is_hit 設(shè)置為1，表示這一輪有擊中。

接下來就是在拳擊手套移出屏幕時(shí)，添加兩個(gè)判斷：

如果 is_hit = 1，表示這一輪擊中了，就停止手套控制器，把手套復(fù)位，并把 is_hit 清零，這樣開始新一輪的時(shí)候，才能夠正確識(shí)別擊中狀態(tài)，如果這里不清零，等于一直擊中，這樣下一輪手套飛出去就算沒有擊中，游戲也不會(huì)結(jié)束

如果 is_hit = 0，表示這一輪沒有擊中，同樣停止循環(huán)，然后彈出一個(gè)游戲結(jié)束的提醒，并顯示最終的分?jǐn)?shù)，這個(gè)比較簡單，就不多作介紹了。

好了，教程就到這里，文章很長，感謝看完！