PixiJS V5 教學 (35) - 優化細節

發表於 2020-10-05 分類於 JavaScript

Google AD

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

Liker 讚賞

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

｜

最後這一篇來抓一下這個寶藏獵人還可以優化那些細節。

前言

最後這一篇來抓一下這個寶藏獵人還可以優化那些細節。

寶藏獵人

目前來講寶藏獵人已經趨近一個 ok 的狀態，但是遊戲總是會時續優化，所以概略列一下可以優化那些細節

重新開始就隨機速率。
- 目前是固定速率，只會抓取第一次加載的速率。
碰到史萊姆身體呈現半透明。
碰撞隨機傷害
- 目前傷害都是固定扣血量。

但是以上絕大部分都已經介紹過載入的方式，所以這邊就不在詳細介紹，只介紹幾個地方而已。

隨機速率

目前速率的設置是

1	blob.vy = blobOptions.speeds + randomInt(0, 3);

只是當我們重新開始遊戲的時候要將速率重新調整，目前怪物都是採用陣列去生成，所以應這樣改

function gameReset() {
  ...
  // 重新調整怪物速率
  blobs.forEach((item) => {
    item.vy = blobOptions.speeds + randomInt(0, 3);
  });
  ...
}

半透明

半透明的作法很簡單，只需要將冒險者的物件 alpha 改一下就可以了

if(boxesIntersect(explorer, item)) {
  // 碰撞後扣除血量
  gameHP -= 20;
  // 碰撞後往後退避免一直扣血
  explorer.x -= 10;
  explorer.alpha = 0.5;
} else {
  explorer.alpha = 1;
}

但是這邊要注意如果你是將上面這一個判斷式寫在 blobs.forEach 中那麼你會發現只有最後一個史萊姆才會造成半透明效果，所以建議修改成以下

let hitStatus = false;

blobs.forEach((item) => {
  item.y += item.vy;
  const blobsHit = contain(item, {x: 28, y: 10, width: 488, height: 480})
  if(blobsHit === 'top' || blobsHit === 'bottom') {
    item.vy *= -1;
  }
  if(boxesIntersect(explorer, item)) {
    hitStatus = true;
  }
})

if(hitStatus) {
  // 碰撞後扣除血量
  gameHP -= 1;
  explorer.alpha = 0.1;
} else {
  explorer.alpha = 1;
}

這樣子才可以正常的碰撞每一個史萊姆就變成半透明。

碰撞後往後退的效果我就移除，因為會產生一些奇怪的問題，先讓遊戲簡單一點即可。

隨機碰撞傷害

相信聰明的你應該很快就知道隨機碰撞傷害該如何使用，只需要使用 randomInt() 即可。

if(hitStatus) {
  // 碰撞後扣除血量
  gameHP -= randomInt(1, 5);
  explorer.alpha = 0.1;
} else {
  explorer.alpha = 1;
}

只是這邊不建議數字拉太高避免變成秒殺的狀況，最後我還有加入一些效果，當碰到史萊姆時會跳出傷害，剩下的就留給你看囉~

參考文獻

LearningPixi