游戲的趣味性在與各種關卡和難度，游戲的難度如上臺階，具有層層遞進的性質。本節我們為太空防御游戲增加關卡功能，讓游戲的難度由低到高，每一關我們稱作一個沖擊波，前面的沖擊波，外星人的數量比較少，下落速度也相對較慢，等到后面的沖擊波時，外星人的數量會越來越多，速度和攻擊力越來越大，于是游戲的難度也逐漸變大。

當完成本節代碼后，我們會得到如下效果，在每一輪沖擊波開始時，界面會出現如下信號：

當游戲進行到后幾輪沖擊波時，外星人數量和種類越來越多，戰況越來越激烈：

我們看看代碼的實現，在gamescenecomponent.vue中添加新的數據結構：

export default {data () {return {....// change 1waves: {}}},methods: {init () {....// change 2this.initWaves()this.startWave()...},// change 3initWaves () {console.log('begin init wave')this.waves.nextWave = 0this.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 = 120this.waves.currentWave = this.waves.data[this.waves.nextWave]this.waves.isActive = truethis.waves.enemiesSummoned = 0},// change 5wavesCleared () {this.waves.nextWave += 1if (this.waves.nextWave >= this.waves.data.length) {this.waves.nextWave = this.waves.data.length - 1}}, }

上面代碼定義了外星人攻擊沖擊波的數據結構，其中定義了每一輪攻擊過程中，外星人的種類和數量，在每一輪沖擊波啟動前，頁面會出現“wave cleared”的字體顯示特效，startWave啟動新一輪沖擊波流程，wavesCleared在沖擊波結束后，負責清理頁面和各種數據結構。接下來我們實現沖擊波流程的動態效果：

// change 6waveTick () {if (!this.waves.isActive) {return}if (this.cjs.Ticker.getTicks() % this.waves.currentWave.frequency === 0) {// 依次把不同種類的外星人召喚出來var accumunateTargetCount = 0for (var i = 0, len = this.waves.enemySummonOrder.length; i < len; i++) {var enemyType = this.waves.enemySummonOrder[i]// 獲得外星人個數var targetCount = this.waves.currentWave[enemyType] || 0accumunateTargetCount += targetCountif (this.waves.enemiesSummoned < accumunateTargetCount) {break}}if (this.waves.enemiesSummoned >= accumunateTargetCount) {this.waves.isActive = false} else {this.addEnemy(enemyType)this.waves.enemiesSummoned += 1}}},tick () {....// change 9this.wavesSpan.textContent = this.waves.nextWave + 1this.boardTick()// change 7this.waveTick()if (!this.waves.isActive && this.areEnemiesCleared()) {this.boardLayer.isAddingBuilding = falsethis.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 8removeAllBuildings () {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 = 0this.effectLayer.removeAllChildren()},

waveTick函數用于在沖擊波進行的過程中不斷的更新頁面。每一輪沖擊波有哪些種類的外星人已經外星人數量是多少，都是由wave.data中定義的數據決定的。waveTick的作用是把wave.data中定義的外星人種類和數量加載到頁面上，然后刷新頁面，實現頁面動態效果。waveTick是在時鐘函數tick中被調用的，在tick函數中，一旦判斷到一輪沖擊波結束時，他們把”wave cleared”的字體特效顯示到頁面上，就如開頭圖片展示的那樣。removeAllBuildings和removeAllBullets負責在一輪沖擊波結束時，將頁面上的建筑物和飛翔的子彈清除掉。最后我們從資源庫中將不停種類的外星人資源加載到瀏覽器里，并在合適的時候將他們描繪在頁面上：

// change 9enemy1 () {console.log('enemy1')var enemy1 = this.enemy()enemy1.addChild(new this.assetsLib.Enemy1())enemy1.attackSpeed = 50enemy1.speed = enemy1.originalSpeedenemy1.name = 'enemy1'return enemy1},enemy2 () {console.log('enemy2')var enemy2 = this.enemy()enemy2.addChild(new this.assetsLib.Enemy2())enemy2.originalSpeed = 1.0enemy2.attackSpeed = 40enemy2.hp = 8enemy2.deceleration = 0.008enemy2.speed = enemy2.originalSpeedenemy2.name = 'enemy2'return enemy2},boss2 () {var bossEnemy = this.enemy()bossEnemy.addChild(new this.assetsLib.Boss2())bossEnemy.originalSpeed = 0.2bossEnemy.deceleration = 0.002bossEnemy.hp = 300bossEnemy.attackSpeed = 50bossEnemy.name = 'boss'return bossEnemy},enemy3 () {console.log('enemy3')var enemy3 = this.enemy()enemy3.addChild(new this.assetsLib.Enemy3())enemy3.originalSpeed = 3.0enemy3.attackSpeed = 10enemy3.hp = 8enemy3.deceleration = 0.002enemy3.speed = enemy3.originalSpeedenemy3.name = 'enemy3'return enemy3},

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

更詳細的講解和代碼調試演示過程，請點擊鏈接

更多技術信息，包括操作系統，編譯器，面試算法，機器學習，人工智能，請關照我的公眾號：

總結

以上是生活随笔為你收集整理的VUE游戏设计：实现外星人的攻击冲击波的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。