為了讓我們的「打磚塊」更有趣味性，我們給他加上一些小道具，讓遊戲有些難度。

Photo by Xavi Cabrera on Unsplash

創建道具群組

創造道具的 group 並且給他碰撞事件，不過這邊跟值錢不一樣唷！
之前我們是讓他有物理碰撞的效果，但這邊我們只要讓他們有重疊的時候觸發就好，所以使用 overlap ，讓他看起來像是被我們吃掉了的感覺 :yum:

    props = this.physics.add.group();
    this.physics.add.overlap(board, props, getProp, null, this);

載入素材

    // 各式各樣的道具
    this.load.image("minus", "./assets/img/minus.png");
    this.load.image("plus", "./assets/img/plus.png");
    this.load.image("pause", "./assets/img/pause.png");
    this.load.image("reverse", "./assets/img/reverse.png");
    this.load.image("speedUp", "./assets/img/speedUp.png");
    this.load.image("speedDown", "./assets/img/speedDown.png");

道具掉落

這邊我們的設計是打到方塊後有 30% 的機率會產生道具，而產生的道具是隨機的，有加長板子、縮短板子、冰凍 1 秒、左右相反、加速板子、減速板子。
這邊我們用容易拿到的素材，也就是 icon，分別是以下的 icon :satisfied:

const propMap = ["minus", "pause", "reverse", "speedUp", "speedDown", "plus"];
...

function blockBounce(ball, block) {
  // 打到之後讓方塊消失
  block.disableBody(true, true);
  // 是否產生道具
  let createSuccess = Math.random() < 0.3;
  if (createSuccess) {
    // 隨機產生一種道具
    let temp = Phaser.Math.Between(0, 5);
    let prop = props.create(block.x, block.y, propMap[temp]).setScale(0.5);
    // 改變道具顏色 好的道具是綠色 不好的是紅色
    prop.setTint(temp < 3 ? 0xff0000 : 0x00ff00);
    // 給道具一個初始向下掉落的速度
    prop.setVelocityY(150);
  }
}

吃到道具的事件

這邊我們利用創建道具時使用的 texture 不同來給定他獲得的功能。
這邊可以看到我們使用 displayWidth 來改變他在場景上的寬度，
也利用我們一開始設計的速度 speed 來改變速度，
利用 direction 來改變他的方向或是不讓他移動，
秒數過了之後再恢復，
這邊有很貼心的讓板子改變顏色來提示玩家現在板子的狀態 :see_no_evil:

let direction = 1;
...

//   增加 direction 變數來控制方向
    if (cursors.left.isDown) {
      board.setVelocityX(speed * direction * -1);
    } else if (cursors.right.isDown) {
      board.setVelocityX(speed * direction);
    } else {
      board.setVelocityX(0);
    }
...


function getProp(board, prop) {
  let feature = prop.texture.key;
  if (feature === "speedUp") {
    // 調整速度
    speed += 70;
  } else if (feature === "speedDown") {
    // 調整速度
    speed -= 50;
  } else if (feature === "minus") {
    // 調整寬度
    board.displayWidth -= 35;
  } else if (feature === "plus") {
    // 調整寬度
    board.displayWidth += 35;
  } else if (feature === "reverse") {
    // 改變方向
    direction = -1;
    // 調成紫色
    board.setTint(0xff00ff);
    setTimeout(() => {
      direction = 1;
      board.setTint(0xffffff);
    }, 3000);
  } else if (feature === "pause") {
    // 不給移動
    direction = 0;
    // 調成紅色
    board.setTint(0xff0000);
    setTimeout(() => {
      direction = 1;
      board.setTint(0xffffff);
    }, 1000);
  }
  prop.destroy();
}

完成之後大家可以看到道具掉囉！！嗨起來！！

總結

哇賽～～今天我們給我們的遊戲增加的豐富度，是不是玩起來更好玩了呢!(自己講 :smile: )
明天我們來加上我們的生命值機制吧！

tags: Phaser Game 2020鐵人賽