Javascript Game: How to generate enemies (images) from an array

I am totally new to JS, but luckily I was successful in generating enemies (out of one image) with an array. However, I'm stuck in trying to generate enemies out of more than one image (e. g. 5 different images, thus 5 different enemies)

Here is my code:

/** @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();

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW