VUE+WebPack游戏设计：实现子弹发射击打外星人效果
VUE+WebPack游戏设计：实现子弹发射击打外星人效果
本节将要实现的游戏效果是，当用户在页面上拖拽了一个炮台后，炮台会自动发射出子弹，当飞跃的子弹打中外星人时，外星人就会从页面上消失，本节代码完成后效果如下：
我们看看代入如何实现。第一步是构建子弹对象，代码如下：
// change 1
bullet (damageDeal) {
var obj = new this.cjs.Container()
obj.addChild(new this.assetsLib.Bullet())
obj.cache(-25, -25, 50, 50)
obj.damageDeal = damageDeal | 1
return obj
},
// change 2
bulletTick (bullet) {
if (this.cjs.Ticker.getPaused()) {
return
}
bullet.y -= 1.5
}bullet函数构造一个cjs容器对象，然后从资源库中加载子弹图片资源，并调用cache缓存在页面里，damgeDeal用于设置子弹的攻击力。bulletTick在时钟循环函数中被调用，它会不断的修改子弹对象在页面上的y坐标，从而实现子弹在页面上的飞升效果。
图片中发射子弹的炮台是我们以前实现的castle对象，我们要把所有的castle对象加入到一个列表中，这样我们才能知道有多少炮台要发射子弹，所以代码修改如下：
castle () {
var b = this.building()
b.addChild(new this.assetsLib.Castle())
b.hp = 300
b.shield = 5
b.damageDeal = 2
b.attackSpeed = 120
// change 3
b.tick = 0
// change 10
this.castleList.push(b)
return b
},代码用castleList数组来记录所有炮台，其中的tick变量用来设置炮台发射子弹的时间间隔。接着我们要增加一个castleTick函数，在主时钟函数中调用，代码如下：
// change 4
castleTick () {
if (this.cjs.Ticker.getPaused()) {
return
}
for (var i = 0; i < this.castleList.length; i++) {
var castle = this.castleList[i]
castle.tick += 1
if (castle.tick % castle.attackSpeed === 0) {
this.summonBullet(castle)
}
}
for (i = 0; i < this.bulletList.length; i++) {
this.bulletTick(this.bulletList[i])
}
},主时钟循环函数里，它会反复调用castleTick函数，该函数轮询castleList数组，从中取出炮台对象，增加炮台对象的tick计数器，一旦计数器达到指定值时，它会调用summonBullet函数创建子弹对象，然后该函数又会轮询子弹对象数组，然后调用blletTick函数设置页面上子弹对象的y坐标，从而使得子弹产生往上飞的效果。我们再看summonBullet函数的实现：
// change 5
summonBullet (castle) {
var bullet = this.bullet(castle.damageDeal)
bullet.x = castle.x + Math.random() * 20 - 10
bullet.y = castle.y
this.addBullet(bullet)
},
// change 7
addBullet (bullet) {
this.effectLayer.addChild(bullet)
this.bulletList.push(bullet)
},该函数就是调用原先实现的bullet函数创建子弹对象，并把子弹在页面上的坐标设置成与对应的炮台一致，然后调用addBullet函数把子弹对象加入特效图层和bulletList数组。这里用到的几个变量要在data()函数中增加：
data () {
return {
....
// change 6
bulletList: [],
// change 9
castleList: []
}
}接着我们要在主轮询函数中添加代码，驱动上面代码的调用，在boardTick函数中增加如下代码：
boardTick () {
....
// change 11
this.castleTick()
// change 8 轮询敌人队列和子弹队列，看看两者是否相撞
for (i = this.enemyList.length - 1; i >= 0; i--) {
for (var j = this.bulletList.length - 1; j >= 0; j--) {
var bullet = this.bulletList[j]
var pos = bullet.localToLocal(0, 0, this.effectLayer)
rowCol = this.screenToRowCol(pos.x, pos.y)
if (this.enemyMap[rowCol.col][rowCol.row] !== undefined) {
var enemyHit = this.enemyMap[rowCol.col][rowCol.row]
this.enemyDamage(enemyHit, bullet.damageDeal)
if (enemyHit.hp <= 0) {
this.enemyMap[rowCol.col][rowCol.row] = undefined
this.removeItem(this.enemyList, enemyHit)
this.boardLayer.removeChild(enemyHit)
}
this.removeItem(this.bulletList, bullet)
this.effectLayer.removeChild(bullet)
}
}
}
}，
....
enemyDamage (enemy, damage) {
enemy.hp -= damage
},boardTick函数会被主循环函数调用，它会调用castleTick函数，于是炮台对象会不断的创建子弹对象。然后代码通过两个循环轮询外星人数组和子弹数组，它从子弹数组中取出子弹对象，将子弹所在的坐标转换成页面上的行和列，接着根据行和列到外星人分布图，也就是enemyMap中查询，如果对应的位置有外星人对象，那表明子弹击中了外星人。此时代码调用enemyDamage函数计算外星人被击中后会掉多少血，如果外星人的能力耗尽，那么if(enemyHit.hp <=0)部分的代码会被执行，于是外星人对象就会从页面上被删除。同时不管外星人是否被摧毁，最后的两句代码：
this.removeItem(this.enemyList, bullet)
this.effectLayer.removeChild(bullet)都会把子弹从页面上去除。完成以上代码后，图片所示的效果就可以完成了。