PixiJS V5 教學 (34) - 整合碰撞函數

前言

接下來這邊當冒險者碰到寶箱的時候,寶箱必須會跟著使用者移動,並接下來往門移動後就顯示過關成功。

寶箱

其實這邊就簡單許多,只需要加入判斷碰撞函數即可

1
2
3
4
if(boxesIntersect(explorer, treasure)) {
treasure.x = explorer.x + 8;
treasure.y = explorer.y + 8;
}

這樣子當你碰到寶箱時,寶箱就會跟著你跑了

寶箱跟著跑

逃生

接下來當我們碰到門的時候就要結束遊戲,那麼其實也很簡單,就只是增加一個變數並搭配 if 判斷

1
2
3
4
5
6
7
let getTreasure = false;

if(boxesIntersect(explorer, treasure)) {
treasure.x = explorer.x + 8;
treasure.y = explorer.y + 8;
getTreasure = true;
}

然後底下就只是一個碰撞函數

1
2
3
4

if(boxesIntersect(explorer, door) && getTreasure) {
console.log('遊戲結束'); // 忘記製作遊戲結束畫面
}

那麼最後的獲勝畫面就留給你製作囉~

(雖然我還是做了)

最後這個範例我有稍微調整過,讓遊戲稍微好過一點。

參考文獻

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下拍手,過程你只需要登入,如果你願意按個讚,對於創作者來講是一個莫大的鼓勵與支持。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ