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

blobs.push(blob);

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