问p5js移动圆碰撞检测

EN

// Declare objects
let bubble1;
let bubble2;
let bubble3;
let bubble4;
var centDistance;

function setup() {
  createCanvas(windowWidth, windowHeight);
  ellipseMode(CENTER);

  // Create objects
  bubble1 = new Bubble(50, 0, 2);
  bubble2 = new Bubble(50, 2, 0);
  bubble3 = new Bubble(50, -2, 0);
  bubble4 = new Bubble(50, 0, -2);

}

function draw() {
  background(0); 
 
  bubble1.display();
  bubble2.display();
  bubble1.move();
  bubble2.move();
  bubble3.display();
  bubble3.move();
  bubble4.display();
  bubble4.move();

  var d = dist(bubble1.x, bubble1.y, bubble2.x, bubble2.y);
  if (d < bubble1.r+bubble2.r) {
    bubble1.changeCol();
    bubble2.changeCol();
  }

} 

class Bubble {
    constructor(r, xSpeed, ySpeed) {
        this.x = width/2; 
        this.y = height/2;
        this.r = r;
        this.xSpeed = xSpeed;
        this.ySpeed = ySpeed; 
        this.fillColor = color(255);

        this.move = function () {
            if (this.x>width/2+200 || this.x<width/2-200) {
                this.xSpeed = -this.xSpeed;
            }
            if (this.y>height/2+200 || this.y<height/2-200) {
                this.ySpeed = -this.ySpeed;
            }
            this.x += this.xSpeed;
            this.y += this.ySpeed;
        }

        this.display = function() {
            fill(this.fillColor);
            stroke(255);
            ellipse(this.x, this.y, 2*this.r);
        }

        this.changeCol = function () {
            this.fillColor = color(0);
        }
    }
}