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
