這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !
系統提示:「There are no shortcuts to any place worth going.」,PixiJS青銅玩家仍卡關在play()階段,僅獲得經驗提昇等級。
當冒險者explorer撞到怪物blob時,會改變的事件有兩者:
所以這個任務就是要針對兩者碰撞後,該如何寫出上方兩種產生的變化。
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;
當冒險者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去做移動的動作。
判斷血條是否歸零,假設歸0,則遊戲失敗且遊戲結束。
if (healthBar.outer.width < 0) {
state = end;
message.text = "You lost!";
}
判斷血條是否歸0的方法,為判斷血條的紅框的width是否小於等於0,是的話則代表explorer死掉了,遊戲結束之外,還得顯示"You lost!"到頁面。
gameLoop()
會每1秒60次更新state的情況,而此時state一轉變成end時,代表就是終結了play()
的遊戲邏輯。
state = end;
當explorer碰到寶箱後,寶箱就會黏著explorer,不會分離。而此時玩家需要做的就是將寶箱送至門口,以結束遊戲。 --->
if (hitTestRectangle(treasure, door)) {
state = end;
message.text = "You won!";
}
這裡一樣使用了自定義函式hitTestRectangle()
,不過碰撞的對象可以注意一下,此處判斷的是treasure以及門的碰撞偵測。
至於改變的部份與輸的狀況非常相似,所以這裡就不再寫了。
遊戲結束的狀態,當遊戲結束時必須出現的角色。
function end() {
gameScene.visible = false;
gameOverScene.visible = true;
}
當遊戲結束時,變數state就會轉變成end()
,而end()
這個函數會執行的事情只有兩個:
gameScene
變成不可見(還在舞台之上,只是隱藏起來了)gameScene.visible = false;
gameOverScene
變成可見的(原先是被隱藏起來的)gameOverScene.visible = true;
今天一次寫到end(),總算是基本的程式碼全都完成了,明天將開始寫自定義函數的部份。