游戏的一个可玩性在于，让玩家在一种战略平衡中做抉择。例如我们在游戏开始时让玩家拥有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"&atejs = createjswindow.assetsLib = lib// change 1window.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 2manifest: [{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 3this.images = // change 4this.load()... }...
}this.load函数是调用preloadjs库的功能，将彩色图片资源加载进来，我们看看它的实现：
// change 5load () {var loader = new this.cjs.LoadQueue(false)loader.addEventListener('fileload', function (e) {if (pe === '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 6var building = Building(type)st},上面代码会根据玩家选择的建筑物类型，获得建筑物建造所需的能量值。
satellite2 () {
....// Frequency = 100b.ticks = 0this.satelliteList.push(b)...
},
castle () {....// st = 80b.tick = 0
},
castle2 () {
...
// change 9
b.cost = 300
b.tick = 0
this.castleList.push(b)
},
summonBullet (castle) {var bullet = this.bullet(castle.damageDeal)// change 10bullet.x = Math.abs(castle.x + Math.random() * 20 - 10)bullet.y = his.addBullet(bullet)
},
removeBuilding (building) {if (building === undefined) {return}this.boardLayer.l][w] = veChild(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}}}, 上面代码对一些建筑物的生成添加了资源消耗量，并对以前一些好书做一些小修改，上面代码完成后，加载页面就可以看到丰富多彩的外星人从天而降了，至此我们的地球防御游戏的开发就结束了。
我们的游戏其实可以增加更多功能，例如没换一轮冲击波时就改变游戏的页面背景，增加一个暂停按钮，玩家万一玩到一半突然尿急可以立刻暂停，等嘘嘘回来后继续再战，相星际争霸一样增加快捷键，玩家不用点来点去，只要快速按下快捷键就能在指定位置建造指定建筑物，除了能量泡之外再引入新的资源，例如我们可以把上一节的钻石和钱币引进来，有很多好玩的，能改进游戏特色的地方，就等着你动手实现了！
更详细的讲解和代码调试演示过程，请点击链接
更多技术信息，包括操作系统，编译器，面试算法，机器学习，人工智能，请关照我的公众号：
本文发布于:2024-02-08 19:43:05，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170739262968400.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
