Javascript 游戲：如何從數組生成敵人（圖像）

Question

我對 JS 完全陌生，但幸運的是我成功地用數組生成了敵人（從一張圖像中）。 但是，我一直試圖從多個圖像中生成敵人（例如 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 個圖像，命名為敵人_1.png 到敵人_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>