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

前言

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

接續上一篇

前面我們已經做出了基本的遊戲傷害顯示狀況，但是這邊有一個問題，假使今天你希望位置是亂跳的呢?而不是固定在一個地方，那麼我們就會使用到 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，那麼這樣就可以確保文字垂直水平置中於星型效果。

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

1
2
3
4

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

參考文獻

• [筆記][JavaScript]用Math.random()取得亂數的技巧