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,
});

參考文獻

0%