HTML5移動遊戲開發高階程式設計 2：從玩具到遊戲

2.1 引言

    新增一些敵方飛船，並設定各種遊戲元素，這樣才能讓敵我雙方交戰

2.2 建立GameBoard物件

    第一步是新增一種機制來同時處理頁面上的一群精靈。

    儘管Game物件提供了一種切換皮膚進出的機制，但在把任意數量的精靈新增至頁面這方面，並未提供什麼簡易的做法。所以，我們要把GameBoard物件加進來。

    GameBoard物件的作用更像是跳棋遊戲中的遊戲棋盤，它提供放置所有元件的場所，然後指明它們的移動方式，職責可分為4種不同型別：

• 負責儲存一個物件列表，以及把精靈新增到列表中及從列表中刪除精靈。
• 此外，它還需要遍歷該物件列表
• 需要以與之前的皮膚相同的方式來進行響應，它必須擁有step和draw函式，這兩個函式會呼叫物件列表中每個物件的相應方法。
• 需要檢測物件之間的碰撞

2.3 發射導彈

    繫結空格鍵，讓它發射一對炮彈

    新增炮彈精靈： 

    連線導彈和玩家：

2.4 新增敵方飛船

     計算敵方飛船的移動： 也可用TweenJS之類的補間引擎

vx = A + B * sin(C * t + D)

vy = E + F * sin(G * t + H)

      構建Enemy物件：

2.5 重構精靈類

     JavaScript沒有類的概念，所以不要定義類來表示被繼承的屬性，你要建立一個原型物件，當某個引數並未在實際物件中定義時，JavaScript就會到這個原型中查詢。

     建立一個通用的Sprite類：

     重構PlayShip：    

     重構PlayerMissile：

     重構Enemy：

2.6 處理碰撞

    炸掉對方，就碰撞而言，Alien Invasion可以使用兩種機制。第一種機制主動在每個物件的step函式中進行檢查，檢視該物件與其互動的其他所有物件的碰撞情況。第二種機制提供通用的碰撞階段，在這個階段中，物件在擊中彼此時觸發碰撞事件。前一種機制的實現較為簡單，但後一種提供了更好的綜合效能，且能夠被更好地優化。

    新增物件型別：

    讓導彈和敵方飛船碰撞：

    讓敵方飛船和玩家碰撞：

    製造爆炸：

2.7 描述關卡

    一個把關卡資料和把敵方飛船新增到螢幕上的機制整合起來的部件

    設定敵方飛船：