游戏的一个可玩性在于, 让玩家在一种战略平衡中做抉择. 例如我们在游戏开始时让玩家拥有 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
- }
- }
- },
上面代码对一些建筑物的生成添加了资源消耗量, 并对以前一些好书做一些小修改, 上面代码完成后, 加载页面就可以看到丰富多彩的外星人从天而降了, 至此我们的地球防御游戏的开发就结束了.
我们的游戏其实可以增加更多功能, 例如没换一轮冲击波时就改变游戏的页面背景, 增加一个暂停按钮, 玩家万一玩到一半突然尿急可以立刻暂停, 等嘘嘘回来后继续再战, 相星际争霸一样增加快捷键, 玩家不用点来点去, 只要快速按下快捷键就能在指定位置建造指定建筑物, 除了能量泡之外再引入新的资源, 例如我们可以把上一节的钻石和钱币引进来, 有很多好玩的, 能改进游戏特色的地方, 就等着你动手实现了!
来源: http://www.jianshu.com/p/edb85fc15765