P5 js collision of classes ALL HELP WELCOME πŸ™

i am trying to make the class whitecell eat the bloodscells can anyone help me with this I have tried everything but noting works I am obligated to use oop but if this Is to hard to do i will just use functions , all i really want right now is to make it work

ty so much for giving this a try

let MAX_NUM = 50;
let circles = [];


class Circle {
    constructor(x, y, ) {
        this.x = x;
        this.y = y;
        this.speedX = random(-15, 15);
        this.speedY = random(-14, 14);
        this.width = 20;
        this.color = color(random(255), random(20), random(20), 100);
    }
    checkBoundary() {
        if (this.x < 0) {
            this.x = 0;
            this.speedX *= -1;
        }
        if (this.x > width) {
            this.x = width;
            this.speedX *= -1;
        }
        if (this.y < 0) {
            this.y = 0;
            this.speedY *= -1;
        }
        if (this.y > height) {
            this.y = height;
            this.speedY *= -1;
        }
    }
    update() {
        this.x += this.speedX;
        this.y += this.speedY;
    }

    display() {
        push();
        fill(this.color);
        ellipse(this.x, this.y, this.width, this.width);
        pop();
    }

    boem() {
        if (this.x > width / 2) {
            this.speedX = (this.x - width / 2) / (height / 2 - this.y);
        } else {
            this.speedX = -(this.x - width / 2) / (height / 2 - this.y);
        }

        if (this.y > width / 2) {
            this.speedY = -(height / 2 - this.y) / (height / 2 - this.y);
        } else {
            this.speedY = (height / 2 - this.y) / (height / 2 - this.y);
        }
    }
}
class WhiteCell {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = 50;
    }

    verschijn() {
        fill('white')
        circle(this.x, this.y, this.size);
    }
    moveLinks() {
        this.x -= 5;
    }
    moveRechts() {
        this.x += 5;
    }
    moveUp() {
        this.y -= 5;
    }
    moveDown() {
        this.y += 5;
    }
}

let teller = 0;
let witte;

function setup() {
    createCanvas(800, 800);
    background(0);
    noStroke();
    witte = new WhiteCell(400, 600);
}

function draw() {
    background(0, 50);
    for (let i = 0; i < circles.length; i++) {
        circles[i].checkBoundary();
        circles[i].update();
        circles[i].display();

        if (teller === 20) {
            circles.splice(1)
            background('darkred')
            teller = 0;
        }
    }

    fill('gray')
    rect(10, 10, 780, 20)
    fill('red');
    rect(10, 10, 39 * teller, 20);
    fill('white')
    textSize(10)
    text("POWERBAR", 15, 25)
    fill('white')
    textSize(20);
    text('PRESS R TO USE POWER', 10, 60)
    text('FILL THE BAR BY CLICKING ON THE SCREEN TO CENTER THE CELLS AND LET THEM IMPLODE', 10, 100, 780);
    text('USE ARROWS TO MOVE THE BLOODCELL', 10, 200)



    witte.verschijn();
    if (keyIsDown(RIGHT_ARROW)) {
        witte.moveRechts();
    }
    if (keyIsDown(DOWN_ARROW)) {
        witte.moveDown();
    }
    if (keyIsDown(UP_ARROW)) {
        witte.moveUp()
    }
    if (keyIsDown(LEFT_ARROW)) {
        witte.moveLinks();
    }
    let hit = circleCircle(witte.x,witte.y, witte.size, circles.forEach(element => element.x), circles.forEach(element => element.y), circles.forEach(element => element.width));
   
    if (hit) {
        console.log("bump")
    }
    else {
        console.log("nobump")
    }
}

function mousePressed() {
    if (circles.length < MAX_NUM) {
        for (let i = 0; i < 5; i++) {
            circles.push(new Circle(mouseX, mouseY));

        }
    } else {
        circles.forEach(item => item.boem());
        teller += 1;
    }
}

function keyPressed() {
    if (key === "r") {
        for (let i = 0; i < circles.length; i++) {

            circles[i].speedX = random(-2, 2) * teller;
            circles[i].speedY = random(-2, 2) * teller;

        }
        teller = 0;
    }
}

function keyIsDown() {
    if (keyCode === LEFT_ARROW) {
        witte.moveLinks();
    }
    if (keyCode === UP_ARROW) {
        witte.moveUp();
    }
    if (keyCode === DOWN_ARROW) {
        witte.moveDown();
    }
    if (keyCode === RIGHT_ARROW) {
        witte.moveRechts();
    }
}
function circleCircle(x1, y1, s1, x2, y2, s2){
    var distX = x1 - x2;
    var distY = y1 - y2;
    var distance = sqrt((distX*distX) + (distY*distY));

    if (distance <= s1+s2) {
        return true;
    }
    return false;
}

Hi,

What doesn’t actually work? Can you be more precise about what you want to do?

Are you trying to convert a code that wasn’t using classes to a code that uses them?