VUE+WebPack前端游戏设计：实现外星人攻击建筑物时的冒烟效果

玩过红警或是星际的玩家都知道，当子弹或对手攻击建筑物时，建筑物会产生冒烟效果，并且逐步变形，当攻击足够大后，建筑物会爆炸毁灭，这种动态特效极大的增强了游戏的视觉观赏性和娱乐性，本节我们就实现外星人与玩家的道具碰撞时所产生的冒烟效果，这种效果提醒玩家道具正在遭受攻击，完成本节后，效果如下：

文本难以观看动态效果，更详细的讲解和代码调试演示过程，请点击链接

我们看看上图效果是如何实现的。我们先修改建筑物的属性，使得它具有能量值，一旦能量值降为0后，它就相当于被外星人摧毁：

building () {
        var b = new this.cjs.Container()
        b.cost = 0
        // change here
        b.shield = 10
        b.damageDeal = 0
        b.attackSpeed = 9999
        return b
      },

每种具体的建筑物会根据自身特点修改上面代码添加的属性值。当建筑物受到攻击时，它要掉血，一旦掉血过多就得从页面上被抹除，实现代码如下：

 buildingDamage (building, damage) {
        var realDamage = Math.max(damage, building.shield, 0)
        building.hp -= realDamage
        if (building.hp <= 0 && building.parent) {
          this.removeBuilding(building)
        }
      },
removeBuilding (building) {
     this.boardLayer.buildingMap[building.col][building.row] = undefined
     this.boardLayer.removeChild(building)
 },

代码中的hp值对应的就是建筑物的能量，传入的参数damage是外星人的攻击力，sheild对应的是建筑物的抵抗力，如果攻击力大于抵抗力，那么建筑物就会收到打击，于是hp的值就会减少，一旦该值减少到小于0后，建筑物就会被从页面上清除。建筑物在拖动到页面上时，会根据它所在的行和列将建筑物对应的对象记录在数组buildingMap里，这个数组在后面会用来判断建筑物和外星人是否产生碰撞，当建筑物从页面上消除时，数组对应的位置设置成undefined，然后建筑物从板块图层对象中删除掉。

外星人有两种状态，一是正在发动攻击，一是正在从上往下落，因此我们要增加外星人对象的相关属性用于标记这两种状态：

enemy () {
        var enemyObj = new this.cjs.Container()
        enemyObj.originalSpeed = 0.5
        enemyObj.deceleration = 0.4
        enemyObj.hp = 10
        enemyObj.damageDeal = 10
        enemyObj.attackSpeed = 100
        enemyObj.speed = enemyObj.originalSpeed

        // change here
        enemyObj.isAttacking = false
        enemyObj.attackingTarget = undefined
        enemyObj.attackingSmoke = new this.assetsLib.Explode()
        enemyObj.attackingSmoke.y = 50
        return enemyObj
      },

isAttacking用于记录外星人是否处于攻击状态，attackingTarget用于记录被攻击的建筑物，当攻击发生时会产生出冒烟的动画效果，冒烟效果其实是一种动态的图片资源，这个资源我们调用assetsLib.Explode()加载到页面，而attackingSmoke属性对应的就是冒烟图片资源，attackingSmoke.y表示冒烟特效图片在页面上的y坐标，这个在后面代码中会有所改变。

外星人对象对应着一个时钟回调函数，在这个函数里会修改外星人在页面上的y坐标，使得外星人产生从高处往下落的动态效果，我们利用这个回调函数来检测外星人是否属于攻击状态，代码如下：

enemyTick (enemyObj) {
    ....
     // change here
        if (this.cjs.Ticker.getTicks() % enemyObj.attackSpeed === 0) {
          if (enemyObj.isAttacking && enemyObj.attackingTarget) {
            this.buildingDamage(enemyObj.attackingTarget, enemyObj.damageDeal)
          }
        }
      }

在修改外星人属性时，我们增加一个attackSpeed属性，该属性用于设置检测外星人是否处于攻击状态的频率，这个值设置的是100，也就是主循环没经过100个ticks就去检测外星人对象是否跟道具相碰撞了。如果isAttacking属性为真，并且它对应的attackingTarget指向具体的对象，这个对象就是外星人要攻击的道具，于是调用buildingDamage函数实现道具的hp值减少。

接着我们实现外星人与道具碰撞的检测，一旦两者遇上，我们在页面上释放出冒烟特效。添加如下代码：

enemyAttackBuilding () {
        // 当外星人与道具相遇时，攻击道具
        for (var i = this.enemyList.length - 1; i >= 0; i--) {
          var enemy = this.enemyList[i]
          var row = enemy.row
          var col = enemy.col
          var target
          if (this.boardLayer.buildingMap[col][row] !== undefined) {
            target = this.boardLayer.buildingMap[col][row]
          } else if (this.boardLayer.buildingMap[col][row + 1] !== undefined) {
            target = this.boardLayer.buildingMap[col][row]
          }

          if (target !== undefined) {
            enemy.speed -= enemy.deceleration
            this.enemyStartAttack(enemy, target)
          } else {
            this.enemyStopAttack(enemy)
          }

          target = undefined
        }
      },

当道具拖动到页面上时，我们会计算道具在板块图层行和列，根据它所在的行和列把道具对象存储在buildingMap数组里。在外星人从上外下坠落的过程中，代码也随着根据外星人所在的坐标计算其在板块图层上的行和列，然后用计算的行和列到数组buildingMap里面查询，一旦查询到的对象不为空，那意味着外星人当前所在的位置有一个道具对象，于是两种就相遇了，然后代码调用enemyStartAttack()接口启动攻击流程，如果当前位置没有道具对象，或者说原来这个位置有道具对象，由于道具对象的hp值减少为0然后从页面上抹除后，那么就调用enemyStopAttack()接口停止攻击流程。我们看看这两个函数的实现：

enemyStartAttack (enemy, target) {
        if (!enemy.isAttacking) {
          enemy.isAttacking = true
          enemy.addChild(enemy.attackingSmoke)
        }
        enemy.attackingTarget = target
      },
      // change here
      enemyStopAttack (enemy) {
        if (enemy.isAttacking) {
          enemy.removeChild(enemy.attackingSmoke)
        }

        enemy.isAttacking = false
        enemy.attackingTarget = undefined
        enemy.speed = enemy.originalSpeed
      },

当调用enemyStartAttack时，它会把外星人的isAttacking属性设置为True,然后将attackingSmoke对象通过addChild加载到页面上，前面我们说过，这个对象对应的是冒烟的动画资源，当加载到页面上时，我们就可以看到冒烟动画呈现出来了。enemyStopAttack调用时，代码会通过removeChild把冒烟动画资源从页面上去除，这样页面上就不再显示冒烟的动画。

最后我们在boardTick函数里调用上面的enemyAttackingBuilding函数：

boardTick() {
....
this.enemyAttackBuilding()
}

完成上面的代码后，本节的功能就完成了，外星人会徐徐往下落，一旦途中遇到道具对象，那么它就启动冒烟动画，一旦道具的hp值减少为0，程序会消除冒烟动画，同时外星人继续往下回落。

更详细的讲解和代码调试演示过程，请点击链接

欢迎关注公众号，让我们一起学习，交流，成长：