iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
Modern Web

菜雞用 Phaser 拾起童年遊戲 系列 第 10

菜雞用 Phaser 拾起童年遊戲 10

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

遊戲機制

  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鐵人賽

上一篇
菜雞用 Phaser 拾起童年遊戲 09
下一篇
菜雞用 Phaser 拾起童年遊戲 11
系列文
菜雞用 Phaser 拾起童年遊戲 30

尚未有邦友留言

立即登入留言