Bonjour, 

Lorsqu'un carré et un rond entrent en collision, ils doivent former un rectangle et le rectangle doit sortir du canvas par la droite. J'ai créé les ronds, les carrés et les rectangles mais je n'arrive pas à mettre en place la collision. Est ce que quelqu'un serait le faire? 

//Mise en place du canvas
var canvas = document.getElementById('c1');
var ctx = c1.getContext('2d');

var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;

function random(min,max) {
    const num = Math.floor(Math.random()*(max-min))+min;
    return num;
}

//Création des ronds orange
class Ball {
    constructor(x, y, velX, velY, color, size) {
        this.x = 450;
        this.y = y;
        this.velX = velX;
        this.velY = 0;
        this.color = 'orange';
        this.size = 15;
    }
  
    draw() {
        ctx.beginPath();
        ctx.fillStyle = 'orange';
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx.fill();
    }

    update() {
        if ((this.x + this.size) >= width) {
           this.velX = -(this.velX);
        }

        if ((this.x - this.size) <= 0) {
            this.velX = -(this.velX);
        }

        if ((this.y + this.size) >= height) {
            this.velY = -(this.velY);
         }
         
        if ((this.y - this.size) <= 0) {
            this.velY = -(this.velY);
        }
  
        this.x += this.velX;
        this.y += this.velY;
    }
}

var balls = [];


while (balls.length < 25) {
    const size = random(15,15);
    let ball = new Ball(
       // ball position always drawn at least one ball width
       // away from the edge of the canvas, to avoid drawing errors
       random(0 + size,width - size),
       random(0 + size,height - size),
       random(-7,7),
       random(-7,7),
       'orange',
       size
    );
    balls.push(ball);
}

//Création des carrés bleus
class Carre {
    constructor(x, y, velX, velY, color, size) {
        this.x = x;
        this.y = y;
        this.velX = 0;
        this.velY = 0;
        this.color = 'blue';
        this.size = 40;
    }
  
    draw() {
        ctx.beginPath();
        ctx.fillStyle = 'blue';
        ctx.fillRect(this.x,this.y,40,40);
        ctx.fill();
    }
}

var carres = [];

while (carres.length < 15) {
    const size = random(10,10);
    let carre = new Carre(
       random(0,width),
       random(0,height),
       random(-10,10),
       random(-10,10),
       'blue',
       size
    );
    carres.push(carre);
}

//Création des rectangles verts
class Rectangle {
    constructor(x, y, velX, velY, color, size) {
        this.x = x;
        this.y = y;
        this.velX = 0;
        this.velY = 0;
        this.color = 'green';
        this.size = size;
    }
  
    draw() {
        ctx.fillStyle = 'green';
        ctx.fillRect(1100, 85, 60, 40);
    }

    update() {
        if ((this.x + this.size) >= width) {
           this.velX = -(this.velX);
        }

        if ((this.x - this.size) <= 0) {
            this.velX = -(this.velX);
        }

        if ((this.y + this.size) >= height) {
            this.velY = -(this.velY);
         }
   
         if ((this.y - this.size) <= 0) {
            this.velY = -(this.velY);
        }
  
        this.x += this.velX;
        this.y += this.velY;
    }

}

var rectangles = [];

while (rectangles.length < 15) {
    const size = random(60,40);
    let rectangle = new Rectangle(
       random(0 + size,width - size),
       random(0 + size,height - size),
       random(-10,10),
       random(-10,10),
       'green',
       size
    );
    rectangles.push(rectangle);
}

function loop() {
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, width , height);

    for(let i=0; i< carres.length; i++){
        carres[i].draw();
    }

    for (let j = 0; j < balls.length; j++) {
        balls[j].draw();
        balls[j].update();

        for (let k=0; k<rectangles.length; k++){
            if(!(this===balls[k])){
                const dx = this.x - carres[k].x ;
                const dy = this.y - carres[k].y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                if (distance<carres[k].size){
                    rectangles[k].color = this.color = 'green';
                }
            }
        rectangles[k].draw();
        rectangles[k].update();
        }

    }
    requestAnimationFrame(loop);
} 
loop();