如何在p5.js中正确向数组添加对象？我的代码执行异常无响应

我帮你找到了两个核心问题，正是它们导致了屏幕空白和无响应的情况：

1. addMCS方法的对象字面量语法错误 #

你在push时写的{this.x,this.y,this.s,this.color,this.mouseOver}是无效的对象语法——这种简写只有在变量名和键名完全一致时才能用，而且需要明确的键值映射。更关键的是，你本来就有一个完整的mouseCircle实例，直接把当前实例thispush进数组就好，没必要重新构造一个新对象。

2. draw()循环里重复创建实例+调用addMCS导致内存爆炸 #

draw()函数是p5.js的主渲染循环，每帧（通常60次/秒）都会执行一次。你现在在每次循环里都重新创建mc1，还调用addMCS把新实例塞进数组——这会让mcs数组在几秒内就积累成千上万的对象，直接拖垮浏览器，导致屏幕空白、控制台无响应。

修正后的完整代码 #

var mcs = [];

function mouseCircle(x,y,s,color){ 
    this.x = x;
    this.y = y;
    this.s = s;
    this.color = color;
    this.mouseOver = false;
}

mouseCircle.prototype.mouseCollision = function(){
    if(dist(this.x, this.y, mouseX, mouseY) <= this.s/2){
        this.mouseOver = true;
    } else {
        this.mouseOver = false;
    }
};

// 修正addMCS方法：直接push当前实例
mouseCircle.prototype.addMCS = function(){
    // 先判断数组里有没有当前实例，避免重复添加
    if(!mcs.includes(this)){
        mcs.push(this);
    }
};

mouseCircle.prototype.Display = function(){
    if(this.mouseOver) {
        fill(this.color);
    } else {
        fill(255,255,255);
    }
    ellipse(this.x,this.y,this.s,this.s);
};

function setup() {
    createCanvas(1000,650);
    // 把实例创建移到setup里，只执行一次
    mc1 = new mouseCircle(275,450,50,'green');
    mc1.addMCS(); // 只添加一次到数组
}

var mc1;
var mc2;
var mc3;
var mc2Color;

function draw() {
    background(200,200,200);
    
    // 只在draw里执行碰撞检测和渲染
    mc1.mouseCollision();
    mc1.Display();
    
    // 可以打印数组长度看看，不会再无限增长了
    console.log('数组长度：', mcs.length);
    console.log('第一个实例：', mcs[0]);

    /* 如果你要添加更多实例，也放到setup里
    mc2Color = color(0,0,255);
    mc2 = new mouseCircle(375,450,50,mc2Color);
    mc2.addMCS();
    mc3 = new mouseCircle(275,350,50,color(255,0,0));
    mc3.addMCS();
    mc4 = new mouseCircle(375,350,50,'yellow');
    mc4.addMCS();
    */

    // 如果要渲染所有数组里的实例，可以循环遍历
    // mcs.forEach(function(mc){
    //     mc.mouseCollision();
    //     mc.Display();
    // });
}

额外说明 #

• 所有实例的创建都应该放在setup()里，因为setup()只在程序启动时执行一次，避免重复创建导致的内存问题。
• 如果你需要批量渲染数组里的所有mouseCircle实例，可以用forEach循环遍历mcs数组，像代码注释里那样写。
• 修正后的addMCS里加了!mcs.includes(this)的判断，防止同一个实例被重复添加到数组里。

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