▉ 前言

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

系統提示：「There are no shortcuts to any place worth going.」，PixiJS青銅玩家仍卡關在play()階段，僅獲得經驗提昇等級。

▉ 主線任務：play( )：當冒險者撞到怪物

▍任務說明

當冒險者explorer撞到怪物blob時，會改變的事件有兩者：

1. explorer撞到blob的當下，會變半透明的
2. 血條的變化

所以這個任務就是要針對兩者碰撞後，該如何寫出上方兩種產生的變化。

▍作法

  if(explorerHit) {
    explorer.alpha = 0.5;
    healthBar.outer.width -= 1;
  } else {
    explorer.alpha = 1;
  }

▍分析

首先，我們可以看見explorerHit，這個變數在剛進到play()函數時，就先給這個變數設置為false，直到在【LV. 18】怪物移動的部份，寫到當explorer與blob相撞時，explorerHit會改變成true。

if(hitTestRectangle(explorer, blob)) {
  explorerHit = true;
}

所以當explorerHit變為true時，則會執行if底下的程式，否則執行else底下的程式。

接著來看當explorerHit為true時，會做什麼改變。

1. explorer撞到blob的當下，會變半透明的：
這裡利用了Sprite的alpha屬性，此屬性可以變更物件的透明度，例如此處變成0.5，則變為半透明，而當alpha屬性為1時，則保持原100%的不透明度。

也就是說當explorerHit = true的時候，explorer會變半透明：

explorer.alpha = 0.5;

否則保持正常透明度：

explorer.alpha = 1;

2. 血條的變化：
當撞到的當下，血條上方的紅框寬度，將會減少1px。

healthBar.outer.width -= 1;

▉ 主線任務：play( )：當冒險者碰到寶箱

▍任務說明

當冒險者explorer碰到寶箱，會發生的事情只會有一個，那就是寶箱必須拿起，並且跟著explorer移動。

▍作法

if (hitTestRectangle(explorer, treasure)) {
    treasure.x = explorer.x + 8;
    treasure.y = explorer.y + 8;
}

▍分析

他的作法很簡單易懂，就是先利用自定義函數hitTestRectangle判斷explorer以及treasure是否有碰撞，碰撞的話會return true，進而符合這個if判斷式。

當碰撞後，因為treasure必須跟著explorer，所以改變treasure的位置為，距離explorer左上角原點往右8px及往下8px的地方，這樣即便explorer移動了，treasure也會跟著explorer去做移動的動作。

▉ 主線任務：play( )：血條是否歸0（輸的條件）

▍任務說明

判斷血條是否歸零，假設歸0，則遊戲失敗且遊戲結束。

▍作法

if (healthBar.outer.width < 0) {
    state = end;
    message.text = "You lost!";
}

▍分析

判斷血條是否歸0的方法，為判斷血條的紅框的width是否小於等於0，是的話則代表explorer死掉了，遊戲結束之外，還得顯示"You lost!"到頁面。

1. 遊戲結束
   gameLoop()會每1秒60次更新state的情況，而此時state一轉變成end時，代表就是終結了play()的遊戲邏輯。

   state = end;
   

2. 顯示"You lost!"
   在【LV. 14】時，就提到了結束頁面時的文字，我們可以透過.text屬性來更改原先的文字。

▉ 主線任務：play( )：當冒險者拿著寶箱（贏的條件）

▍任務說明

當explorer碰到寶箱後，寶箱就會黏著explorer，不會分離。而此時玩家需要做的就是將寶箱送至門口，以結束遊戲。
--->

▍作法

if (hitTestRectangle(treasure, door)) {
    state = end;
    message.text = "You won!";
} 

▍分析

這裡一樣使用了自定義函式hitTestRectangle()，不過碰撞的對象可以注意一下，此處判斷的是treasure以及門的碰撞偵測。

至於改變的部份與輸的狀況非常相似，所以這裡就不再寫了。

▉ 主線任務：end( )

▍任務說明

遊戲結束的狀態，當遊戲結束時必須出現的角色。

▍作法

function end() {
  gameScene.visible = false;
  gameOverScene.visible = true;
}

▍分析

當遊戲結束時，變數state就會轉變成end()，而end()這個函數會執行的事情只有兩個：

1. 使gameScene變成不可見（還在舞台之上，只是隱藏起來了）

gameScene.visible = false;

2. 使gameOverScene變成可見的（原先是被隱藏起來的）

gameOverScene.visible = true;

▉ 結語

今天一次寫到end()，總算是基本的程式碼全都完成了，明天將開始寫自定義函數的部份。

參考資料

• PixiJS 教程中文版
• PIXI官方文件-alpha