PixiJS V5 教學 (32) - 重新開始製作

前言

這一篇稍微輕鬆鬆一點接續上一篇,所以這一篇就來製作重新開始遊戲的方法。

重新開始

當你玩遊戲 Game Over 的時候可能會有一些重新開始的按鈕,所以我們也可以藉此來製作雷同的方式,其實你會發現我們大多都會將一些東西 addChild 到特定的 Container,直接透過該 Container 來操作幾乎的行為。

那麼我們就來試著製作 Game Over 的重新開始的按鈕吧~

按鈕製作

首先我們必須先繪畫出相關的按鈕,這邊我們就可以使用幾何圖形來做繪畫

1
2
3
4
5
6
7
8
9
10
11
// 重新開始按鈕繪畫
const resetBtn = new PIXI.Container();
gameOver.addChild(resetBtn);

let gameGraphics = new PIXI.Graphics();
gameGraphics.beginFill(0x33BBFF);
gameGraphics.drawRoundedRect(0, 0, 120, 50, 25);
gameGraphics.endFill();
gameGraphics.x = frames.meta.size.w / 2 - gameGraphics.width / 2;
gameGraphics.y = frames.meta.size.h / 2 - gameGraphics.height / 2 + 60;
resetBtn.addChild(gameGraphics);

接下來撰寫文字

1
2
3
4
5
6
7
8
9
const resetText = new PIXI.Text('重新開始', {  // 改用變數傳入
fontFamily: 'Microsoft JhengHei',
fontSize: 16,
fill: [0xFFFFFF],
align: 'center'
});
resetText.x = frames.meta.size.w / 2 - resetText.width / 2;
resetText.y = frames.meta.size.h / 2 - resetText.height / 2 + 60;
resetBtn.addChild(resetText);

然後我們還要增加互動效果,也就是滑鼠變成手指的樣式

1
2
resetBtn.interactive = true;
resetBtn.buttonMode = true;

回歸初始

最後就比較簡單,建立相關的 function 並將回歸預設初始的值入值即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
resetBtn.click = gameReset;

function gameReset() {
// HP 回復
gameHP = 100;
// 玩家回歸初始位置
explorer.x = 50;
explorer.y = frames.meta.size.h / 2;
// 寶箱回歸初始位置
treasure.x = 400;
treasure.y = frames.meta.size.h / 2;
// 重新設置 Container 顯示
gameRun.visible = true;
gameStart.visible = false;
gameOver.visible = false;
}

參考文獻