VUE+WebPack前端游戏设计:能量气泡的螺旋升腾特效

游戏的虚拟世界里与现实世界总有一一对应之处。例如在现实世界中，你不工作就不会有收入，而在游戏世界里，玩家不挖矿就没有能源，没有能源自然就无法购买道具或建造各种设备，于是游戏就无法进行。我们这次设计的前端游戏也是如此，必须提供一个机制给玩家获取资源以便用于创建各种道具，进而增强游戏的互动性。

本节代码完成后效果如下，当玩家在页面上建造一个卫星道具后，每隔一段时间就会有一个能量泡从卫星处弹出，然后以固定轨迹慢慢的往顶部升腾，当玩家用鼠标点击能量泡后，玩家就可以获得100点的资源，这些资源可用来购买更高级的道具，实现后页面效果如下：

文本无法显示动态效果，更详细的讲解和代码调试演示过程，请点击链接

能量泡的实现与上一节我们实现两个从天而降的外星人原理是一样的。首先我们先完成能量泡的对象构建，在gamescenecomponent.js 中添加如下代码：

energy (x, y) {
        var obj = new this.cjs.Container()
        obj.addChild(new this.assetsLib.Energy())
        obj.cache(-25, -25, 50, 50)
        obj.x = x || 0
        obj.y = y || 0
        // 记录起始x坐标
        obj.baseX = obj.x
        // 膨胀1.2倍再缩回原有尺寸
        this.cjs.Tween.get(obj, {loop: true}).to({scaleX: 1.2, scaleY: 1.2}, 600).to({scaleX: 1.0, scaleY: 1.0}, 600)
        obj.on('mousedown', this.energyClick)
        this.energyList.push(obj)
        console.log('create energy: ', obj)
        return obj
      },

代码先创建一个cjs容器对象，然后从资源库assetsLib中把能量泡的图片资源加载进来，这里要注意的是，能量泡会在页面里显示多个，为了让它的图片资源加载一次就可以多次使用，所以代码中调用cache接口把图片资源缓存起来。能量泡有一个动态变化效果，就是它会一胀一缩，这个特效是有语句” this.cjs.Tween.get(obj, {loop: true}).to({scaleX: 1.2, scaleY: 1.2}, 600).to({scaleX: 1.0, scaleY: 1.0}, 600)”实现的，该语句会把能量泡的图片在x,y两个方向上扩大1.2倍，等600毫秒后再恢复原状，接着又继续扩大。

每生成一个能量泡对象，我们就把它加入队列energyList以便后续使用。为了实现能量泡持续上升这个动画效果，我们需要在刷新回调函数里改变它的y坐标。于是我们添加如下代码：

energyTick (energy) {
        if (this.cjs.Ticker.getPaused()) {
          return
        }
        // 以正玄曲线的方式运动
        var offsetX = Math.sin(this.cjs.Ticker.getTicks() / 10) * 20
        energy.x = energy.baseX + offsetX
        energy.y -= 0.5
      },

在游戏主循环里会不断的调用Tick函数，而在该函数里，我们会调用上面的函数用于改变能量泡的y坐标，上面代码先是用正玄函数做计算，然后把计算结果应用到能量泡的x坐标上，这就意味着能量泡的上升不是简单的垂直起降，而是沿着正玄波动徐徐上升，它的上升轨迹如下图：

当玩家点击了能量泡后，玩家就可以获得新能源，这些能源可用来购买更高级的道具，能量泡点击后的响应代码如下：

energyClick (e) {
        console.log('energyClick: ', e.currentTarget)
        this.energies += 100
        this.removeItem(this.energyList, e.currentTarget)
        e.currentTarget.parent.removeChild(e.currentTarget)
      }

每次点击能量泡后，玩家会获得100个单位的能量，同时能量泡会从页面上删除，上面代码里的e.currentTarget对应的就是由energy()接口创建的能量泡对象。当我们在页面上拖拽一个卫星对象后，卫星会启动一个时钟，一旦时钟结束后，一个能量泡就能从卫星所在的位置飘出来，代码如下：

satellite () {
        var b = this.building()
        b.addChild(new this.assetsLib.Satellite())
        b.cache(-50, -50, 100, 100)
        b.hp = 150
        b.cost = 30

        // change here
        b.ticks = 0
        b.energyFrequency = 500
        this.satelliteList.push(b)
        return b
      },

每创建一个卫星对象，它就会被加入到stalliteList数组里，同时设定一个频率，也就是经过500个ticks的后，它会触发一个能量泡的创建，由此我们继续添加如下tick响应函数：

satelliteTick () {
        for (var i = 0; i < this.satelliteList.length; i++) {
          var satellite = this.satelliteList[i]
          satellite.ticks += 1
          if (satellite.ticks % satellite.energyFrequency === 0) {
            console.log('summonnEnergy')
            this.summonEnergy(satellite)
          }
        }

        for (i = 0; i < this.energyList.length; i++) {
          this.energyTick(this.energyList[i])
        }
      },

上面函数中，它会遍历所有的卫星对象，检测每个卫星对象所附带的计数器是否已经达到500毫秒，如果达到则调用summonEnergy接口创建能量泡，在函数里它还遍历了能量泡列表，同时调用energyTick函数，这个函数用于改变能量泡的y坐标实现能量泡动态上升的页面效果，我们看看summonEnergy是如何创建能量泡对象的：

// change here
      summonEnergy (satellite) {
        var pos = satellite.localToLocal(0, 0, this.effectLayer)
        console.log('in summonEnergy: ', this)
        var energyObj = this.energy(pos.x, pos.y)
        this.effectLayer.addChild(energyObj)
      },

代码先通过卫星对象获得其页面坐标，能量泡将从卫星所在的位置生成。代码调用energy接口创建能量泡对象后，把它加入特效图层，也就是effectLayer。特效图层在页面上的z坐标最高，也就是说任何加入特效图层的对象都会在最顶部显示。接着我们在boardTick函数里面启动能量泡的动画流程，代码修改如下：

boardTick () {
...
// change here
this.satelliteTick()
},

satelliteTick接口会遍历卫星数组，一旦卫星对象的计数器达到给定数值，那么就会触发能量泡的创建，这样就可以看到我们在文章开头演示的能量泡动画特效。更生动的视频演示请点击如下链接：
课程视频链接

欢迎关注公众号，让我们一起学习，交流，成长：