专栏首页Coding迪斯尼VUE+Webpack游戏设计:增加游戏战略性平衡和实现资源预加载

VUE+Webpack游戏设计:增加游戏战略性平衡和实现资源预加载

游戏的一个可玩性在于,让玩家在一种战略平衡中做抉择。例如我们在游戏开始时让玩家拥有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
          }
        }
      },

上面代码对一些建筑物的生成添加了资源消耗量,并对以前一些好书做一些小修改,上面代码完成后,加载页面就可以看到丰富多彩的外星人从天而降了,至此我们的地球防御游戏的开发就结束了。

我们的游戏其实可以增加更多功能,例如没换一轮冲击波时就改变游戏的页面背景,增加一个暂停按钮,玩家万一玩到一半突然尿急可以立刻暂停,等嘘嘘回来后继续再战,相星际争霸一样增加快捷键,玩家不用点来点去,只要快速按下快捷键就能在指定位置建造指定建筑物,除了能量泡之外再引入新的资源,例如我们可以把上一节的钻石和钱币引进来,有很多好玩的,能改进游戏特色的地方,就等着你动手实现了!

本文分享自微信公众号 - Coding迪斯尼(gh_c9f933e7765d)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-06-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 利用web work实现多线程异步机制,打造页面单步调试IDE

    我们已经完成了整个编译器的开发,现在我们做一个能够单步调试的页面IDE,完成本章代码后,我们可以实现下面如图所示功能:

    望月从良
  • 使用普拉特分析法解析极为复杂的算术表达式

    望月从良
  • 实现小球在弹射前的拉伸特效和动态障碍物特效

    当前我们实现小球弹射时,会先用鼠标点击小球,然后移动鼠标,当松开鼠标时,小球会弹射向鼠标松开的位置。我们按住小球的时间越长,小球弹射的力度就越大,但有一个问题是...

    望月从良
  • 作为一个苦逼的IT程序员最怕遇到啥问题?

    IT程序员在很多人眼里是刻板没情商的印象,永远穿着一件格子衬衫,永远盯着一个黑眼圈,永远加不完的班,程序员可能是最苦逼的工作之一了。作为一个苦逼的IT程序员,除...

    墨者盾
  • (四十九)c#Winform自定义控件-下拉框(表格)

    GitHub:https://github.com/kwwwvagaa/NetWinformControl

    冰封一夏
  • 利用S_MEMORY_INSPECTOR分析内存泄漏问题

    我在批量生成service order时,report运行几个小时后,遇到out of memory exception:

    Jerry Wang
  • 利用S_MEMORY_INSPECTOR分析内存泄漏问题

    我在批量生成service order时,report运行几个小时后,遇到out of memory exception:

    Jerry Wang
  • disconf问题引发对spring boot配置加载的探究

    今天小伙伴跑过来说,搭建框架的时候出现disconf配置好的信息不能够及时注入到实体类中的情况。他通过实践发现,spring 加载Configuration 的...

    zeody
  • (十八)c#Winform自定义控件-提示框

    GitHub:https://github.com/kwwwvagaa/NetWinformControl

    冰封一夏
  • KVM虚拟化学习总结之简介

    KVM虚拟化学习总结之简介 1、虚拟化分为:全虚拟化和半虚拟化,需要CPU的支持。 2、全虚拟化:不需要做任何配置,让用户觉得就是一台真实的服务器 3、半虚拟机...

    小小科

扫码关注云+社区

领取腾讯云代金券