是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2020-08-31 JavaScript

PixiJS V5 教學 (30) - 遊戲循環

#JavaScript #PixiJS V5 教學 #PixiJS #Canvas #w3HexSchool

前言

接下來就準備要來做遊戲的循環，簡單來講就是 app.ticker.add((delta) => {...});

遊戲循環

一開始最基礎簡單的遊戲循環我們會建立在剛剛的 init 中，並透過另一個 function 來執行相關參數

1
2
3
app.ticker.add((delta) => {
  gameLoop(delta);
});

其中最基礎的遊戲循環就是 HP 的機制，因為 HP 每一次都會做更新，所以我在這邊就建立了一個 HP 的繪畫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const hpContainer = new PIXI.Container();
let gameHP = 100;

function HPstatus() {
  let border = new PIXI.Graphics();
  border.beginFill(0x000000);
  border.drawRect(0, 0, 100, 10, 10);
  border.endFill();
  hpContainer.addChild(border);

  let borderFill = new PIXI.Graphics();
  borderFill.beginFill(0xFF0000);
  borderFill.drawRect(0, 0, 100, 10, 10);
  borderFill.endFill();
  hpContainer.addChild(borderFill);
  hpContainer.hpStatus = borderFill;

  hpContainer.x = 340;
  hpContainer.y = 10;

  
  gameStart.addChild(hpContainer);
}

最後並放入到遊戲循環中，但是這邊要注意，當 HP 低於 0 的時候就不再執行減少繪畫，否則將會導致 HP 爆表

1
2
3
4
5
6
function gameLoop() {
  if( 0 < gameHP) {
    gameHP -= 1;
    hpContainer.hpStatus.width = gameHP;
  }
}

接下來就將碰撞函數丟進去並修改上面的相關判斷

1
2
3
4
5
6
7
8
if(boxesIntersect(explorer, blob)) {
    // 碰撞後扣除血量
    gameHP -= 20;
    // 碰撞後往後退避免一直扣血
    explorer.x -= 10;
  };
  // 重新調整血量
  hpContainer.hpStatus.width = gameHP;

在這段碰撞函數之前當 HP 歸零的時候畫面就會黑掉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function gameLoop() {
  // 血量歸零後畫面就黑掉
  if(gameHP === 0) {
    gameStart.visible = false;
  }

  contain(explorer, {x: 28, y: 10, width: 488, height: 480})
  contain(blob, {x: 28, y: 10, width: 488, height: 480})

  if(boxesIntersect(explorer, blob)) {
    // 碰撞後扣除血量
    gameHP -= 20;
    // 碰撞後往後退避免一直扣血
    explorer.x -= 10;
  };
  // 重新調整血量
  hpContainer.hpStatus.width = gameHP;
}

畫面切掉主要是使用 visible 屬性，這個屬性的意思是當前這個 Container 是否可見，最後這邊你可以稍微試玩一下這個半成品

See the Pen PIXI treasureHunter(2) by Ray (@hsiangfeng) on CodePen.

題外話，目前這個半成品如果你從上方碰觸史萊姆你會直接被秒殺 XD。

參考文獻

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

buymeacoffee | line | portaly

Terminal

相關文章

PixiJS V5 教學 (40) - 終章

2020-11-11

PixiJS V5 教學 (39) - 音樂

2020-11-02

PixiJS V5 教學 (38) - TexturePacker

2020-10-31

PixiJS V5 教學 (37) - 加入 stats.js

2020-10-21

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme