今天我們要開始新的遊戲囉～～～又是一個新的起點！
來吧！一起衝刺吧！

Photo by Dayne Topkin on Unsplash

前情提要

這次我要來做一個打磚塊的遊戲！
大家在按鍵式手機一定有玩過吧！一起來懷念他，一起來重新拾起他。
那我們就開始吧 : )

新方式

這次很特別，我們用了不一樣的方式來設計我們的「打磚塊」遊戲。
用 Phaser.Class 來創建我們的 scene。

const stage = new Phaser.Class({
  Extends: Phaser.Scene,
  initialize: function stage() {
    Phaser.Scene.call(this, { key: "stage" });
  },
  preload: function () {},
  create: function () {},
  update: function () {}
});
const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: "arcade",
    arcade: {
      gravity: {},
      debug: false,
    },
  },
  scene: [stage]
};
var game = new Phaser.Game(config);

載入素材

老樣子，要美美的畫面肯定是需要一些好看的圖片。

const stage = new Phaser.Class({
  ...
  
  preload: function () {
    //背景
    this.load.image("bg", "./assets/img/bg.png");
    //球
    this.load.image("ball", "./assets/img/ball.png");
    //板子
    this.load.image("board", "./assets/img/board.png");
    //很多顏色的磚塊ＸＤ
    this.load.image("blueBlock", "./assets/img/blueBlock.png");
    this.load.image("greenBlock", "./assets/img/greenBlock.png");
    this.load.image("greyBlock", "./assets/img/greyBlock.png");
    this.load.image("purpleBlock", "./assets/img/purpleBlock.png");
    this.load.image("redBlock", "./assets/img/redBlock.png");
    this.load.image("yellowBlock", "./assets/img/yellowBlock.png");
  },
  ...
  
})

佈置場景

這也是老招了～把該放的都給他放上去 : P
不過也嘗試新的方式來佈置，這次背景用了 make 跟之前 add 不同之處在於 make 是通過配置對象生成物件，透過設定 add: boolean 決定是否立即佈置到場境內。
這邊利用 mapping 表來幫助我們管理產生的磚塊。
也可以看到這邊的磚塊，我們是利用她包裝好的 .children.iterate() 來對每個磚塊一起做改變，跟之前 getChildren().forEach() 有異曲通功之妙。

const blockColorMap = [
  "blueBlock",
  "greenBlock",
  "greyBlock",
  "purpleBlock",
  "redBlock",
  "yellowBlock"
];
const stage = new Phaser.Class({
  ...
  
  create: function () {
    this.make.image({
      x: 400,
      y: 300,
      key: "bg",
      scale: { x: 0.75, y: 1 },
      add: true,
    });
    board = this.physics.add.image(400, 550, "board").setScale(0.5, 0.3);
    blocks = this.physics.add.group();
    for (let i = 0; i < 200; i++) {
      blocks.create(
        30 + 39 * (i % 20),
        35 + 18 * Math.floor(i / 20),
        blockColorMap[Math.floor(i / 20) % 6]
      );
    }
    blocks.children.iterate((block) => {
      block.setScale(0.6);
      block.body.immovable = true;
    });

    ball = this.physics.add.sprite(400, 500, "ball").setScale(0.7);
  },
  ...
  
});

佈置好之後就可以看到以下的畫面囉！

總結

今天我們用了不一樣的方式來設計我們的 scene，也輕輕鬆鬆佈置好我們的場景，明天我們再繼續往上加上功能吧！

tags: Phaser Game 2020鐵人賽