▉ 前言

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

系統說明：「The secret of success is constancy to purpose.」，PixiJS青銅玩家完成setUp()階段的所有任務，獲得一條褐色束口褲及新靴子。

▉ 主線任務：gameLoop( ) ：不斷更新遊戲狀態

▍任務說明

讓遊戲不斷更新去取得目前遊戲的狀態（state）為play()或是end()。

▍作法

function gameLoop(delta){

  //Update the current game state:
  state(delta);
}

▍分析

上方程式碼，即為我們的gameLoop()。gameLoop()這個function很單純的裡面就只有一行state。

但是單單這樣看，其實看不出任何內容，所以現在來回顧一下，在setUp()的部份最後面兩行程式：

//Set the game state
state = play;

//Start the game loop 
app.ticker.add(delta => gameLoop(delta));

function gameLoop(delta){

  //Update the current game state:
  state(delta);
}

上方第一部份的程式碼先將狀態state設置為play()，這個時候利用PIXI中的ticker，使用ticker的add方法，使方法中的函式會連續不斷的被呼叫（除非ticker被移除，或是ticker被暫停），而在官方教程則有提到在ticker裡頭的函式，將會在每1秒鐘更新60次。

附上官方文件的說明：

所以回過頭來看底下這條程式碼，他的意思就代表著每1秒將更新60次gameLoop()這個function。

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

而gameLoop()這個function裡的state()，就會看目前被賦值於什麼函式，像是這裡即被賦予play()，也就是說play()函數每秒被運行了60次。

至於play()函數的內容，將放在明天再寫，今天先好好釐清遊戲循環的程式碼之間的關係。

▉ 結語

今天人剛好在外縣市，手上的3c幾乎都快沒電了，所以內容只完成了gameLoop()部份，不過想想也好，不是很想把play()拆開來寫（雖然之後可能也還是會因為太長而拆開）。

參考資料

• PixiJS 教程中文版