PixiJS V5 教學 (33) - 製作怪物

前言

接下來我們要來製作怪物的部分，目前史萊姆只有一隻，所以要讓他變多且自動移動。

史萊姆

blob = gameSprite('blob.png', resource);
blob.x = 350;
blob.y = frames.meta.size.h / 2;
blob.vx = 0;
blob.vy = 0;
gameStart.addChild(blob);

我們要改成用迴圈來大量生成史萊姆

const blobs = []; // 請放在全域下
const blobOptions = {
    number: 8,
    speeds: 5,
  };

for(let i = 0; i < blobOptions.number; i += 1) {
  blob = gameSprite('blob.png', resource);
  blob.x = 120 + (blobOptions.number + 32) * i;
  blob.y = frames.meta.size.h / 2;
  blob.vx = 0;
  blob.vy = blobOptions.speeds;
  blobs.push(blob);
  gameStart.addChild(blob);
}

但是這邊要注意一件事情，我們要將 blob 儲存在特定陣列中，到時候我們會需要使用

blobs.push(blob);

修改 Gameloop

接下來我們要修改原有的程式碼也就是 contain(blob, {x: 28, y: 10, width: 488, height: 480})

要改成使用迴圈的方式處理，並賦予速率，但是這邊要注意碰撞函數的部分也要丟入該迴圈中

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)) {
    // 碰撞後扣除血量
    gameHP -= 20;
    // 碰撞後往後退避免一直扣血
    explorer.x -= 10;
  }
})

接下來你應該會看到史萊姆同時移動，感覺超弱的，所以這邊要改一下速率將它變成隨機速率

function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

然後稍微調整一下初始化的史萊姆速率

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

最後基本上每一隻的速率就會不太一樣

參考文獻

• LearningPixi