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

Bin
21 評論 35885 瀏覽 558 收藏 9 分鐘

看到標題想歪的,請先面壁三秒鐘,我向來是一位嚴肅正經有節操的人。

話說,前段時間忽然懷念微信5.0的黑白版的飛機大戰,進微信游戲大廳尋了個遍,好像找不到了,有種物是人非的趕腳。突發奇想利用業余時間用Axure打造了一個飛機大戰,在空虛寂寞冷的時候可以擼一把。效果如下方左圖

hebing

一、功能描述

  1. 有無限多的敵機無恥地向你撲面而來;
  2. 你用鍵盤的方向鍵控制戰斗機參加戰斗(被敵機撞擊算報廢,你一共有3架戰斗機);
  3. 戰斗機可以源源不斷地向敵機發射子彈;
  4. 計分系統(打掉一架敵機得100分);
  5. 難度等級系統(打10架敵機增加一個難度等級,敵機飛行速度加快);

因為涉及知識點比較多,又希望將他們描述清楚,所以本文只實現上方右圖的效果。①讓敵機循環飛行②讓子彈連續發射。請基礎較好的童鞋見諒。

二、素材準備

敵機.png、戰斗機.png、子彈.png(為了效果好,老老實實用PS摳出2個透明背景的飛機,此處省略N個字)、拉出四個矩形用途和尺寸分別為:450*530px作為背景、2個450*42px分別作為地面和天花板、開始按鈕。將敵機.png、戰斗機.png、子彈.png按照下圖方式打包成“戰斗機+子彈”、“敵機-殼”兩個動態面板。

sucai1

三、構建敵機循環飛行效果

實現方法:

用一個空的動態面板命名為“循環”,協助敵機實現循環飛行。流程開始后,設置動態面板“循環”顯示→“循環”顯示后觸發:“敵機-殼”復位:移動敵機到界面頂部絕對位置(范圍內隨機,0)的位置and啟動飛機:相對位置移動敵機(0,1),“敵機-殼”在移動的情況下設置用例→如果“敵機-殼”撞擊到地面,隱藏“循環”,“循環”隱藏后觸發顯示“循環”的用例→“敵機-殼”未接觸到地面,則繼續向下飛行,從而達到敵機飛行的循環。具體流程圖如下所示:

在上述流程圖中,紅色的閉環促進敵機不斷地繼續向前飛行,藍色的閉環促進敵機不斷重現。

下面貼出“循環”“敵機-殼”的交互用例

yongli

四、構建子彈連續射擊效果

根據同樣的原理,我們可以做出子彈循環向上飛行的樣子。區別在于①子彈飛行的方向在縱坐標的負方向。②子彈飛行速度較快。③子彈在“子彈軌道”這個動態面板里飛行。因此子彈在移動時觸發每一個移動單位是(0,-20),子彈撞擊天花板之后復位的位置是絕對位置(0,390)。具體用例不在此復述。

五、函數講解

在上述用例中出現兩處函數,在此進行簡單講解

1、敵機撞擊地面后,觸發“循環”對敵機進行復位的用例

[[Math.floor(Math.random()*300+80)]]

Math.random()函數的作用是在[0-1]區間產生一個任意數,這個用法與該函數在Java或js里都是相通的。要函數返回指定范圍的隨機數(m-n之間)的公式如是:Math.random()*(n-m)+m;而在本文中,我們希望敵機在[0,450]區間產生隨機數,因此理論上應該是Math.random()*450,其中450是背景矩形的寬度,但是由于Axure認為元件的坐標就是元件從左上角頂點的坐標,而敵機自身的寬度為72px,因此正確的表達式應該為Math.random()*(450-72),本人在試驗中發現疑似由于瀏覽器的兼容問題,這樣控制范圍仍然會出現飛機飛出范圍外,因此將范圍進行適當縮小最終設定的公式定位文中的數據。

Math.floor()是向下取整的函數,由于Math.random()產生的是多位小數。因此在取整函數里嵌套一個隨機函數的目的是在一定范圍內產生一個隨機整數,得益于這兩個函數的使用,才讓敵機能在不同軌道上飛行。

2、敵機正常飛行用例中的函數

[[Math.log(level)+0.5]]

寫到此我居然忘了一件重要的事情,為以后完善游戲的難度系統做準備,我們應該建立兩個全局變量“level”和“fighter”通過“level”的值來控制敵機飛行速度,通過“fighter”的值來檢測戰斗機剩余數量,從而隨時判斷游戲是否結束。在點擊”開始游戲”的時候給”level”賦值2,給”fighter”賦值3這是初始化數據。回到函數的話題,這個函數的值最終將成為敵機在固定時間內(用例執行的時間是1ms固定不變)飛行的距離,也就是說敵機的飛行速度成正比。在本游戲中預想設定每擊落10架敵機level的值加1,這樣不同level下,敵機的飛行速度是成線性增長的。我們先來回顧一下中學時期學到關于對數函數和直線函數曲線的區別:

QQ20151210194519

從上圖不難看出,我使用對數函數的目的是為了控制敵機飛行速度的增量。拉長用戶可升級的空間,增加游戲的可玩性。在Axure里[[Math.log(x)]]函數使用數學常量e作為對數的底(e約為2.71828),因此范圍的只一定為正數。但是當x比較小的時候log(x)返回的值仍然比較小這就意味著在前幾個level里飛機的飛行速度非常慢,近乎龜速,用戶會沒耐心玩,游戲可玩性不高。這也是為什么我會在函數后面加一個常量0.5的原因。

六、寫在最后

希望感興趣的同學別心急,先按跟著本文的進展動起來,讓敵機起飛,讓子彈飛一會兒!后面會更精彩。

最后照舊,獻上本文效果的rp源文件,需要更多溝通的童鞋,歡迎來公眾號iambin找我。

作者提供源:

鏈接:http://pan.baidu.com/s/1hrgjWxA? 密碼:nco3

人人官方源:

鏈接:http://pan.baidu.com/s/1c1fCqCo 密碼:kue6

 

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 想請教下,我直接用敵機的y軸位置做判定來循環敵機的移動和復位,但為啥我判定中只要加入等于某個判定數字,查看到的敵機的y軸位置就會達到某個判定數字后循環歸零。動畫展示出的效果就是一直往下掉。

    回復
  2. (ˊo????o???`)????啊

    回復
  3. 想請教下,為啥要單獨用循環動態來控制?我把移動和顯示都寫在一起,點擊開始,第一次會敵機會移動下來,第二次就跑到外面了,不知道 是什么 原因

    來自福建 回復
  4. 這個手機觸屏玩的時候能夠和微信原來的飛機大戰差不多嘛

    來自上海 回復
  5. 正好有空,想試著做一下子

    來自江蘇 回復
  6. 來自北京 回復
  7. 對于一個大學沒有上過高數的人來說,函數真是太難了。

    來自北京 回復
  8. 棒極了666666

    來自北京 回復
  9. 就一個動畫…. 說的那么吊… ?

    來自北京 回復
    1. 你做一個出來

      來自廣東 回復
    2. 你做一個出來

      來自廣東 回復
  10. 學著了,做出來有模有樣的,期待更新 ??

    來自北京 回復
  11. :shock:牛~

    來自北京 回復
  12. 沒什么卵用。

    來自北京 回復
  13. 想法不錯!

    來自重慶 回復
  14. ?? 講真,我無話可說了

    來自廣東 回復
  15. 牛逼

    來自北京 回復
  16. 帥呆了,對于我這個初學者來說,真是棒棒噠 原來還闊以實現這樣的動畫效果,好厲害啊

    來自重慶 回復
  17. ?? ?? ?? ?? ?? ?? ?? ??

    來自河南 回復
  18. 帥呆了 : : ??

    來自北京 回復