▉ 前言

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

系統說明：「Yesterday is history. Tomorrow is a mystery. Today is a gift. That’s why we call it ‘The Present’--Eleanor Roosevelt」，PixiJS青銅玩家仍卡關於setUp()階段，僅獲得經驗值提昇等級。

▉ 主線任務：setUp( )：鍵盤偵測

▍任務說明

此處暫時不討論自定義的keyboard function（自定義function會一次放在最後寫），而是將重點放在功能部份，當我們按下「上、下、左、右」鍵時，分別會發生什麼事情。

▍作法

let left = keyboard(37),
    up = keyboard(38),
    right = keyboard(39),
    down = keyboard(40);

left.press = function() {
    explorer.vx = -5;
    explorer.vy = 0;
};
left.release = function() {
    if (!right.isDown && explorer.vy === 0) {
      explorer.vx = 0;
    }
};

up.press = function() {
    explorer.vy = -5;
    explorer.vx = 0;
};
up.release = function() {
    if (!down.isDown && explorer.vx === 0) {
      explorer.vy = 0;
    }
};

right.press = function() {
    explorer.vx = 5;
    explorer.vy = 0;
};
right.release = function() {
    if (!left.isDown && explorer.vy === 0) {
      explorer.vx = 0;
    }
};

down.press = function() {
    explorer.vy = 5;
    explorer.vx = 0;
};
down.release = function() {
    if (!up.isDown && explorer.vx === 0) {
      explorer.vy = 0;
    }
};

▍分析

//Capture the keyboard arrow keys

首先，keyboard是我們自定義的function，至於他長什麼樣子可以先看教程中提供的程式碼這邊先不寫關於自定義的內容。

簡單來說keyboard()這個函數可以接受一個參數，而這個參數即為與鍵盤按鍵相對應的ASCII值，而對應多少可以到MDN-Value of KeyCode上方查詢（上面給的超級完整！）

這裡就先貼出我們需要的按鍵相對應的ASCII值：

let left = keyboard(37),
    up = keyboard(38),
    right = keyboard(39),
    down = keyboard(40);

接著來看當我們按下「上、下、左、右」鍵時，分別會發生什麼事情，這邊會以左鍵作為說明（因為其餘內容都是一樣的），而「上、下、左、右」鍵個別都會有兩種可能的function等待著被執行：按下（press）或放開（release）

//Left arrow key press method

• 按下（press）
  當左鍵按下時，就會去執行一個函式，使explorer在x方向每幀往左走5pixel，關於vx,vy運用，這裡寫了個codepen，可以去更改裡面的vx,vy觀察不同速度下的移動。

  left.press = function() {
      explorer.vx = -5;
      explorer.vy = 0;
  };
  

• 放開（release）
  而放開時要讓explorer靜止，這裡需要判斷此時玩家是否「沒有按下右鍵」以及explorer在y軸的方向為0，也就是說玩家「沒有按下上下鍵」，當兩個條件皆符合時，則使explorer的速度變成0靜止不動。

  至於為什麼要偵測玩家是否「沒有按下上下鍵」的原因，我想是因為如果玩家按下「上」或「下」鍵時，執行的function也會自動使explorer的x速度變成0，所以如果玩家已按下「上」或「下」鍵，explorer的x速度就會變成0，也就沒有必要進入left.release的function中了。

  left.release = function() {
      if (!right.isDown && explorer.vy === 0) {
        explorer.vx = 0;
      }
  };
  

  那其他「右」、「上」、「下」鍵的內容大同小異，就不再多寫了，而關於keyboard()這個自定義的函式會留到後面做說明，接著要進入到setup()的最後一部分。

▉ 主線任務：setUp( )：設置遊戲狀態

▍任務說明

設置遊戲不同情況下的狀態。

▍作法

//Set the game state

state = play;

▍分析

設置一個變數為state，去做切換的動作，以這個Treasure Hunter Game來說，可以切換成兩種state（狀態），分別為play()以及end()。

當遊戲開始時，狀態會被切換成play();當遊戲結束時，狀態會被切換成end()。

他們的關係如下圖，這邊先有他們之間關係的概念，至於play()以及end()函式的細節會放到後面再寫。

但是切換了之後然後呢？我們得去執行這個state，以遊戲開始來說，也就是我們必須去執行play()，而這裏我們將利用gameloop去循環執行play()。

▉ 主線任務：setUp( )：開始遊戲迴圈

▍任務說明

設置好遊戲狀態後，讓狀態的函數進入遊戲迴圈作執行的動作。

▍作法

//Start the game loop

app.ticker.add(delta => gameLoop(delta));

▍分析

我們可以利用PIXI中的ticker進行遊戲循環，任何在ticker底下的程式，都會每1秒更新60次。所以以上方的程式碼為例，就代表著gampLoop這個函式將會每1秒被更新60次，進行一個遊戲的循環，不斷做更新。

而delta這個參數，其實不管有沒有都沒太大差異，它的作用在於每幀變化的延遲，他只會在當動畫速度跟不上60幀時才會有作用（但跟不上60幀通常只會在比較老舊的機器上發生，所以前面才會說就算沒使用delta也沒關係）

▉ 結語

今天只有下午的時間，寫得有點趕...不過算是把setUp()部份給完成了，明天假日順便往下一階段前進！

參考資料

• PixiJS 教程中文版