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 描述关卡

    一个把关卡数据和把敌方飞船添加到屏幕上的机制整合起来的部件

    设置敌方飞船：