前言

第十六天了，是該趕快完成介面的部分了，今天來製作開牌的動畫吧！

撲克牌開牌分析

首先依照百家樂的規則來看，其實會有2-3張牌，因此我們需要新增莊牌組、閒牌組，分為左邊跟右邊

我們看到上方會有贏的動畫，下方會有點數。而且三張牌會剛好露出點數。

結構

我們會新增 Pokers、PokerPoint、PokerWin這三個檔案，贏、點數、撲克牌群組。

└─src
    │  App.ts
    │  Game.ts
    │  
    ├─components
    │  ├─elements
    │  │      Animation.ts
    │  │      Sprite.ts
    │  │      Texture.ts
    │  │      Wrapper.ts
    │  │      WrapperContainer.ts
    │  │      WrapperContainerCenter.ts
    │  │      WrapperType.ts
    │  │      
    │  ├─groups
    │  │      Body.ts
    │  │      Casino.ts
    │  │      ChipBox.ts
    │  │      Loading.ts
    │  │      Navbottom.ts
    │  │      Navtop.ts
    │  │      Pokers.ts ***
    │  │      Table.ts
    │  └─objects
    │          AreaBetNumber.ts
    │          Bg.ts
    │          Chip.ts
    │          Countdown.ts
    │          CountdownNumber.ts
    │          Dealer.ts
    │          Desk.ts
    │          DeskHover.ts
    │          Info.ts
    │          InfoMoneyNumber.ts
    │          Poker.ts
    │          PokerPoint.ts ***
    │          PokerWin.ts ***
    │          TotalBetNumber.ts
    │          WaitNextBetNotify.ts
    ├─config
    │      chipType.ts
    │      imagePath.ts
    │      loadingPath.ts
    │      pokerPoint.ts
    │      pokerType.ts
    ├─loaders
    │      Loader.ts
    └─utils
            tools.ts

撲克牌點數、上方動畫

** PokerPoint ** 就是點數，很簡單的。

PokerPoint.ts

import Sprite from '@/components/elements/Sprite'
import imagePath from '@/config/imagePath'

export default class PokerPoint extends Sprite {
  constructor(point: number) {
    super(imagePath.tablePath, `score${point}`)
  }
}

** PokerWin ** 贏的動畫！rotateCircle是旋轉背景用的，至於會不會消耗很多記憶體，這我不是很確定。

PokerWin.ts

import WrapperContainerCenter from '@/components/elements/WrapperContainerCenter'
import Sprite from '@/components/elements/Sprite'
import Wrapper from '@/components/elements/Wrapper'
import imagePath from '@/config/imagePath'

export default class PokerWin extends WrapperContainerCenter {
  private _bgCircle: Wrapper
  private _flag: Wrapper
  private _font: Wrapper
  private _star: Wrapper
  private _opt: boolean = false

  constructor() {
    super()
    this._bgCircle = new WrapperContainerCenter()
    this._flag = new WrapperContainerCenter()
    this._font = new WrapperContainerCenter()
    this._star = new WrapperContainerCenter()

    this._bgCircle.addContainer(new Sprite(imagePath.winnerPath, 'bgcircle').getContainer())
    this._flag.addContainer(new Sprite(imagePath.winnerPath, 'flag').getContainer())
    this._font.addContainer(new Sprite(imagePath.winnerPath, 'font').getContainer())
    this._star.addContainer(new Sprite(imagePath.winnerPath, 'star').getContainer())

    this.addChild(this._bgCircle)
    this.addChild(this._flag)
    this.addChild(this._font)
    this.addChild(this._star)

    this._bgCircle.setPosition({ animation: false }, this._centerContainer.width / 2 - this._bgCircle.width / 2, 0)
    this._flag.setPosition({ animation: false }, this._centerContainer.width / 2 - this._flag.width / 2, this._centerContainer.height - 110)
    this._font.setPosition({ animation: false }, this._centerContainer.width / 2 - this._font.width / 2, this._centerContainer.height - 140)
    this._star.setPosition({ animation: false }, this._centerContainer.width / 2 - this._star.width / 2 - 25, this._centerContainer.height - 125)

    this._opt = true
    this.rotateCircle()
  }

  public removeChildren() {
    super.removeChildren()
    this._opt = false
  }

  private rotateCircle() {
    let r = Math.PI * 0
    let test = () => {
      if (this._opt) {
        window.requestAnimationFrame(() => {
          r += Math.PI * 0.005
          this._bgCircle.setRotation(false, r)
          if (this) {
            test()
          }
        })
      }
    }
    test()
  }
}

撲克牌群組

** Pokers ** 就是我們的鋪克牌群組，透過addPoker新增我們牌組，並且會自動調整鋪克牌位置，讓他看起來順暢。

// ...省略引入

Pokers.ts

export default class Pokers extends WrapperContainerCenter {
  private _pokersWrapper: Wrapper
  private _pokerPointWrapper: Wrapper
  private _pokerPoint: PokerPoint
  private _pokerWinWrapper: Wrapper
  private _pokerWin: PokerWin
  private _faiPiPos = {
    x: 0,
    y: 0
  }

  private _pokerList: Array<Poker> = []
  constructor() {
    super()
    this._pokersWrapper = new WrapperContainerCenter()
    this._pokerPointWrapper = new WrapperContainerCenter()
    this._pokerWinWrapper = new WrapperContainerCenter()
    this._pokerWin = new PokerWin()
    this._pokerPoint = new PokerPoint(0)

     // ...省略

    this.addChild(this._pokersWrapper)
    this.addChild(this._pokerPointWrapper)
    this.addChild(this._pokerWinWrapper)
    this._pokersWrapper.setPosition({ animation: false }, 0, 150)



    let config = {
      x: 0,
      y: 0
    }
    var gui = new dat.GUI();
    gui.add(config, 'x', -1000, 1200).onChange((x: number) => {
      this._pokerPoint.setPosition({ animation: false }, x, config.y)
      // this._pokersBanker.setPosition({ animation: true }, x, this._pokersBanker.y)
    })
    gui.add(config, 'y', -1000, 1200).onChange((y: number) => {
      this._pokerPoint.setPosition({ animation: false }, config.x, y)
      // this._pokersBanker.setPosition({ animation: true }, this._pokersBanker.x, y)
    })

  }

  public addPoker(poker: Poker) {
    this.animationPoker(poker)
    this._pokerList.push(poker)
    this._pokersWrapper.addChild(poker)
    setTimeout(() => {
      poker.fanPoker()
    }, 800)
    this.adjustPokers()
  }

  private adjustPokers() {
    for (let index in this._pokerList) {
      this._pokerList[index].setPosition({ animation: true }, -40 * Number(this._pokerList.length - Number(index) - 1), 0)
    }
  }

  public animationPoker(poker: Poker) {
    poker.setScale(false, 0.1, 0.1)
    poker.setScale(true, 1, 1)
    poker.setRotation(false, Math.PI)
    poker.setRotation(true, 0)
    poker.setPosition({ animation: false }, this._faiPiPos.x, this._faiPiPos.y)
    poker.setPosition({ animation: true }, 0, 0)
  }

  public displayPokerPoint() {
     // ...省略

    score = score % 10
    this._pokerPoint = new PokerPoint(score)
    this._pokerPointWrapper.addChild(this._pokerPoint)
    this._pokerPoint.setPosition({ animation: false }, pos[this._pokerList.length].x, pos[this._pokerList.length].y)
  }

  public displayWin() {
     // ...省略
    this._pokerWin.setPosition({ animation: false }, pos[this._pokerList.length].x, pos[this._pokerList.length].y)
  }

  public setFaipiPosition(x: number, y: number) {
    this._faiPiPos.x = x
    this._faiPiPos.y = y
  }

  public removeChildren() {
    super.removeChildren()
    this._pokerWin.removeChildren()
    this._pokerPoint.removeChildren()
    this._pokerList.map(e => {
      e.removeChildren()
    })
  }
}

定位

我們把撲克牌組放在 ** Body **，並定在正確位置，有兩邊的牌組，並且設定發牌動畫的位置。

// ...省略
// Body.ts

export default class Body extends WrapperContainerCenter {
  private _table: Wrapper
  private _pokersPlayer: Pokers
  private _pokersBanker: Pokers
  constructor() {
    super()
    let rect = new PIXI.Graphics()
    rect.drawRect(0, 0, 1650, 900)
    rect.alpha = 0
    this._centerContainer.addContainer(rect)
    this._table = new Table()
    this._table.setPosition({ animation: false }, this.width / 2 - 10, this.height / 2 + 60)
    this._table.setScale(false, 1.2, 1.2)

    this._pokersPlayer = new Pokers()
    this._pokersPlayer.setFaipiPosition(360, -150)
    this._pokersPlayer.setPosition({ animation: false }, 500, 200)

    this._pokersBanker = new Pokers()
    this._pokersBanker.setFaipiPosition(-200, -150)
    this._pokersBanker.setPosition({ animation: false }, 1100, 200)

    let notify = new WaitNextBetNotify()
    this._centerContainer.addChild(notify)
    this._centerContainer.addChild(this._table)
    this._centerContainer.addChild(this._pokersPlayer)
    this._centerContainer.addChild(this._pokersBanker)
    notify.setPosition({ animation: false }, this.width / 2 - 80, this.height / 2)
  }
}

結果

連結

Github