window.createjs = createjs window.assetsLib = lib // change 1 window.images = images
在代碼中我們將preloadjs庫加載到頁面時，把assets.js中的images數組引用到windows對象中，彩色圖片資源就是要加載到這個images數組裡。打開assets.js，做如下修改：
lib.properties = { width: 640, height: 1000, fps: 24, color: "#FFFFFF", // change 2 manifest: [ {src:"static/images/bosspsd.png", id:"bosspsd"}, {src:"static/images/castlepsd.png", id:"castlepsd"}, {src:"static/images/castle2psd.png", id:"castle2psd"}, {src:"static/images/enemy1psd.png", id:"enemy1psd"}, {src:"static/images/enemy2psd.png", id:"enemy2psd"}, {src:"static/images/enemy3psd.png", id:"enemy3psd"}, {src:"static/images/junkpsd.png", id:"junkpsd"}, {src:"static/images/satellitepsd.png", id:"satellitepsd"}, {src:"static/images/satellite2psd.png", id:"satellite2psd"} ]};manifest數組用來指定彩色圖片資源的路徑，我們將其修改為/static/images。回到gamescenecomponent.vue，我們先在初始化函數中獲得資源庫的images數組：
methods: { init () { ... // change 3 this.images = window.images ... // change 4 this.load() ... } ...}this.load函數是調用preloadjs庫的功能，將彩色圖片資源加載進來，我們看看它的實現：
// change 5 load () { var loader = new this.cjs.LoadQueue(false) loader.addEventListener('fileload', function (e) { if (e.item.type === 'image') { // 將彩色圖片加載到assets庫 this.images[e.item.id] = e.result } }.bind(this)) loader.addEventListener('complete', this.start) loader.loadManifest(this.assetsLib.properties.manifest) }, start () { this.initWaves() this.startWave() },在上面代碼中，我們獲得一個loader,這個loader就來找與preloadjs庫提供的對象，然後添加一個’fileload’事件監控，一旦有文件加載成功後，我們提供的函數就會被調用。我們在該函數里查看加載的是否是圖像資源，如果是，那麼我們把images數組裡面的內容做相應修改。最後我們添加一個’complete’事件的監控，一旦所有資源加載完成後，該事件就會被觸發，於是start函數被調用，由此就啟動了遊戲進程。loadManifest函數的作用是，從assets庫定義的mainifest數組中讀取要加載的資源所在路徑。start函數的實現也簡單，只是啟動一個外星人攻擊衝擊波即可。
接下來我們要增加遊戲的資源約束，讓玩家在選擇建築物時受當前能量的約束，於是做如下修改：
getBuildingCostByType (type) { // change 6 var building = this.getBuilding(type) return building.cost }, 上面代碼會根據玩家選擇的建築物類型，獲得建築物建造所需的能量值。
satellite2 () {.... // change 7 b.energyFrequency = 100 b.ticks = 0 this.satelliteList.push(b) ...},castle () { .... // change8 b.cost = 80 b.tick = 0},castle2 () {...// change 9b.cost = 300b.tick = 0this.castleList.push(b)},summonBullet (castle) { var bullet = this.bullet(castle.damageDeal) // change 10 bullet.x = Math.abs(castle.x + Math.random() * 20 - 10) bullet.y = castle.y this.addBullet(bullet)},removeBuilding (building) { if (building === undefined) { return } this.boardLayer.buildingMap[building.col][building.row] = undefined this.boardLayer.removeChild(building) // change 11 將建築物從衛星數組或炮臺數組中刪除 for (var i = 0; i < this.satelliteList.length; i++) { if (this.satelliteList[i] === building) { this.satelliteList.splice(i, 1) break } } for (i = 0; i < this.castleList.length; i++) { if (this.castleList[i] === building) { this.castleList.splice(i, 1) break } } },上面代碼對一些建築物的生成添加了資源消耗量，並對以前一些好書做一些小修改，上面代碼完成後，加載頁面就可以看到豐富多彩的外星人從天而降了，至此我們的地球防禦遊戲的開發就結束了。
我們的遊戲其實可以增加更多功能，例如沒換一輪衝擊波時就改變遊戲的頁面背景，增加一個暫停按鈕，玩家萬一玩到一半突然尿急可以立刻暫停，等噓噓回來後繼續再戰，相星際爭霸一樣增加快捷鍵，玩家不用點來點去，只要快速按下快捷鍵就能在指定位置建造指定建築物，除了能量泡之外再引入新的資源，例如我們可以把上一節的鑽石和錢幣引進來，有很多好玩的，能改進遊戲特色的地方，就等著你動手實現了！
閱讀更多 wycl16514 的文章
關鍵字: 讓玩家 建築 JavaScript
