▉ 前言

這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !

系統提示：「Keep trying no matter how hard it seems. it will get easier.」，PixiJS青銅玩家完成了play()及end()階段，獲得一件背心。

▉ 主線任務：helper function - contain( )

▍任務說明

contain( )這個自定義函數的用途：

1. 控制冒險者以及泡泡怪們的運動範圍，將他們限制在地牢這張地圖中，不讓他們超出地牢。
2. 回傳泡泡怪們接觸到哪個方向的邊界，以便讓他們可以在撞牆時轉換方向。

▍作法

function contain(sprite, container) {

  let collision = undefined;

  //Left
  if (sprite.x < container.x) {
    sprite.x = container.x;
    collision = "left";
  }

  //Top
  if (sprite.y < container.y) {
    sprite.y = container.y;
    collision = "top";
  }

  //Right
  if (sprite.x + sprite.width > container.width) {
    sprite.x = container.width - sprite.width;
    collision = "right";
  }

  //Bottom
  if (sprite.y + sprite.height > container.height) {
    sprite.y = container.height - sprite.height;
    collision = "bottom";
  }

  return collision;
}

▍分析

首先可以從程式碼中看到contain()可以接收兩個參數，這裡先分別稱這兩個參數為sprite、container。

contain(sprite, container)

1. sprite：
   第一個參數，就是放入我們想控制範圍的sprite，例如這個範例中，我們就會放入explorer或是blobs。
2. container：
   第二個參數，就是這個參數放入的會是一個物件，這個物件包含了4個屬性，分別為x、y、width、height，（x、y為左上角原點位置、width為寬、height為高），而這個參數將由以上4個屬性組成一個矩形區域，作為限制第一個參數行動的範圍。

再來看到contain()裡面的第一行以及最後一行，contain()在最後會回傳一個值叫做collision，而我們給這個collision一開始初始設置為undefined，也就是說Sprite沒有碰到邊界時，皆是回傳undefined：

//第一行
let collision = undefined;
//最後一行
return collision;

接著來看當sprite碰到上、下、左、右邊界時，各要如何判斷以及如何如何處理碰上邊界後的清況。

左邊界以及上邊界是最好判斷的，因為sprite的原點就在左上角的地方，所以可以直接使用sprite的位置做比較：

//Left
if (sprite.x < container.x) {
    sprite.x = container.x;
    collision = "left";
}

//Top
if (sprite.y < container.y) {
    sprite.y = container.y;
    collision = "top";
}

而右邊界與下邊界則需要注意加上sprite的寬度或高度，再去比較是否超出了地牢範圍：

//Right
if (sprite.x + sprite.width > container.width) {
    sprite.x = container.width - sprite.width;
    collision = "right";
}

//Bottom
if (sprite.y + sprite.height > container.height) {
    sprite.y = container.height - sprite.height;
    collision = "bottom";
}

從上方程式碼我們可以注意到，每當超出container參數給定的範圍時，if判斷式裡面便會執行兩個動作：

1. 將sprite的位置（x或y位置）繼續留在邊界上方
2. 賦予collision新的值（例如left、right、top、bottom），並在最後回傳collision

▉ 結語

contain( )的內容就到這邊結束，明天會寫另外一個自定義函數hitTestRectangle( )，也就是碰撞偵測的部份。

參考資料

• PixiJS 教程中文版