游戲的趣味性在與各種關(guān)卡和難度，游戲的難度如上臺階，具有層層遞進(jìn)的性質(zhì)。本節(jié)我們?yōu)樘辗烙螒蛟黾雨P(guān)卡功能，讓游戲的難度由低到高，每一關(guān)我們稱作一個沖擊波，前面的沖擊波，外星人的數(shù)量比較少，下落速度也相對較慢，等到后面的沖擊波時，外星人的數(shù)量會越來越多，速度和攻擊力越來越大，于是游戲的難度也逐漸變大。

當(dāng)完成本節(jié)代碼后，我們會得到如下效果，在每一輪沖擊波開始時，界面會出現(xiàn)如下信號：

這里寫圖片描述

當(dāng)游戲進(jìn)行到后幾輪沖擊波時，外星人數(shù)量和種類越來越多，戰(zhàn)況越來越激烈：

這里寫圖片描述

我們看看代碼的實現(xiàn)，在gamescenecomponent.vue中添加新的數(shù)據(jù)結(jié)構(gòu)：

export default {
    data () {
      return {
      ....
      // change 1
        waves: {}
      }
    },
    methods: {
      init () {
      ....
      // change 2
      this.initWaves()
      this.startWave()
      ...
      },
      // change 3
      initWaves () {
        console.log('begin init wave')
        this.waves.nextWave = 0
        this.waves.isActive = false
        // 定義一輪沖擊波中外星人從天而降的次序
        this.waves.enemySummonOrder = ['EnemyDummy', 'Enemy1', 'Enemy2', 'Enemy3', 'Boss', 'Boss2']
        console.log('init wave data')
        this.waves.data = [
        // 第一輪沖擊波
        {'EnemyDummy': 1, frequency: 10},
        // 第二輪沖擊波
        {'EnemyDummy': 8, 'Enemy1': 5, 'Enemy2': 5, 'Boss': 2, frequency: 150},
        // 第三輪沖擊波
        {'EnemyDummy': 1, 'Enemy1': 1, 'Enemy2': 1, 'Enemy3': 1, 'Boss': 1, 'Boss2': 30, frequency: 50}
        ]
        console.log('init wave sprite')
        this.nextWaveSprite = new this.assetsLib.WaveCleared()
        this.stage.addChild(this.nextWaveSprite)
        this.nextWaveSprite.x = 999
      },

      // change4 啟動一輪外星人攻擊的沖擊波
      startWave () {
        this.energies = 120
        this.waves.currentWave = this.waves.data[this.waves.nextWave]
        this.waves.isActive = true
        this.waves.enemiesSummoned = 0
      },

      // change 5
      wavesCleared () {
        this.waves.nextWave += 1
        if (this.waves.nextWave >= this.waves.data.length) {
          this.waves.nextWave = this.waves.data.length - 1
        }
      },
}

上面代碼定義了外星人攻擊沖擊波的數(shù)據(jù)結(jié)構(gòu)，其中定義了每一輪攻擊過程中，外星人的種類和數(shù)量，在每一輪沖擊波啟動前，頁面會出現(xiàn)“wave cleared"的字體顯示特效，startWave啟動新一輪沖擊波流程，wavesCleared在沖擊波結(jié)束后，負(fù)責(zé)清理頁面和各種數(shù)據(jù)結(jié)構(gòu)。接下來我們實現(xiàn)沖擊波流程的動態(tài)效果：

// change 6
      waveTick () {
        if (!this.waves.isActive) {
          return
        }

        if (this.cjs.Ticker.getTicks() % this.waves.currentWave.frequency === 0) {
          // 依次把不同種類的外星人召喚出來
          var accumunateTargetCount = 0
          for (var i = 0, len = this.waves.enemySummonOrder.length; i < len; i++) {
            var enemyType = this.waves.enemySummonOrder[i]
            // 獲得外星人個數(shù)
            var targetCount = this.waves.currentWave[enemyType] || 0
            accumunateTargetCount += targetCount
            if (this.waves.enemiesSummoned < accumunateTargetCount) {
              break
            }
          }

          if (this.waves.enemiesSummoned >= accumunateTargetCount) {
            this.waves.isActive = false
          } else {
            this.addEnemy(enemyType)
            this.waves.enemiesSummoned += 1
          }
        }
      },
      tick () {
      ....
       // change 9
        this.wavesSpan.textContent = this.waves.nextWave + 1

        this.boardTick()

        // change 7
        this.waveTick()
        if (!this.waves.isActive && this.areEnemiesCleared()) {
          this.boardLayer.isAddingBuilding = false
          this.removeAllBuildings()
          this.removeAllBullets()
          this.wavesCleared()

          // 顯示字體動畫
          this.cjs.Tween.get(this.nextWaveSprite).to({x: this.canvas.width / 2, y: this.canvas.height / 2, alpha: 0}).to({alpha: 1.0}, 300).wait(1000).to({alpha: 0}, 300).to({x: 999})

          this.startWave()
        }
      },
      // change 8
      removeAllBuildings () {
        for (var i = 0; i < this.boardLayer.cols; i++) {
          for (var j = 0; j < this.boardLayer.rows; j++) {
            this.removeBuilding(this.boardLayer.buildingMap[i][j])
          }
        }

        this.satelliteList = []
        this.castleList = []
      },
      areEnemiesCleared () {
        return this.enemyList.length === 0
      },
      removeAllBullets () {
        this.bulletList.length = 0
        this.effectLayer.removeAllChildren()
      },

waveTick函數(shù)用于在沖擊波進(jìn)行的過程中不斷的更新頁面。每一輪沖擊波有哪些種類的外星人已經(jīng)外星人數(shù)量是多少，都是由wave.data中定義的數(shù)據(jù)決定的。waveTick的作用是把wave.data中定義的外星人種類和數(shù)量加載到頁面上，然后刷新頁面，實現(xiàn)頁面動態(tài)效果。waveTick是在時鐘函數(shù)tick中被調(diào)用的，在tick函數(shù)中，一旦判斷到一輪沖擊波結(jié)束時，他們把"wave cleared"的字體特效顯示到頁面上，就如開頭圖片展示的那樣。removeAllBuildings和removeAllBullets負(fù)責(zé)在一輪沖擊波結(jié)束時，將頁面上的建筑物和飛翔的子彈清除掉。最后我們從資源庫中將不停種類的外星人資源加載到瀏覽器里，并在合適的時候?qū)⑺麄兠枥L在頁面上：

// change 9
      enemy1 () {
        console.log('enemy1')
        var enemy1 = this.enemy()
        enemy1.addChild(new this.assetsLib.Enemy1())
        enemy1.attackSpeed = 50
        enemy1.speed = enemy1.originalSpeed
        enemy1.name = 'enemy1'

        return enemy1
      },
      enemy2 () {
        console.log('enemy2')
        var enemy2 = this.enemy()
        enemy2.addChild(new this.assetsLib.Enemy2())
        enemy2.originalSpeed = 1.0
        enemy2.attackSpeed = 40
        enemy2.hp = 8
        enemy2.deceleration = 0.008
        enemy2.speed = enemy2.originalSpeed
        enemy2.name = 'enemy2'

        return enemy2
      },
      boss2 () {
        var bossEnemy = this.enemy()
        bossEnemy.addChild(new this.assetsLib.Boss2())
        bossEnemy.originalSpeed = 0.2
        bossEnemy.deceleration = 0.002
        bossEnemy.hp = 300
        bossEnemy.attackSpeed = 50

        bossEnemy.name = 'boss'
        return bossEnemy
      },
      enemy3 () {
        console.log('enemy3')
        var enemy3 = this.enemy()
        enemy3.addChild(new this.assetsLib.Enemy3())
        enemy3.originalSpeed = 3.0
        enemy3.attackSpeed = 10
        enemy3.hp = 8
        enemy3.deceleration = 0.002
        enemy3.speed = enemy3.originalSpeed
        enemy3.name = 'enemy3'

        return enemy3
      },

完成上面代碼后，我們就可以看到如開頭第二幅圖那樣的，五花八門的外星人從天而降，我們在底部架起各種炮臺和建筑打擊外星人，整幅畫面具有星球大戰(zhàn)般的絢麗感。

更詳細(xì)的講解和代碼調(diào)試演示過程，請點擊鏈接

更多技術(shù)信息，包括操作系統(tǒng)，編譯器，面試算法，機器學(xué)習(xí)，人工智能，請關(guān)照我的公眾號：

這里寫圖片描述