Javascript 游戏：如何从数组中生成敌人（图像）

Question

我成功地用数组生成了敌人（从一张图像中），但是，我一直试图从不止一张图像中生成敌人（例如 5 个不同的图像，因此有 5 个不同的敌人）

这是我的有效代码： 生成敌人（enemyImg - 一个图像）

/** @type {HTMLCanvasElement} */
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const backgroundImg = document.getElementById("background");
const playerImg = document.getElementById("player");
const enemyImg = document.getElementById("enemy");
canvas.width = 800;
canvas.height = 500;

const enemies = [];
class Enemy {
  constructor(x, y, w, h, speed) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.speed = speed;
  }
  draw() {
    ctx.drawImage(enemyImg, this.x, this.y, this.w, this.h);
  }
  update() {
    this.x = this.x - this.speed;
  }
}
function spawnEnemies() {
  setInterval(() => {
    let w = 100;
    let h = 40;
    let x = canvas.width;
    let y = Math.random() * Math.abs(canvas.height - h);
    let speed = 5;
    enemies.push(new Enemy(x, y, w, h, speed));
  }, 1000);
}
function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  enemies.forEach((enemy) => {
    enemy.draw();
    enemy.update();
  });
}

animate();
spawnEnemies();

这是代码，它不起作用。我根本没有收到任何错误消息： 我在一个文件夹中有 6 张图片，分别命名为enemy_1.png 到enemy_6.png），我希望生成它们；

/** @type {HTMLCanvasElement} */
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const backgroundImg = document.getElementById("background");
const playerImg = document.getElementById("player");
const enemyImg = document.getElementById("enemy");
canvas.width = 800;
canvas.height = 500;

let enemies = [];
class Enemy {
  constructor(img, x, y, w, h, speed) {
    this.img = img;
    (this.x = x),
      (this.y = y),
      (this.w = w),
      (this.h = h),
      (this.speed = speed);
  }
  draw() {
    ctx.drawImage(img, this.x, this.y, this.w, this.h);
  }
  move() {
    this.x = this.x - this.speed;
  }
}
function createEnemies() {
  setInterval(() => {
    let w = 40;
    let h = 72;
    let x = 300;
    let y = Math.random() * Math.abs(canvas.height - h);
    let speed = 5;
    enemies.length = 6;
    for (let i = 1; i < enemies.length; i++) {
      enemies[i] = new Image();
      enemies[i].src = "./images/enemy_" + i + ".png";
      enemies.push(new Enemy(enemies[i], x, y, w, h, speed));
    }
  }, 2000);
}

function createGame() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  enemies.forEach((enemy) => {
    enemy.draw();
    enemy.move();
  });
  requestAnimationFrame(createGame);
}
createGame();
createEnemies();

Answer 1

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const backgroundImg = document.createElement('img');
const playerImg = document.createElement('img');

canvas.width = 500;
canvas.height = 200;

// load your images:
const imagesCount = 0; // I have not this images, so its zero for me
const enemyImages = [];
for (let i = 1; i < imagesCount; i++) {
    const img = new Image();
    img.src = "./images/enemy_" + i + ".png";
    enemyImages.push(img);
}

// I have not your images so i take some random pictures:
const enemyImage1 = new Image();
enemyImage1.src = 'https://pngimg.com/uploads/birds/birds_PNG106.png';
const enemyImage2 = new Image();
enemyImage2.src = 'https://purepng.com/public/uploads/large/purepng.com-magpie-birdbirdsflyanimals-631522936729bqeju.png';
const enemyImage3 = new Image();
enemyImage3.src = 'https://www.nsbpictures.com/wp-content/uploads/2018/10/birds-png.png';
enemyImages.push(
  enemyImage1,
  enemyImage2,
  enemyImage3,
);




const enemies = [];
class Enemy {
  constructor(x, y, w, h, speed, img) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.speed = speed;
    // Self image:
    this.img = img;
  }
  draw() {
    // Draw self image:
    ctx.drawImage(this.img, this.x, this.y, this.w, this.h);
  }
  update() {
    this.x = this.x - this.speed;
  }
}
function spawnEnemies() {
  setInterval(() => {
    let w = 60;
    let h = 50;
    let x = canvas.width;
    let y = Math.random() * Math.abs(canvas.height - h);
    let speed = 5;
    enemies.push(new Enemy(x, y, w, h, speed, 
      // Pick random image from array:
      enemyImages[Math.floor(Math.random()*enemyImages.length)]
    ));
  }, 1000);
}
function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  enemies.forEach((enemy) => {
    enemy.draw();
    enemy.update();
  });
}

animate();
spawnEnemies();

<canvas id=canvas></canvas>