PixiJS V5 教學 (21) - 碰撞邊界(3)
前言
這一篇會稍微接續上一篇的部分小地方來做修正與說明,所以大多程式碼會以上一篇為主,所以這一篇會稍微短一點。
接續上一篇
前面我們已經做出了基本的遊戲傷害顯示狀況,但是這邊有一個問題,假使今天你希望位置是亂跳的呢?而不是固定在一個地方,那麼我們就會使用到 random
這個方法,it 鐵人邦已經有前輩 介紹 過 Math.random
,所以我就直接挪用裡面的程式碼
1 | function getRandom(x){ |
所以我們就可以針對撞擊上邊界後產生的效果隨機產生位置
1 | graphics.x = getRandom(150); |
接下來你應該會發現效果就會到處亂生長,可是這邊會有一個問題,也就是文字的部分,文字並不能垂直水平置中在星型圖案中,但是只要你使用以下公式就可以確保文字水平置中
1 | startText.x = graphics.x - startText.width / 2; |
假使你若只寫 startText.x = graphics.x
你會發現文字會整個往後移,因為 PIXI 在渲染文字的時候是以第一個文字為基準,所以必須要扣除文字本身的長度與寬度在除 2,那麼這樣就可以確保文字垂直水平置中於星型效果。
最後我做了一點調整,讓這個星型更像爆擊效果的感覺
1 | graphics.beginFill(0x9D482E); |