PixiJS V5 教學 (21) - 碰撞邊界(3)

發表於 2020-07-01 分類於 JavaScript

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

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

這一篇會稍微接續上一篇的部分小地方來做修正與說明，所以大多程式碼會以上一篇為主，所以這一篇會稍微短一點。

前言

這一篇會稍微接續上一篇的部分小地方來做修正與說明，所以大多程式碼會以上一篇為主，所以這一篇會稍微短一點。

前面我們已經做出了基本的遊戲傷害顯示狀況，但是這邊有一個問題，假使今天你希望位置是亂跳的呢?而不是固定在一個地方，那麼我們就會使用到 random 這個方法，it 鐵人邦已經有前輩介紹過 Math.random，所以我就直接挪用裡面的程式碼

1
2
3

function getRandom(x){
  return Math.floor(Math.random()*x)+1;
};

所以我們就可以針對撞擊上邊界後產生的效果隨機產生位置

1 2	graphics.x = getRandom(150); graphics.y = getRandom(150);

接下來你應該會發現效果就會到處亂生長，可是這邊會有一個問題，也就是文字的部分，文字並不能垂直水平置中在星型圖案中，但是只要你使用以下公式就可以確保文字水平置中

1 2	startText.x = graphics.x - startText.width / 2; startText.y = graphics.y - startText.width / 2;

假使你若只寫 startText.x = graphics.x 你會發現文字會整個往後移，因為 PIXI 在渲染文字的時候是以第一個文字為基準，所以必須要扣除文字本身的長度與寬度在除 2，那麼這樣就可以確保文字垂直水平置中於星型效果。

最後我做了一點調整，讓這個星型更像爆擊效果的感覺

graphics.beginFill(0x9D482E);
const startText = new PIXI.Text('1000',{
  fill: 0xDDD00D,
});