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

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

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

一、會飛的拳擊手套

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

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

1. 首先放置好拳擊手套的位置
2. 在頁面中拖入一個動態(tài)面板作為拳擊手套的控制器，至少需要添加2個狀態(tài)
3. 給拳擊手套添加【載入時(shí)】通過變量記錄手套位置和大?。ê竺鏁玫剑┮约啊军c(diǎn)擊時(shí)】開啟動態(tài)面板循環(huán)的事件

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

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

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

但這里還有一個問題，就是怎么判斷手套是在屏幕內(nèi)還是屏幕外呢，這里就會用到我們在拳擊手套載入時(shí)記錄的手套尺寸了，我們主要用到高度 height，當(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án)控制器，控制器啟動后，手套在屏幕內(nèi)，會向上飛出，飛出屏幕外后，控制器停止，手套回到原先的位置，就呈現(xiàn)出我們在游戲中看到的效果。

二、會來回跑的雞

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

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

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

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

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

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

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

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

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

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

三、打“雞”和爆炸效果

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

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

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

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

四、計(jì)分

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

五、Game over

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

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

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

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

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