在上篇里我們提到如何用Axure實(shí)現(xiàn)微信5.0飛機(jī)大戰(zhàn)的游戲。并跟大家講解了第一步實(shí)現(xiàn)讓敵機(jī)飛，讓子彈飛。沒看過上篇的同學(xué)可以先回讀一下http://m.22none.com/rp/248429.html

下方左圖就是最終達(dá)到的效果，下方右圖是上篇實(shí)現(xiàn)的狀態(tài)。

so，今天把剩余的效果都實(shí)現(xiàn)！我們需要讓敵機(jī)、子彈、戰(zhàn)斗機(jī)之間碰撞后引發(fā)我們想要的事件。如何實(shí)現(xiàn)，且聽我細(xì)細(xì)道來！

一、功能描述

1. 子彈碰撞到敵機(jī)，敵機(jī)爆炸并計(jì)得100分；
2. 敵機(jī)撞擊到戰(zhàn)斗機(jī)，戰(zhàn)斗機(jī)爆炸并減少剩余飛機(jī)數(shù)量，直至剩余飛機(jī)數(shù)量為0游戲結(jié)束；
3. 每擊落10架敵機(jī)，難度等級+1，敵機(jī)飛行速度相應(yīng)提速；
4. 對游戲進(jìn)行其他修飾；

二、材料準(zhǔn)備

云朵.png還是老辦法，用PS摳摳摳?！皟x表盤”和“剩余飛機(jī)”這兩個(gè)動態(tài)面板是為了顯示游戲中的相關(guān)數(shù)據(jù)，幾個(gè)-txt結(jié)尾的文本框是后續(xù)事件寫入數(shù)據(jù)的載體。按下圖方式組織好動態(tài)面板。

三、構(gòu)建敵機(jī)的撞擊事件

我們上篇實(shí)現(xiàn)的效果中，敵機(jī)在移動狀態(tài)下有兩個(gè)事件分別是正常飛行和撞擊地面。那么根據(jù)上述功能要求，敵機(jī)在移動狀態(tài)下完整的事件如下：

1. 正常飛行
2. 被子彈擊中
3. 撞擊到戰(zhàn)斗機(jī)
4. 沉入地面

也就是說，敵機(jī)在飛行中最多會先后觸發(fā)上述事件。一圖勝千字，奉上流程圖，在上篇的基礎(chǔ)上增加幾個(gè)判斷。

我們將敵機(jī)飛行中一些觸發(fā)事件的邏輯關(guān)系理清楚之后，需要把這些邏輯用Axure的交互事件表達(dá)出來。關(guān)于Axure同一個(gè)觸發(fā)事件下觸發(fā)的不同用例之間的邏輯關(guān)系，涉及一個(gè)知識點(diǎn)需要重點(diǎn)解釋一下。聽起來很抽象？舉個(gè)栗子，敵機(jī)在移動狀態(tài)會觸發(fā)飛行、中彈、撞機(jī)、入地等不同用例，這幾個(gè)用例之間可以用”if→if→if”的關(guān)系表達(dá)，也可以用”if→else-if→else-if→else-if”的并列關(guān)系來完成（右鍵點(diǎn)擊用例條件可切換這兩種關(guān)系）?！?#8221;if→if”和“”if→else-if”最大的區(qū)別在于“if→if”是指兩個(gè)并列的事項(xiàng)，如果兩個(gè)條件同事滿足Axure會同時(shí)去執(zhí)行if下的兩個(gè)用例（記住是同時(shí)），“if→else-if”則會從上到下去判斷，如果第一個(gè)if的條件滿足，Axure執(zhí)行完第一個(gè)用例就不再執(zhí)行下面的用例。

說了這么多關(guān)于”if→if“和”if→else-if“的關(guān)系，是為了更好理解下面幾個(gè)事件的關(guān)系。在本例子中我們采用的是”if→else-if“的邏輯關(guān)系，因?yàn)樵趲讉€(gè)撞擊事件都是獨(dú)立發(fā)生的，我們不希望它們同時(shí)進(jìn)行（敵機(jī)在一邊飛行一邊敵機(jī)被子彈擊落同時(shí)與戰(zhàn)斗機(jī)相撞，同時(shí)還要入地，這樣的場景無法想象，太慘烈無法直視）。既然是獨(dú)立發(fā)生的，我們每一個(gè)事件發(fā)生的條件就必須互斥。

比如，當(dāng)我們描述飛機(jī)正常飛行的時(shí)候，必須定義為：“敵機(jī)”未接觸“地面”且“敵機(jī)”未接觸“子彈”且“敵機(jī)”未接觸“戰(zhàn)斗機(jī)”只有這幾個(gè)條件同時(shí)滿足才算。以此類推，“敵機(jī)”撞擊“戰(zhàn)斗機(jī)”的條件也必須包含“敵機(jī)”未接觸“子彈”未接觸“地面”。一方面我們確保幾個(gè)用例不會同時(shí)發(fā)生，另一方面確保幾個(gè)用例之間條件獨(dú)立。

點(diǎn)擊圖片放大，按F鍵查看原圖

1、子彈擊中敵機(jī)

敵機(jī)-殼：從狀態(tài)1（飛行狀態(tài)）切換到狀態(tài)2（爆炸狀態(tài)）等待200ms→切換回狀態(tài)1（狀態(tài)復(fù)位）→隱藏（避免重復(fù)計(jì)分）→計(jì)分[[LVAR1+100]]（局部變量LVAR1=得分-txt）→升級[[LVAR1*0.001+2]]（局部變量LVAR1=得分-txt，擊落1架得100分，擊落10架升1級，因此分?jǐn)?shù)和等級是1000的關(guān)系，要乘以0.001，level初始值為2加上2是為了讓敵機(jī)飛行速度合理），顯示儀表盤上的等級[[Math.floor(level)-1]]（向下取整的目的是為了讓擊落飛機(jī)達(dá)到10架之后再升級，為確保敵機(jī)飛行速度合理將level初始值設(shè)為2，因此計(jì)算結(jié)果必須減去1）。

2、敵機(jī)撞擊戰(zhàn)斗機(jī)

戰(zhàn)斗機(jī)：從狀態(tài)1（正常狀態(tài)）切換到狀態(tài)2（爆炸狀態(tài)）→切換回狀態(tài)1（狀態(tài)復(fù)位）→扣減剩余飛機(jī)數(shù)量[[fighter-1]]→將剩余飛機(jī)數(shù)量在界面顯示出來剩余飛機(jī)-txt=[[fighter]]→隱藏（避免擊落戰(zhàn)斗機(jī)的數(shù)量重復(fù)計(jì)算）

3、防止敵機(jī)溢出

在測試中發(fā)現(xiàn)等級高的時(shí)候，敵機(jī)飛行速度快，可能當(dāng)會穿過地面?；蛘哂捎跒g覽器的原因敵機(jī)會離開控制范圍，無止境地往下飛行，這樣游戲就無法繼續(xù)。因此根據(jù)“戰(zhàn)場背景”的高度設(shè)定一個(gè)條件，當(dāng)敵機(jī)飛行距離超過一定階段，就讓飛機(jī)復(fù)位。

四、讓戰(zhàn)斗機(jī)動起來

通過在主頁寫頁面交互實(shí)現(xiàn)戰(zhàn)斗機(jī)移動，由于子彈是跟隨著戰(zhàn)斗機(jī)一起的，因此在最開始的時(shí)候我們就已經(jīng)將兩者合并在同一個(gè)動態(tài)面板上：“戰(zhàn)斗機(jī)+子彈”，準(zhǔn)確的說，我們應(yīng)該移動“戰(zhàn)斗機(jī)+子彈”。為了讓它移動的時(shí)候不會超過背景的邊界經(jīng)過計(jì)算貼出下面用例：

總而言之，動態(tài)面板要移動必須滿足兩個(gè)條件：

1. 按下按鈕
2. 還在活動范圍內(nèi)

五、裝飾和美化

為了讓游戲具有更好的可玩性，我們要做以下幾件事情：

1、讓戰(zhàn)斗機(jī)飛行的時(shí)候增加噴尾氣的效果

只要增加一個(gè)動態(tài)面板，在動態(tài)面板的兩個(gè)狀態(tài)分別的飛機(jī)尾氣形狀有所差異。游戲開始的時(shí)候讓這兩個(gè)狀態(tài)循環(huán)切換則能得到尾氣不斷噴射的狀態(tài)。

2、再復(fù)制出一架敵機(jī)，增加游戲可玩性

同時(shí)復(fù)制一個(gè)“循環(huán)”和“敵機(jī)-殼”將其命名為“循環(huán)2”和“敵機(jī)-殼2”在 ”循環(huán)2“復(fù)位敵機(jī)位置的用例里，絕對坐標(biāo)的Y方向設(shè)置為-180這樣就能確保同時(shí)復(fù)位的兩架飛機(jī)是一先一后。當(dāng)然，在”開始“按鈕要增加對這兩個(gè)動態(tài)面板控制的用例。在兩架敵機(jī)”敵機(jī)撞擊戰(zhàn)斗機(jī)“的用例里也需要對彼此進(jìn)行控制（具體請查看用例）。增加天空中的飛機(jī)打起來更刺激。

3、讓美化戰(zhàn)場

把云.png拉成不同大小散落在戰(zhàn)場，把地板和天花板設(shè)置成全透明，將游戲里所有字體都改成你喜歡的字體，當(dāng)然最好有點(diǎn)手寫的感覺，不然與畫風(fēng)不一致；

4、給游戲加一個(gè)封面&給游戲設(shè)置一個(gè)重新開始的對話框

將戰(zhàn)場全選右鍵轉(zhuǎn)換成動態(tài)面板。將這個(gè)大的動態(tài)面板取名為”戰(zhàn)斗區(qū)域“分為”戰(zhàn)場“和”封面“兩個(gè)狀態(tài)。進(jìn)入游戲默認(rèn)是在”封面狀態(tài)“游戲開始后是在”戰(zhàn)場“狀態(tài)。游戲結(jié)束的時(shí)候增加一個(gè)對話框，顯示當(dāng)前這局的得分和重新開始的按鈕。本案例美其名曰”繼續(xù)擼“。

六、寫在最后

制作本案例的目的是出于好玩，將案例制作過程寫出來是為了分享。案例本身沒有實(shí)際價(jià)值，但是在制作過程涉及到動態(tài)面板、用例條件、頁面交互、數(shù)學(xué)函數(shù)、全局變量、局部變量等知識點(diǎn)的應(yīng)用?？梢韵鄬ι羁痰乩斫釧xure的運(yùn)行原理也算沒白忙活。

最后依然雙手獻(xiàn)上rp源文件，需要更多溝通的童鞋，歡迎來公眾號iambin找我。

作者提供源：

鏈接：http://pan.baidu.com/s/1mhvAXFq 密碼：xdoi

人人官方源：

鏈接：http://pan.baidu.com/s/1kU3eT2R? ? 密碼：7tat

作者：@陳濱淋，國內(nèi)某知名電商公司產(chǎn)品總監(jiān)，起點(diǎn)學(xué)院北京1508期優(yōu)秀學(xué)員。

本文由人人都是產(chǎn)品經(jīng)理專欄作家 @陳濱淋（微信公眾號：iambin） 獨(dú)家發(fā)布于人人都是產(chǎn)品經(jīng)理?。未經(jīng)人人都是產(chǎn)品經(jīng)理許可，禁止轉(zhuǎn)載。違者追究責(zé)任，謝謝合作。