來！來！來！進入我們此系列文的主軸了，讓我們走入童年回憶的遊戲裡吧！
第一個遊戲我想先來的心心念念的小朋友下樓梯，讓我們開始吧！

Photo by Braden Collum on Unsplash

事前準備

我們要一個好的遊戲體驗就需要一些美美的畫面來讓使用者看得舒服一些，所以去找了一些素材來使用，這裡找到了～https://kenney.nl/assets，於是就從這邊找了一些素材來使用，有了這些素材就可以讓我們開始來實作囉！

載入素材

老樣子，先把我們需要用到的素材載入，下樓梯需要一個主角、地形、最上面的尖刺與背景，我們一樣一一載入也附上他們的key。

function preload() {
  this.load.image("bg", "assets/background.png");
  this.load.image("ground", "assets/ground_grass.png");
  this.load.image("spikes", "assets/spikes.png");
  this.load.spritesheet("player", "assets/man.png", {
    frameWidth: 80,
    frameHeight: 110
  });
}

佈置場景

一樣先為我們的 phaser 設定 config，由於我們的下樓梯為長型的遊戲，所以我們這裡設定為 600 x 800 ，而這裡我們就先給上物理碰撞的引擎，但是先不給重力，之後再依據我們的機制來做設定。

var config = {
  type: Phaser.AUTO,
  width: 600,
  height: 800,
  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 0 },
      debug: false,
    },
  },
  scene: {
    preload,
    create,
    update,
  },
};

為我們的場景加上背景，並且利用前面提到的置放圖片時會使用圖片的中心來擺放圖片。

this.add.image(300, 400, "bg");

再來加入我們的主角，並且一樣給上他與場景的碰撞不讓他超出我們的場景，有為他加上移動的動畫。

player = this.physics.add.sprite(300, 500, "player").setScale(0.5);
player.setCollideWorldBounds(true);

this.anims.create({
    key: "walking",
    frames: this.anims.generateFrameNumbers("player", { start: 1, end: 2 }),
    frameRate: 10,
    repeat: -1
});

接著來產生我們的地形，也就是我們主角需要下的樓梯，也加上他跟主角的碰撞這樣才能讓主角站在上面。

grounds = this.physics.add.group();
this.physics.add.collider(player, grounds);
grounds.create(100, 200, "ground").setScale(0.5);
grounds.create(200, 400, "ground").setScale(0.5);
grounds.create(300, 600, "ground").setScale(0.5);
grounds.create(500, 800, "ground").setScale(0.5);
grounds.create(400, 1000, "ground").setScale(0.5);

最後在我們的最上方加上尖刺，也為他跟主角加上物理碰撞。

spikes = this.physics.add.staticGroup();
this.physics.add.collider(player, spikes);
for (let i = 0; i < 20; i++) {
  spikes
    .create(0 + 30 * i, 0, "spikes")
    .setScale(0.5)
    .setOrigin(0, 0);
}

擺放完之後就會看到我們的畫面如下：

總結

很好～我們現在把該擺放上去的東西，都設置上去了，明天我們就讓他們動起來！！

tags: Phaser Game 2020鐵人賽