寿司开卖:实现寿司制作特效和音响特效
2018-11-13 12:26
141 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tyler_download/article/details/84026875
本节我们将继续上一节完成若干个小功能。首先要完成的是,当客户动画在主页面出现时,它左上角会冒泡,显示它想购买何种寿司,此时玩家可以点击左下角面板中各种元素,组合成客户想要的寿司,其效果图如下:
如上图客户显示想要鱿鱼寿司,于是我们点击左下角面板的第一和第二章图片,那么就能在右下角面板出现想要寿司图片,然后此时再次点击客户动画图像即可完成售卖过程,我们看看实现代码。
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来播放音乐,具体过程请参看代码,至此我们整个项目就开发完成了,具体内容请参看链接课程。
更多技术信息,包括操作系统,编译器,面试算法,机器学习,人工智能,请关照我的公众号:
相关文章推荐
- Android中轴旋转特效实现,制作别样的图片浏览器
- Android中轴旋转特效实现,制作别样的图片浏览器
- Android中轴旋转特效实现,制作别样的图片浏览器
- Android中轴旋转特效实现,制作别样的图片浏览器
- js制作带有遮罩弹出层实现登录注册表单特效代码分享
- Android 中轴旋转特效实现,制作别样的图片浏览器
- Android中轴旋转特效实现,制作别样的图片浏览器
- Android中轴旋转特效实现,制作别样的图片浏览器
- Android中轴旋转特效实现,制作别样的图片浏览器
- Android中轴旋转特效实现,制作别样的图片浏览器
- Android中轴旋转特效实现,制作别样的图片浏览器
- Android中轴旋转特效实现,制作别样的图片浏览器
- Android中轴旋转特效实现,制作别样的图片浏览器
- Android实现中轴旋转特效 Android制作别样的图片浏览器
- Android中轴旋转特效实现,制作别样的图片浏览器
- Android中轴旋转特效实现,制作别样的图片浏览器
- 如何通过EDIUS特效实现卷轴的制作
- Android中轴旋转特效实现,制作别样的图片浏览器
- Android中轴旋转特效实现,制作别样的图片浏览器
- 怎么实现EDIUS中“老电影”特效的制作