游戏的一个可玩性在于，让玩家在一种战略平衡中做抉择。例如我们在游戏开始时让玩家拥有120单位的能量，玩家可以采取以下几种步骤来开展游戏：
1.建筑一个卫星30E，一个炮台80E，然后还剩10E。然后等300毫秒后收集第一个能量泡，从而获得足够能源建造其他卫星或炮台。
2.连续建造两个卫星60E，剩下60E，等300毫秒后获取两个能量泡，从而获得总共260E的能量，然后玩家可以连续建造三个炮台。
3.一下子建造3个卫星90E，还剩30E。等300毫秒后连续收获3个能量泡，使得能源达到330E，然后可以一口气建造4个炮台。
4.一下子建造4个卫星120E,等300毫秒后收获4个能量泡，然后一下子建造5个炮台。
无论玩家作何选择，最终目的是顶住冲击波中的外星人攻击，好的战略必须使得玩家能够迅速的建筑足够多的炮台。如果你一口气建造4个卫星，那么你只能眼睁睁的看着外星人攻打过来，你很可能来不及建造炮台就完蛋了。因此玩家要根据每一轮冲击波中外星人的数量和特性，在资源约束下，选择不同的建造策略，如此一来，我们的游戏就具备即时战略的可玩性。
本节我们要完成的代码，一来是增加各种建造物的成本，实现资源约束，而来是预加载彩色资源，把原来黑色线条的外星人变成愉悦的彩色图案，本节完成后，效果如下：
首先我们先把一系列彩色图片资源放置在给定目录’/static/images’：
在页面加载时，我们需要跑把这些资源加载到资源库中，资源的预加载我们需要使用一个名为preloadjs的第三方辅助库，因此在indexl.html中做如下修改：
<head>
<meta charset="utf-8">
....
<script type="text/javascript" src="./static/preloadjs-0.4.1.min.js"></script>
<script type="text/javascript">
window.createjs = createjs
window.assetsLib = lib
// change 1
window.images = images
</script>
<title>Space Defender</title>
</head>在代码中我们将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 9
b.cost = 300
b.tick = 0
this.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
}
}
}, 上面代码对一些建筑物的生成添加了资源消耗量，并对以前一些好书做一些小修改，上面代码完成后，加载页面就可以看到丰富多彩的外星人从天而降了，至此我们的地球防御游戏的开发就结束了。
我们的游戏其实可以增加更多功能，例如没换一轮冲击波时就改变游戏的页面背景，增加一个暂停按钮，玩家万一玩到一半突然尿急可以立刻暂停，等嘘嘘回来后继续再战，相星际争霸一样增加快捷键，玩家不用点来点去，只要快速按下快捷键就能在指定位置建造指定建筑物，除了能量泡之外再引入新的资源，例如我们可以把上一节的钻石和钱币引进来，有很多好玩的，能改进游戏特色的地方，就等着你动手实现了！
更多技术信息，包括操作系统，编译器，面试算法，机器学习，人工智能，请关照我的公众号：