壽司開賣:實現壽司製作特效和音響特效
阿新 • • 發佈:2018-11-13
本節我們將繼續上一節完成若干個小功能。首先要完成的是,當客戶動畫在主頁面出現時,它左上角會冒泡,顯示它想購買何種壽司,此時玩家可以點選左下角面板中各種元素,組合成客戶想要的壽司,其效果圖如下:
如上圖客戶顯示想要魷魚壽司,於是我們點選左下角面板的第一和第二章圖片,那麼就能在右下角面板出現想要壽司圖片,然後此時再次點選客戶動畫影象即可完成售賣過程,我們看看實現程式碼。
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來播放音樂,具體過程請參看程式碼,至此我們整個專案就開發完成了,具體內容請參看連結課程。
更多技術資訊,包括作業系統,編譯器,面試演算法,機器學習,人工智慧,請關照我的公眾號: