壽司開賣：實現壽司製作特效和音響特效

本節我們將繼續上一節完成若干個小功能。首先要完成的是，當客戶動畫在主頁面出現時，它左上角會冒泡，顯示它想購買何種壽司，此時玩家可以點擊左下角面板中各種元素，組合成客戶想要的壽司，其效果圖如下：

如上圖客戶顯示想要魷魚壽司，於是我們點擊左下角面板的第一和第二章圖片，那麼就能在右下角面板出現想要壽司圖片，然後此時再次點擊客戶動畫圖像即可完成售賣過程，我們看看實現代碼。

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來播放音樂，具體過程請參看代碼，至此我們整個項目就開發完成了，具體內容請參看鏈接課程。