Phaser學習筆記：遊戲demo：MassAttack 平衡下落球

遊戲是phaser官方示例裏的，相關素材，後續提供。

import Phaser from 'phaser'

class MassAttack extends Phaser.Scene {
  constructor() {
    super({ key: 'MassAttack' })
    this.gameOptions = {
      maxDiameter: 1,
      ballGrowingSpeed: 0.015,
      balanceFriction: 400
    }
    this.growBall = false
    this.canPlay = true
    this.ball = null
    this.balance = []
  }

  preload() {
    this.load.image('ball', 'assets/games/mass-attack/ball.png')
    this.load.image('balance', 'assets/games/mass-attack/balance.png')
  }

  create() {
    for (let i = 0; i < 2; i++) {
      let group = this.add.group()
      group.weight = 0
      group.saveYPosition = 0
      let sprite = group.create(this.cache.game.config.width / 2 * i, 240, 'balance')
      sprite.setOrigin(0, 0.5)
      this.balance.push(group)
    }
    this.input.on('pointerdown', this.placeBall, this)
    this.input.on('pointerup', this.dropBall, this)
  }

  update() {
    if (this.growBall && this.ball.scaleX < this.gameOptions.maxDiameter) {
      this.ball.setScale(this.ball.scaleX + this.gameOptions.ballGrowingSpeed)
    }
  }

  placeBall(pointer) {
    if (!this.growBall && this.canPlay) {
      let side = Math.floor(pointer.x / (this.cache.game.config.width / 2))
      this.ball = this.balance[side].create(pointer.x, 30, 'ball')
      this.ball.setScale(0.1)
      this.ball.balance = side
      this.growBall = true
    }
  }

  dropBall() {
    if (this.growBall) {
      this.growBall = false
      this.canPlay = false
      let group = this.balance[this.ball.balance]
      let ballDestination = this.cache.game.config.height / 2 + group.saveYPosition
        - group.children.entries[0].height / 2 - this.ball.height * this.ball.scaleY / 2
      this.balance[this.ball.balance].weight += (4 / 3) * Math.PI *
        Math.pow((this.ball.width * this.ball.scaleX / 2), 3)

      this.tweens.add({
        targets: this.ball,
        y: ballDestination,
        duration: 2000,
        ease: 'Bounce',
        onComplete: this.adjustBalance,
        onCompleteScope: this
      })
    }
  }

  adjustBalance() {
    let weightDifference = (this.balance[0].weight - this.balance[1].weight) / this.gameOptions.balanceFriction
    let maxDifference = this.cache.game.config.height / 3

    if (weightDifference > maxDifference) {
      weightDifference = maxDifference
    }

    if (weightDifference < -maxDifference) {
      weightDifference = -maxDifference
    }

    for (let i = 0; i < 2; i++) {
      let difference = -this.balance[i].saveYPosition + weightDifference - (2 * i * weightDifference)

      this.balance[i].saveYPosition += difference

      this.tweens.add({
        targets: this.balance[i].getChildren(),
        y: '+=' + difference.toString(),
        duration: 2000,
        ease: 'Quad',
        onComplete: function() {
          this.canPlay = true
        },
        onCompleteScope: this
      })
    }
  }
}

export function MassAttackInit(ele) {
  return new Phaser.Game({
    type: Phaser.AUTO,
    width: 320,
    height: 480,
    backgroundColor: '#222222',
    parent: ele,
    scene: [MassAttack]
  })
}