昨天我們完成了基本的遊戲流程，今天我們來加上遊戲的機制吧！

遊戲機制

1. 主角生命值為 10
2. 碰到上方的尖刺要扣 4 生命值
3. 踩到一個樓梯補 1 生命值
4. 掉到最下面，並且不是踩在任何樓梯上面，或是生命值歸零時，結束遊戲
5. 分數計算
6. 分數上升，速度加快
7. 開始按鈕，與從新開始的設置

扣血機制

那我們就先從碰到上方的尖刺扣血開始做吧！
這邊的設計是生命值總共是 10，每次碰到尖刺時扣 4，並且我們會在左上方縣市現在主角的生命值，出發！！！

生命值

首先我們先在場景內加上顯示主角的生命值，生命值為 10，我們這邊用 Array 來儲存我們的生命值，方便我們之後再扣血或是補血的時候來更動它，並且用一個變數來記錄現有的生命。
這裡有個新的東西，就是我們不希望我的生命值被擋住，所以我們可以透過 setDepth() 來將他設置在前方。

let life = 10;
...
function create(){
  ...
  
  lifeBar = [];
  for (let i = 0; i < 10; i++) {
    let aLife = this.add.rectangle(20 + 15 * i, 55, 10, 30, "0x00ee00");
    // 將生命值設定在前方
    aLife.setDepth(1);
    lifeBar.push(aLife);
  }
}

function update(){
  ...
  
  lifeBar.forEach((el, idx) => {
    if (idx + 1 > life) {
      el.fillColor = "0x555555";
    } else {
      el.fillColor = "0x00ee00";
    }
  });
}

再來利用碰撞時會觸發 callback 來做碰撞到尖刺時扣生命值的機制。
這邊在建立物理碰撞時，使用了 this.physics.add.collider() 可以給的參數為 （物件1,物件2,碰撞後callback,觸發callback的條件函數,在哪個context觸發<通常會使用this> ）。

機制方式

// 扣血的 trigger
let isHurtOnce = false;
...

function create() {
  // 加上碰撞後的callback
  this.physics.add.collider(player, spikes, hurt, null, this);
  ...

}

function update() {
  // 碰觸完尖刺也做完扣血機制後，恢復主角與下方的碰撞偵測
  if (!player.body.touching.up) {
    player.body.checkCollision.down = true;
  }
  ...
  
}

// 扣血機制的callback
function hurt(player, spike) {
  // 生命值在 trigger 開啟時扣 4
  life -= isHurtOnce ? 0 : 4;
  // 被尖刺碰到後，移除主角與下方的碰撞偵測，已讓她脫離目前的樓梯
  player.body.checkCollision.down = false;
  // 關閉 trigger
  isHurtOnce = true;
  // 1秒後再次開啟 trigger
  setTimeout(() => (isHurtOnce = false), 1000);
}

總結

我們今天完成了尖刺扣血的機制，讓我們明天繼續完成機制吧！

tags: Phaser Game 2020鐵人賽