寿司开卖：实现寿司制作特效和音响特效
本节我们将继续上一节完成若干个小功能。首先要完成的是，当客户动画在主页面出现时，它左上角会冒泡，显示它想购买何种寿司，此时玩家可以点击左下角面板中各种元素，组合成客户想要的寿司，其效果图如下：
如上图客户显示想要鱿鱼寿司，于是我们点击左下角面板的第一和第二章图片，那么就能在右下角面板出现想要寿司图片，然后此时再次点击客户动画图像即可完成售卖过程，我们看看实现代码。
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来播放音乐，具体过程请参看代码，至此我们整个项目就开发完成了，具体内容请参看链接课程。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-11-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读