昨天我們完成了基本的佈置，今天我們來幫他加上物理碰撞跟控制吧～

Photo by JESHOOTS.COM on Unsplash

加上鍵盤控制

給定一個初始速度，讓我們能左右控制我們的板子。

let speed = 160
...

  create: function () {
    ...
    //加上鍵盤控制物件
    cursors = this.input.keyboard.createCursorKeys();
    
  },
  update: function () {
    if (cursors.left.isDown) {
      board.setVelocityX(speed * -1);
    } else if (cursors.right.isDown) {
      board.setVelocityX(speed);
    } else {
      board.setVelocityX(0);
    }
  },
  ...
  

加上物理碰撞

「打磚塊」的精髓就是在碰碰撞撞嘛！該撞的都給他撞起來！！！
這裡有新東西囉！
由於我們要讓我們的球可以碰撞反彈，所以要透過 setBounce() 給他一個反彈係數，裡面給的常數就是他反彈後會呈上的倍數，
所以你給 0 的話就是不反彈，
給 1 的話就是全反彈，
給 2 的話就是我要加倍奉還給你啦！！！
再上去的倍數請不要輕易嘗試，那個球會起笑給你看 XD

還有一個是我們把球的碰撞體改變成圓形的，讓他碰撞起來更像是一顆球。
並且加上與世界的碰撞，不過不偵測世界下方的碰撞，讓球可以跑出去，跑出去就死翹翹囉！

...
// 板子碰撞後不被移動
board.body.immovable = true;
// 不要讓板子離開我們的世界
board.setCollideWorldBounds(true);
...

//碰撞係數
ball.setBounce(1);
//碰撞體改變成圓形
ball.body.setCircle(10);
//初始速度
ball.setVelocityY(200);
// 世界碰撞
ball.setCollideWorldBounds(true);
// 不與下方碰撞
this.physics.world.checkCollision.down = false;
    this.physics.add.collider(ball, blocks, blockBounce, null, this);
    this.physics.add.collider(ball, board, boardBounce, null, this);
...


function blockBounce(ball, block) {
  block.disableBody(true, true);
}

function boardBounce(ball, board) {
  // 透過計算看他打在板子的哪一邊給他一個向左或向右的速度
  ball.body.setVelocityX((190 * (ball.x - board.x)) / board.width);
}

基本的遊戲可以進行囉～大家的畫面應該都跟我長得一樣吧ＸＤ

總結

今天我們把基本的遊戲進行給完成囉！明天我們開始來幫我們的「打磚塊」加上一些機制吧！那我們明天再繼續！

tags: Phaser Game 2020鐵人賽