前言

今天來串接開牌動畫吧！前後端的互相推卸責任下，遊戲的開牌動畫我以為全部交給前端控制就好，結果好像有滿滿的問題...

指令

當收到 cst.TB_NTF_PI_RESULT 指令時，就會開始開牌動作，也就是說如果半途中加入遊戲，是看不到開牌動做的，這部分如果要調教的完美無缺，要動非常多力，而且真的一開始我沒考量到，所以...就將就吧哈哈

開牌方法

大概解說一下，我們收到開牌結果其實是直接收到結果，並沒有一張一張收到，也就是說我們必須自己慢慢顯示，大致上就是透過while判斷是否還有牌要開，把牌開完。8秒之後還要把牌都清掉，等待下一局的牌。

public async piResult(poker_result: any) {
    let pokerPlayer = poker_result.player.slice()
    let pokerBanker = poker_result.banker.slice()

    setTimeout(() => {
      this._pokersPlayer.reset()
      this._pokersBanker.reset()
    }, 8000)
   
    while (pokerPlayer.length || pokerBanker.length) {
      if (pokerPlayer.length) {
        let _player = pokerPlayer.splice(0, 1)[0]
        this._pokersPlayer.sendPoker(_player.type, _player.symbol)
        await delay(1200)
      }
      if (pokerBanker.length) {
        let _banker = pokerBanker.splice(0, 1)[0]
        this._pokersBanker.sendPoker(_banker.type, _banker.symbol)
        await delay(1200)
      }
    }
  }

撲克牌重置

這是重置我們的鋪克牌，不包含輸贏結果的動畫。

  public reset() {
    this._pokerList.map(e => {
      e.removeChildren()
    })
    this._pokerList = []
    this._pokerWin.removeChildren()
    this._pokerPoint.removeChildren()
  }

Delay

這是一個delay的function，可以幫你延後執行，就是透過await

/**
 * 延遲
 * @param {*} time 延遲秒數
 */
var delay = function (time: number) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time);
  })
}

預覽

後記

大概就是預覽這樣，明天應該就可以放到Heroku了！
我已經有預感會有一些動畫很詭異的時間點。