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

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

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

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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件

那些前端常用的网站插件

这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。 这个列表包含许多种类的资源,所以这里我将它们分组整理。 Jav...

33250
来自专栏前端知识分享

第64天:CSS常用命名规范,有用!

16130
来自专栏娱乐心理测试

Ios常用第三方框架(一)

37030
来自专栏CSDN技术头条

有关网页渲染,每个前端开发者都该知道的那点事

【编者按】其实,有关网页渲染的文章很多,但是相关信息比较分散,且论述并不是很完整。如果要想对这个主题有个大致的了解,我们还得学习很多知识。因此,Web开发者Al...

22380
来自专栏黄Java的地盘

动态生成DOM元素的高度及行数获取与计算方法

在开发IM的项目过程中,经常会有出现一些需要计算DOM高度,然后超出若干行隐藏等需求。很多时候,需要计算高度的DOM元素都是动态生成的,我们无法在数据渲染前获取...

25120
来自专栏前端真相

HTML

24280
来自专栏進无尽的文章

兼容 - 纯代码完美适配 iPhoneX

本文主要针对适配 iPhoneX列出一些关键点,仔细阅读可完美适配 iPhoneX,其中还有一些是适配 iOS11的, 话不多少,开始正餐。

1.8K20
来自专栏前端说吧

CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)

37250
来自专栏IMWeb前端团队

搞定这些疑难杂症,向css3动画说yes

本文篇幅比较长,涉及到的知识点也比较多,如3d,动画性能,动画js事件等,参考文献及demo展示也比较多,所以建议pc阅读效果更佳。 动画库 到现在来说css3...

36580
来自专栏腾讯社交用户体验设计

你离高效制作动画只差一篇文章的距离

18020

扫码关注云+社区

领取腾讯云代金券