Javascript 与另一个对象相交时调用操作的循环类的问题

对不起，标题不好

我有一些圆圈，当与鼠标拖动的对象相交时，应该触发一个函数来改变背景颜色。 我想让这些圆（称为球）循环，因为我想有许多相同的圆。因此，我创建了一个类，稍后将其循环。这个对象（称为player）也来自同一个类，我已经设置了x和y位置来跟随鼠标

我的问题是，我不能让所有的球产卵或让它们在相交时都改变背景。我猜它与循环函数有关，但我不知道如何修复它

以下是我当前的代码：

var balls = [];

function setup() {
  createCanvas(400, 400);
  for (var i = 0; i < 5; i++) {
    balls[i] = new ball(random(30, 370), random(30, 370), random(30));
  }
  player = new ball(100, 200, 25);

}

function draw() {
  background(220);

  for (var i = 0; i < 5; i++) {
    if (balls[i].inter(player)) {
      background(200, 0, 0);
    } else {
      background(255, 255, 255);
    }
    balls[i].show();

  }

  player.show();
  player.x = mouseX;
  player.y = mouseY;
}

class ball {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
  }

  show() {
    noFill();
    circle(this.x, this.y, this.r * 2);
  }

  inter(other) {
    var d = dist(this.x, this.y, other.x, other.y);
    if (d < this.r + other.r) {
      return true;
    }
    return false;
  }
}

var-balls=[]；
函数设置（）{
createCanvas（400400）；
对于（变量i=0；i<5；i++）{
球[i]=新球（随机（30370）、随机（30370）、随机（30））；
}
球员=新球（10020025）；
}
函数绘图（）{
背景（220）；
对于（变量i=0；i<5；i++）{
如果（球[i]。国际米兰（球员））{
背景（200,0,0）；
}否则{
背景（255、255、255）；
}
球[i].show（）；
}
player.show（）；
player.x=mouseX；
player.y=mouseY；
}
班级舞会{
构造函数（x，y，r）{
这个.x=x；
这个。y=y；
这个。r=r；
}
show（）{
noFill（）；
圆（这个.x，这个.y，这个.r*2）；
}
内部（其他）{
var d=距离（this.x，this.y，other.x，other.y）；
如果（d

编辑： 解决了！ 问题是if语句中的背景位于其他气泡的顶部，因此它们没有出现

新守则：

 for (var i = 0; i < balls.length; i++) {

     if (balls[i].inter(player)) {
      background(200, 0, 0);

    } 


   }
    for (var i = 0; i < balls.length; i++) {
  balls[i].show();
    }

for（变量i=0；i

什么时候调用draw（）函数？（以及完整性的setup（）函数）。。。那么基本上你的绘制循环在哪里？我不确定我是否理解你，但我有绘制和设置功能