p5.js中使用Boxes类对象数组调用类方法失效的解决方法求助

嘿，我来帮你搞定这个问题！从你给出的代码和描述来看，问题的核心大概率出在类的初始化步骤或者数组实例的创建方式上，咱们一步步拆解：

问题根源分析 #

你的Boxes类里，x和y只在构造函数里声明了，但没有被赋值为具体数值。当你单独使用box1的时候，应该是手动给box1.x和box1.y设了值（比如box1.x = 50; box1.y = 50;），所以调用show()能正常渲染。但用数组的时候，很可能你忘记给每个数组元素的x、y赋值，或者甚至没正确创建实例，导致调用show()时无法绘制出矩形。

具体解决方案 #

1. 先完善Boxes类的构造函数 #

让构造函数支持传入位置参数，这样创建实例时就能直接初始化x和y，避免后续遗漏赋值：

class Boxes {
  constructor(x, y) {
    this.x = x; // 直接赋值传入的x坐标
    this.y = y; // 直接赋值传入的y坐标
    this.r = 222;
    this.g = 55;
    this.b = 111;
  }
  show() {
    fill(this.r, this.g, this.b);
    rect(this.x, this.y, 50, 50);
  }
}

2. 正确创建并使用对象数组 #

在p5.js的setup()函数里初始化数组，给每个Boxes实例传入具体的位置参数，然后在draw()里遍历数组调用show()：

let boxesArray = [];

function setup() {
  createCanvas(400, 400);
  // 循环创建3个盒子实例，每个盒子的x位置依次错开
  for (let i = 0; i < 3; i++) {
    let newBox = new Boxes(60 + i * 70, 120);
    boxesArray.push(newBox);
  }
}

function draw() {
  background(240);
  // 遍历数组，调用每个盒子的show方法
  for (let box of boxesArray) {
    box.show();
  }
}

3. 排查常见的数组调用错误 #

如果按上面的步骤还是有问题，检查这几点：

• 确认数组里存储的是new Boxes()创建的实例，而不是Boxes类本身
• 遍历数组时，确保每个元素都不是undefined或null（比如检查循环创建实例的代码有没有写错）
• 不要在setup()或draw()之外调用show()，因为p5.js的绘图函数需要依赖已经初始化的canvas

这样调整后，对象数组调用类方法应该就能正常生效啦！

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