VUE+WebPack前端游戏设计:实现外星人的动态下滑特效

在上一节，我们完成了道具在页面上的拖拽特效。当用户在页面底部点击按钮选择一个道具后，鼠标在页面上移动时，一个闪光方块会跟随着鼠标移动，一旦鼠标在页面上单击后，相应的道具就会出现在鼠标点击的地方。

有了道具，本节我们要引入侵略外星人，完成本节代码后，可以得到如下效果：

屏幕快照 2018-03-16 下午5.39.36.png

页面上有两个外星人从高空徐徐下落，后面我们会开发代码，让用户拖拽的道具能阻止外星人的下滑，此处看不到动态效果，更详实的演示请点击如下链接：
更详细的讲解和代码调试演示过程，请点击链接

我们看看对应的代码实现。首先我们先创建外星人的类对象，在gamesceneComponent.js中添加如下代码：

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
        return enemyObj
      },

enemy 函数调用后返回一个cjs的容器对象，这个对象在后面会用来加载外星人对应的图片资源。在函数中配置了外星人对象的一些基本属性，例如speed代表它下落速度的快慢，daageDeal表示外星人的攻击力等。这个函数用于创建外星人的类原型，我们继续添加代码在原型的基础上增加配置，进而实现不同种类的外星人：

enemyTick (enemyObj) {
        if (this.cjs.Ticker.getPaused()) {
          return
        }
        if (enemyObj.speed < 0) {
          enemyObj.speed = 0
        }

        enemyObj.y += enemyObj.speed
      },
      enemyDummy () {
        var dummy = this.enemy()
        dummy.addChild(new this.assetsLib.Enemy1())
        dummy.originalSpeed = 0.3
        dummy.deceleration = 0.002
        dummy.hp = 1
        dummy.speed = dummy.originalSpeed
        return dummy
      },
      boss () {
        var bossEnemy = this.enemy()
        bossEnemy.addChild(new this.assetsLib.Boss())
        bossEnemy.originalSpeed = 0.2
        bossEnemy.deceleration = 0.002
        bossEnemy.hp = 300
        bossEnemy.attackSpeed = 50
        return bossEnemy
      }

enemyDummy和boss两个函数用来创建两种不同级别的外星人，enemyDummy创建的外形人就是上面图片演示中的宇宙飞船，boss就是上面图片中处于低位的方块机器人。这两个函数分别给enemy返回的容器对象加载不同的图片资源，然后配置不同的属性，例如速度，攻击力等，enemyDummy生成战斗力较弱的外星人，它的速度和攻击力都要比boss生成的外星人低。enemyTick函数用来在游戏的主循环中不断的更改外星人对象的相关属性，在该函数里是修改了外星人的速度属性，于是就形成了外星人在页面上不断从高处往下落的动态效果。

接下来我们要实现的回调函数，在游戏的Tick回调函数里被执行，这样它就能动态的在页面上绘制外星人对象从而实现动画效果，其代码如下：

init () {
...
this.boardLayer = this.Board()
this.stage.addChild(this.boardLayer)
// change here
// 手动添加两个敌人对象
this.addEnemy('enemyDummy')
this.addEnemy('boss')
this.lives = 2
...
},
...
tick () {
...
 // change here
 this.boardTick()
 },
 ...
// change here
      boardTick () {
        // 从敌人对象数组中取出敌人对象，根据属性更新敌人对象在页面上的位置
        this.enemyMap = this.create2DArray(this.boardLayer.cols, this.boardLayer.rows)
        for (var i = 0; i < this.enemyList.length; i++) {
          var enemy = this.enemyList[i]
          var rowCol = this.screenToRowCol(enemy.x, enemy.y)
          this.enemyMap[rowCol.col][rowCol.row] = enemy
          enemy.col = rowCol.col
          enemy.row = rowCol.row
          this.enemyTick(enemy)
        }
        var len = 0
        // 当敌人对象落入到页面底部以后将其从页面上删除
        for (i = 0, len = this.enemyMap.length; i < len; i++) {
          if (this.enemyMap[i][this.boardLayer.rows] !== undefined) {
            var bottomEnemy = this.enemyMap[i][this.boardLayer.rows]
            this.lives -= 1
            this.removeItem(this.enemyList, bottomEnemy)
            if (bottomEnemy.parent) {
              bottomEnemy.parent.removeChild(bottomEnemy)
            }
          }
        }
      },
      // change here
      addEnemy (enemyClass) {
        var sprite = null
        switch (enemyClass) {
          case 'enemyDummy':
            sprite = this.enemyDummy()
            break
          case 'boss':
            sprite = this.boss()
            break
        }

        this.boardLayer.addChild(sprite)
        var col = Math.floor(Math.random() * this.boardLayer.cols)
        var pos = this.rowColToScreen(0, col)
        sprite.x = pos.x
        sprite.y = pos.y
        sprite.row = 0
        sprite.col = col
        this.enemyList.push(sprite)
      },

addEnemy函数根据传入参数调用相关接口构造外星人对象，如果传入的参数是'dummyEnemy'，那么它调用dummyEnemy接口创建战斗力若的飞船外星人，如果传入参数是'boss',那么它调用boss接口创建方块机器人，然后它把创建的外星人对象加入到板块图层，同时设置好它在图层中的坐标后，将对象加入到enemyList数组。

在init函数中，我们增加两行代码，通过调用addEnemy接口创建了两个外星人。boardTick函数用来不断的更新外星人对象在页面上的坐标，进而形成外星人在页面上变动的动态效果。它先调用create2DArray函数建立一个二维数组对象，然后根据外星人在页面上的坐标把外星人对象存储在这个二维数组的相应坐标下，然后调用enemyTick修改外星人对象的速度属性进而改变外星人的下降速度，进而改变外星人在页面上的坐标从而营造出外星人对象不断从高处下落的效果。

第二个for循环用于判断外星人的y坐标是否已经超出页面，如果是那么就把它从板块图层里删除，回收对象占据的页面内存。boardTick函数会在Tick函数里调用，Tick函数是游戏主循环不断调用的刷新函数，因此boardTick的调用频率跟Tick一样，于是它一旦执行就可以不断的修改外星人对象的坐标，进而形成下落效果。

下一节，我们将进一步开发更多更复杂的游戏功能，更详细的讲解和代码调试演示过程，请点击链接。

更多技术信息，包括操作系统，编译器，面试算法，机器学习，人工智能，请关照我的公众号：

这里写图片描述