PixiJS V5 教學 (31) - 文字訊息
前言
接下來我們要來製作一下當碰撞死亡後出現的文字訊息。
死亡訊息
死亡訊息的製作其實並不困難,但是其實重點在於有兩層 Container 顯示與不顯示
1 | const gameOver = new PIXI.Container(); |
這邊要注意,預設的情況下 GameOver 是 hide 的
1 | const gameOver = new PIXI.Container(); |
接下來就是在製作 messages function
1 | function messages(text) { |
記得這邊要加入判斷開啟顯示 GameOver 的 Container
1 | if(gameHP === 0) { |
接下來你碰撞到 HP 歸 0 後就會出現這個畫面
開始遊戲
那麼開始遊戲的製作也是雷同的做法只是在一開始 gameStart
是處於 hide 而已
1 | const gameStart = new PIXI.Container(); |
接下來這邊就簡單許多,只是替 body.addEventListener('keydown',(e) => { ... }
增加相關的 keyDown 而已,只是這邊會使用一個判斷式來避免死亡後又按下 Enter 可以繼續玩的問題
1 | if(gameHP > 0) { |