如何在JavaScript Canvas中复制Invaders类实例并修改其位置属性

你代码里的核心问题是只创建了一个Invaders实例，循环中反复把同一个实例push到数组里。数组里的所有元素都是同一个对象的引用，所以修改任何一个"实例"的位置，其实都是修改同一个对象，最终所有入侵者都会堆叠在一起。另外，animate函数也只更新了这单个实例，没有处理数组里的所有对象。

1. 改造Invaders构造函数，支持传入位置参数 #

让构造函数接收x、y参数，这样创建实例时可以直接指定不同位置：

class Invaders{
    constructor(x, y){
        this.x = x;
        this.y = y;
        this.width = 50;
        this.height = 50;
        const image = new Image();
        image.src = './image/invader.png';
        this.image = image;
    }
    draw(){
        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
    }
    update(){
        this.draw();
    }
}

2. 循环创建独立实例并加入数组 #

每次循环都new Invaders()生成新实例，同时给每个实例分配不同的位置（比如横向排列，间隔60像素）：

let invaderCount = 5;
const allInvaders = [];

for(let i = 0; i < invaderCount; i++){
    // 计算每个入侵者的x坐标，100是起始位置，60=宽度50+间距10
    const invaderX = 100 + i * 60;
    // y坐标统一200，也可以根据i设置不同值
    const invaderY = 200;
    allInvaders.push(new Invaders(invaderX, invaderY));
}

3. 修改animate函数，更新所有实例 #

遍历数组，调用每个实例的update方法，同时记得清空画布避免重绘残留：

function animate(){
    requestAnimationFrame(animate);
    // 清空整个画布，参数是画布的起始坐标和宽高
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    allInvaders.forEach(invader => {
        invader.update();
    });
}
animate();

额外注意 #

• 确保你已经正确获取了canvas元素和上下文：

  const canvas = document.getElementById('yourCanvasId');
  const ctx = canvas.getContext('2d');
  

• 图片加载问题：如果图片还没加载完成就调用drawImage，可能会显示异常。可以给图片添加加载完成事件，确保加载后再绘制：

  class Invaders{
      constructor(x, y){
          this.x = x;
          this.y = y;
          this.width = 50;
          this.height = 50;
          this.image = new Image();
          this.image.onload = () => {
              // 图片加载完成后再绘制
              this.draw();
          };
          this.image.src = './image/invader.png';
      }
      // ...其他方法不变
  }
  

内容的提问来源于stack exchange，提问作者kerolos aziz