用Axure 實現“打飛機”,騷年,來一發(下)

Bin
10 評論 28897 瀏覽 267 收藏 11 分鐘

在上篇里我們提到如何用Axure實現微信5.0飛機大戰的游戲。并跟大家講解了第一步實現讓敵機飛,讓子彈飛。沒看過上篇的同學可以先回讀一下http://www.aharts.cn/rp/248429.html

下方左圖就是最終達到的效果,下方右圖是上篇實現的狀態。

hebing

so,今天把剩余的效果都實現!我們需要讓敵機、子彈、戰斗機之間碰撞后引發我們想要的事件。如何實現,且聽我細細道來!

一、功能描述

  1. 子彈碰撞到敵機,敵機爆炸并計得100分;
  2. 敵機撞擊到戰斗機,戰斗機爆炸并減少剩余飛機數量,直至剩余飛機數量為0游戲結束;
  3. 每擊落10架敵機,難度等級+1,敵機飛行速度相應提速;
  4. 對游戲進行其他修飾;

二、材料準備

云朵.png還是老辦法,用PS摳摳摳?!皟x表盤”和“剩余飛機”這兩個動態面板是為了顯示游戲中的相關數據,幾個-txt結尾的文本框是后續事件寫入數據的載體。按下圖方式組織好動態面板。

三、構建敵機的撞擊事件

我們上篇實現的效果中,敵機在移動狀態下有兩個事件分別是正常飛行和撞擊地面。那么根據上述功能要求,敵機在移動狀態下完整的事件如下:

  1. 正常飛行
  2. 被子彈擊中
  3. 撞擊到戰斗機
  4. 沉入地面

也就是說,敵機在飛行中最多會先后觸發上述事件。一圖勝千字,奉上流程圖,在上篇的基礎上增加幾個判斷。

dijishijian

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

說了這么多關于”if→if“和”if→else-if“的關系,是為了更好理解下面幾個事件的關系。在本例子中我們采用的是”if→else-if“的邏輯關系,因為在幾個撞擊事件都是獨立發生的,我們不希望它們同時進行(敵機在一邊飛行一邊敵機被子彈擊落同時與戰斗機相撞,同時還要入地,這樣的場景無法想象,太慘烈無法直視)。既然是獨立發生的,我們每一個事件發生的條件就必須互斥。

比如,當我們描述飛機正常飛行的時候,必須定義為:“敵機”未接觸“地面”且“敵機”未接觸“子彈”且“敵機”未接觸“戰斗機”只有這幾個條件同時滿足才算。以此類推,“敵機”撞擊“戰斗機”的條件也必須包含“敵機”未接觸“子彈”未接觸“地面”。一方面我們確保幾個用例不會同時發生,另一方面確保幾個用例之間條件獨立。

yongli

點擊圖片放大,按F鍵查看原圖

1、子彈擊中敵機

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

2、敵機撞擊戰斗機

戰斗機:從狀態1(正常狀態)切換到狀態2(爆炸狀態)→切換回狀態1(狀態復位)→扣減剩余飛機數量[[fighter-1]]→將剩余飛機數量在界面顯示出來剩余飛機-txt=[[fighter]]→隱藏(避免擊落戰斗機的數量重復計算)

3、防止敵機溢出

在測試中發現等級高的時候,敵機飛行速度快,可能當會穿過地面?;蛘哂捎跒g覽器的原因敵機會離開控制范圍,無止境地往下飛行,這樣游戲就無法繼續。因此根據“戰場背景”的高度設定一個條件,當敵機飛行距離超過一定階段,就讓飛機復位。

四、讓戰斗機動起來

通過在主頁寫頁面交互實現戰斗機移動,由于子彈是跟隨著戰斗機一起的,因此在最開始的時候我們就已經將兩者合并在同一個動態面板上:“戰斗機+子彈”,準確的說,我們應該移動“戰斗機+子彈”。為了讓它移動的時候不會超過背景的邊界經過計算貼出下面用例:

yemianshijian

總而言之,動態面板要移動必須滿足兩個條件:

  1. 按下按鈕
  2. 還在活動范圍內

五、裝飾和美化

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

1、讓戰斗機飛行的時候增加噴尾氣的效果

只要增加一個動態面板,在動態面板的兩個狀態分別的飛機尾氣形狀有所差異。游戲開始的時候讓這兩個狀態循環切換則能得到尾氣不斷噴射的狀態。

2、再復制出一架敵機,增加游戲可玩性

同時復制一個“循環”和“敵機-殼”將其命名為“循環2”和“敵機-殼2”在 ”循環2“復位敵機位置的用例里,絕對坐標的Y方向設置為-180這樣就能確保同時復位的兩架飛機是一先一后。當然,在”開始“按鈕要增加對這兩個動態面板控制的用例。在兩架敵機”敵機撞擊戰斗機“的用例里也需要對彼此進行控制(具體請查看用例)。增加天空中的飛機打起來更刺激。

3、讓美化戰場

把云.png拉成不同大小散落在戰場,把地板和天花板設置成全透明,將游戲里所有字體都改成你喜歡的字體,當然最好有點手寫的感覺,不然與畫風不一致;

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

將戰場全選右鍵轉換成動態面板。將這個大的動態面板取名為”戰斗區域“分為”戰場“和”封面“兩個狀態。進入游戲默認是在”封面狀態“游戲開始后是在”戰場“狀態。游戲結束的時候增加一個對話框,顯示當前這局的得分和重新開始的按鈕。本案例美其名曰”繼續擼“。

六、寫在最后

制作本案例的目的是出于好玩,將案例制作過程寫出來是為了分享。案例本身沒有實際價值,但是在制作過程涉及到動態面板、用例條件、頁面交互、數學函數、全局變量、局部變量等知識點的應用。可以相對深刻地理解Axure的運行原理也算沒白忙活。

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

作者提供源:

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

人人官方源:

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

 

作者:@陳濱淋,國內某知名電商公司產品總監,起點學院北京1508期優秀學員。

本文由人人都是產品經理專欄作家 @陳濱淋(微信公眾號:iambin) 獨家發布于人人都是產品經理?。未經人人都是產品經理許可,禁止轉載。違者追究責任,謝謝合作。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 還有鏈接嗎跪求 這個鏈接失效

    來自云南 回復
  2. 鏈接失效了,跪求新鏈接 ??

    來自北京 回復
  3. 請問,在碰撞條件里的“area of widget 接觸 area of widget”和“area of widget 不接觸 area of widget”,這個“接觸”和“不接觸”這是什么版本里有的?是“is over”和“is not over”嗎?

    來自北京 回復
  4. 為什么我跟著步驟走,打完之后,飛機就不會往下掉了?

    來自海南 回復
  5. word哥,我下了你的源文件,基本搞懂了,但是沒找到你方向鍵控制戰機的指令,應該是寫在戰機-子彈動態面板下吧

    來自重慶 回復
  6. 厲害了我的哥 :mrgreen:

    來自浙江 回復
  7. ? 我被驚呆了

    來自北京 回復
  8. 再次驚呆了(?Д?≡?Д?)

    來自廣東 回復
  9. 邏輯很強大

    來自安徽 回復
  10. 厲害

    來自北京 回復