看到標題想歪的,請先面壁三秒鐘,我向來是一位嚴肅正經有節操的人。
話說,前段時間忽然懷念微信5.0的黑白版的飛機大戰,進微信遊戲大廳尋了個遍,好像找不到了,有種物是人非的趕腳。突發奇想利用業餘時間用Axure打造了一個飛機大戰,在空虛寂寞冷的時候可以擼一把。效果如下方左圖:
有無限多的敵機無恥地向你撲面而來;
你用鍵盤的方向鍵控制戰鬥機參加戰鬥(被敵機撞擊算報廢,你一共有3架戰鬥機);
戰鬥機可以源源不斷地向敵機發射子彈;
計分系統(打掉一架敵機得100分);
難度等級系統(打10架敵機增加一個難度等級,敵機飛行速度加快);
因為涉及知識點比較多,又希望將他們描述清楚,所以本文只實現上方右圖的效果。①讓敵機循環飛行②讓子彈連續發射。請基礎較好的童鞋見諒。
敵機.png、戰鬥機.png、子彈.png(為了效果好,老老實實用PS摳出2個透明背景的飛機,此處省略N個字)、拉出四個矩形用途和尺寸分別為:450*530px作為背景、2個450*42px分別作為地面和天花板、開始按鈕。將敵機.png、戰鬥機.png、子彈.png按照下圖方式打包成「戰鬥機+子彈」、「敵機-殼」兩個動態面板。
實現方法:用一個空的動態面板命名為「循環」,協助敵機實現循環飛行。流程開始後,設置動態面板「循環」顯示→「循環」顯示後觸發:「敵機-殼」復位:移動敵機到界面頂部絕對位置(範圍內隨機,0)的位置and啟動飛機:相對位置移動敵機(0,1),「敵機-殼」在移動的情況下設置用例→如果「敵機-殼」撞擊到地面,隱藏「循環」,「循環」隱藏後觸發顯示「循環」的用例→「敵機-殼」未接觸到地面,則繼續向下飛行,從而達到敵機飛行的循環。具體流程圖如下所示:
在上述流程圖中,紅色的閉環促進敵機不斷地繼續向前飛行,藍色的閉環促進敵機不斷重現。
下面貼出「循環」和「敵機-殼」的交互用例
根據同樣的原理,我們可以做出子彈循環向上飛行的樣子。區別在於①子彈飛行的方向在縱坐標的負方向。②子彈飛行速度較快。③子彈在「子彈軌道」這個動態面板裡飛行。因此子彈在移動時觸發每一個移動單位是(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下,敵機的飛行速度是成線性增長的。
我們先來回顧一下中學時期學到關於對數函數和直線函數曲線的區別:
從上圖不難看出,我使用對數函數的目的是為了控制敵機飛行速度的增量。拉長用戶可升級的空間,增加遊戲的可玩性。在Axure裡[[Math.log(x)]]函數使用數學常量e作為對數的底(e約為2.71828),因此範圍的只一定為正數。但是當x比較小的時候log(x)返回的值仍然比較小這就意味著在前幾個level裡飛機的飛行速度非常慢,近乎龜速,用戶會沒耐心玩,遊戲可玩性不高。這也是為什麼我會在函數後面加一個常量0.5的原因。
希望感興趣的同學別心急,先按跟著本文的進展動起來,讓敵機起飛,讓子彈飛一會兒!後面會更精彩。
最後照舊,獻上本文效果的rp源文件,回復關鍵詞「打飛機」獲取下載地址,同時也歡迎來公眾號找我。
12月19日,中國上海,大咖雲集,2015產品運營年終大會強勢來襲,剩餘極少的搶票機會, 猛戳【閱讀原文】立即搶票。