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

發表於 2020-09-14 分類於 JavaScript

Google AD

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

Liker 讚賞

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

｜

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

前言

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

重新開始

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

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

按鈕製作

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

// 重新開始按鈕繪畫
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);

接下來撰寫文字

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 並將回歸預設初始的值入值即可

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

參考文獻

LearningPixi