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

發表於 2020-09-28 分類於 JavaScript

Google AD

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

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

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

前言

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

寶箱

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

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

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

寶箱跟著跑

逃生

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

let getTreasure = false;

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

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


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

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

(~~雖然我還是做了~~)

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

參考文獻

LearningPixi