专栏首页Coding迪斯尼寿司开卖:实现寿司制作特效和音响特效

寿司开卖:实现寿司制作特效和音响特效

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

如上图客户显示想要鱿鱼寿司,于是我们点击左下角面板的第一和第二章图片,那么就能在右下角面板出现想要寿司图片,然后此时再次点击客户动画图像即可完成售卖过程,我们看看实现代码。

data () {
      return {
        ...
        // change 1
        cash: 1000
      }
    },

init () {
      ....
      // change 2
        this.cashNode = document.getElementById('status-bar')
        this.amount = []
        this.amount['rice'] = 10
        this.amount['octopus'] = 10
        this.amount['salmon'] = 10
        this.amount['salmon-roe'] = 10
        this.amount['seaweed'] = 10
        this.amount['egg'] = 10
        this.refreshCash()

        var phoneBtn = document.getElementById('phone')
        phoneBtn.onclick = this.phoneBtnOnClick
      },
 // change 3
      refreshCash () {
        this.cashNode.textContent = '$' + this.cash
      },

上面代码先初始化一些数据,为后续的逻辑实现做准备。

ingredentOnclick (ingredient) {
        var type = ingredient.toElement.dataset.type
        // change 4
        if (this.amount[type] > 0) {
          this.amount[type] -= 1
          this.refreshAmount(type)
        } else {
          return
        }
        this.sushiOnHand.push(type)
        this.sushiOnHand = this.sushiOnHand.sort()
        this.addIngredientToScreen(type)
      },

上面代码响应用户在左下角面板的点击,当用户选择若干材料后,我们将选中的项目放入到一个数组中,后续会查看数组里面的材料是否能构成一个寿司。

addIngredientToScreen (type) {
  ....
// 把所有选中的材料组合起来形成一个寿司
        if (isEqualToAnySushi) {
          // change 7
          this.clearAllIngredients()
          // 将左边面板一个节点拷贝后修改背景图片
          var sushi = this.createSushi(sushiName)
          this.others.appendChild(sushi)
        }
....
},
// change 6
      createSushi (type) {
        // 将左边面板一个节点拷贝后修改背景图片
        var sushi = this.ingredientsNode.querySelector('.ingredient[data-type=' + 'rice' + ']').cloneNode(true)
        sushi.style.height = '80px'
        var bgURL = ''
        switch (type) {
          case 'sushiSalmonRoe':
            bgURL = 'url(/static/images/sushiSalmonRoe.png)'
            break
          case 'sushiSalmon':
            bgURL = 'url(/static/images/sushiSalmon.png)'
            break
          case 'sushiEgg':
            bgURL = 'url(/static/images/sushiEgg.png)'
            break
          case 'sushiOctopus':
            bgURL = 'url(/static/images/sushiOctopus.png)'
            break
        }
        sushi.style.backgroundImage = bgURL
        return sushi
      },

上面的代码在用户点击左下角面板后调用,它判断用户选择的原材料是否构成一个寿司,是的话在右下角显示寿司的图片,最后我们要实现的是,当组合好寿司后,玩家点击客户动画图像,如果寿司组合正确,那么客户动画图像就可以从页面上消失:

customerOnClick () {
        var isEqual = this.arrayIsEqual(this.sushiOnHand,
        this.recipes[this.customer.wants])
        if (isEqual) {
          // change 5
          this.cash += 120
          this.refreshCash()
          this.customer.hasEaten = true
        } else {
          console.log('NOOOO')
        }

        this.trashSushi()
      },

完成上面代码后,我们就可以看到开头所介绍的相应特效了。接下来我们添加剩余特效。在static目录下先存放对应的音乐文件:

然后我们使用代码加载音频文件:

// change 7
      load () {
        var assetsPath = '/static/audio/'
        var manifest = [
          {id: 'button', src: 'button.ogg'},
          {id: 'refill', src: 'refill.ogg'},
          {id: 'earn-money', src: 'earn money.ogg'},
          {id: 'start-game', src: 'start game.ogg'}
        ]
        this.cjs.Sound.alternateExtensions = ['aif', 'webm']
        this.preload = new this.cjs.LoadQueue(true, assetsPath)
        this.preload.installPlugin(this.cjs.Sound)
        this.preload.addEventListener('complete', this.start)
        this.preload.loadManifest(manifest)
      },
      start () {
        this.cjs.Ticker.setFPS(60)
        this.cjs.Ticker.addEventListener('tick', this.stage)
        this.cjs.Ticker.addEventListener('tick', this.tick)
        this.cjs.Sound.play('start-game')
      },
init () {
      ....
       // change 8
        this.load()
}

当load函数完成音频文件的加载后,start函数启动整个游戏流程,同时播放启动音乐,其他相关地方我们也会通过this.cjs.Sound.play来播放音乐,具体过程请参看代码,至此我们整个项目就开发完成了,具体内容请参看链接课程。

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

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

原始发表时间:2018-11-13

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    望月从良
  • VUE+WebPack游戏设计:欲望都市城市图层的设计

    望月从良
  • 寿司快卖:实现游戏主流程--制作寿司和客户显示动画特效

    上一节我们搭建了游戏的基本框架。游戏界面被分为若干个板块,其中一个板块显示了各种制作寿司的材料,它的目的是用于玩家根据信息组装各种寿司,本节我们进入游戏的主流程...

    望月从良
  • three.js 郭先生制作太阳系

    今天郭先生收到评论,想要之前制作太阳系的案例,因为找不到了,于是在vue版本又制作一版太阳系,在线案例请点击three.js制作太阳系(加载时间比较长,请稍等一...

    郭先生的博客
  • python3爬虫-知乎登陆

    参考的是这位博主的博客:https://home.cnblogs.com/u/zkqiang

    py3study
  • .glb格式的模型怎么在three.js中展示

    3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

    tianyawhl
  • 云终端系列(一)—— 实时音视频Web端接入体验(Vue基础音视频通话篇)

    这个系列呢,主要给各位观众老爷看看目前有较大趋势的SaaS应用的SDK在各种主流Web终端的使用姿势和异常分析,如果想要纯粹了解开发的或者云原生,云开发的可以去...

    楚歌
  • 闪屏还可以这样玩

    对于多数应用来说,在进入APP的时候使用短暂的闪屏广告来吸引用户是很常见的一个场景。但随着这种模式的频繁应用,越来越多的用户会感到审美疲劳,甚至不看就跳过闪屏了...

    林焕彬
  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl
  • JavaScript this关键字

    Mirror王宇阳

扫码关注云+社区

领取腾讯云代金券