专栏首页Coding迪斯尼VUE+WebPack前端游戏设计:能量气泡的螺旋升腾特效

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接口会遍历卫星数组,一旦卫星对象的计数器达到给定数值,那么就会触发能量泡的创建,这样就可以看到我们在文章开头演示的能量泡动画特效。

本文分享自微信公众号 - Coding迪斯尼(gh_c9f933e7765d),作者:陈屹

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

原始发表时间:2018-03-21

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VUE+WebPack:开发一款太空版植物大战僵尸的前端页游

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

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

    望月从良
  • 寿司开卖:实现寿司制作特效和音响特效

    本节我们将继续上一节完成若干个小功能。首先要完成的是,当客户动画在主页面出现时,它左上角会冒泡,显示它想购买何种寿司,此时玩家可以点击左下角面板中各种元素,组合...

    望月从良
  • ReactV16.3,即将更改的生命周期

    注释:本文是根据React的官方博客翻译而成(文章地址:https://reactjs.org/blog/2018...)。 主要讲述了React之后的更新方向...

    前端博客 : alili.tech
  • JavaSE基础之this关键字的引用

    1.0   this 指代当前对象, 在一般方法中可以通过this来引用当前对象的成员(方法,属性)。 2.0  通过  this()  调 用重载的构造器,需...

    Gxjun
  • 520特辑———旋转爱

    520:网络情人节是信息时代的爱情节日,定于每年的5月20日和5月21日。该节日源于歌手范晓萱的《数字恋爱》中“520”被喻成“我爱你” ,以及...

    流眸
  • 这个问题你能答对吗?

    首先,还是给大家说声抱歉,由于微信限制,前两天抽奖的好友请求还没有全部通过验证,这两天都会通过并拉大家进抽奖群的,还请大家海涵。

    我的小碗汤
  • JavaScript 风格指南 [每日前端夜话(0x1C)]

    原文链接:https://github.com/ryanmcdermott/clean-code-javascript

    疯狂的技术宅
  • java的this关键字理解

    1、java提供了一个this关键字,this关键字总是指向调用该方法的对象。根据this出现位置的不同,this作为对象的默认引用有两种情形。 a)、构造器中...

    别先生
  • 关于 servlet 的这个问题,你能答对吗?

    今天首先来看个问题,用原生servlet实现的接口,大家看下控制台输出结果是什么?

    Java程序猿阿谷

扫码关注云+社区

领取腾讯云代金券