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 描述关卡
一个把关卡数据和把敌方飞船添加到屏幕上的机制整合起来的部件
设置敌方飞船: