Javascript hmtl5画布是否与多个对象发生冲突？

所以我正在做一个flappy bird克隆作为编码练习。。。现在我到了我必须检测鸟和管道碰撞的部分。 我想知道，考虑到我正在将管道排成一个阵列，你认为如何检测鸟与管道的碰撞是最好的方法

这是代码的主要部分

 //Pipes proto that the bird most avoid
function Pipes(x1, y1, height1, width1, dx1, dy1, x2, y2, height2, 
width2, dx2, dy2) {

this.x1 = x1;
this.y1 = y1;
this.height1 = height1;
this.width1 = width1;
this.dx1 = dx1;
this.dy1 = dy1;

this.x2 = x2;
this.y2 = y2;
this.height2 = height2;
this.width2 = width2;
this.dx2 = dx2;
this.dy2 = dy2;
this.draw = function () {
    c.fillStyle = "green";
    c.fillRect(x1, y1, height1, width1)

    c.fillStyle = "green";
    c.fillRect(x2, y2, height2, width2)
}
this.update = function () {
    x1 += -dx1;
    x2 += -dx2;
    this.draw();
}
}

 function Bird(x, y, dx, dy, radius, color, flap) {
 this.x = x;
 this.y = y;
 this.dx = dx;
 this.dy = dy;
 this.radius = radius;
this.color = color;
this.draw = function () {
    c.beginPath();
    c.arc(x, y, radius, 0, 2 * Math.PI, false);
    c.fillStyle = color;
    c.fill();
};
this.update = function (){
    flap = false;
    x += dx
    //gravity manager
    var gravity = 0.4;
    y += dy
    dy += gravity;

    //Screen collision manager
    if (y + dy > innerHeight) {
        y = innerHeight - radius;
    }
    if(radius < crashObj.x1 || radius < crashObj.x2 || radius < 
     crashObj.x1){
    }
    this.draw()
}
};



//Main GameLoop
function animate() {
c.clearRect(0, 0, innerWidth, innerHeight);
//canvas Color
c.fillStyle = "#C5D3E2";
c.fillRect(0, 0, window.innerWidth, window.innerHeight);

//Updates pipes
for (var i = 0; i < pipesArr.length; i++) {
    pipesArr[i].update();
}
//draw and update bird into the screen
bird.update();

requestAnimationFrame(animate);
}

animate();

//鸟类最回避的管道原型
功能管（x1、y1、高度1、宽度1、dx1、dy1、x2、y2、高度2、，
宽度2，dx2，dy2）{
这是1.x1=x1；
这是1.y1=y1；
this.height1=height1；
该宽度1=宽度1；
这是dx1=dx1；
这1.dy1=dy1；
这是0.x2=x2；
这1.y2=y2；
this.height2=height2；
该宽度2=宽度2；
这是dx2=dx2；
这1.dy2=dy2；
this.draw=函数（）{
c、 fillStyle=“绿色”；
c、 fillRect（x1，y1，高度1，宽度1）
c、 fillStyle=“绿色”；
c、 fillRect（x2，y2，高度2，宽度2）
}
this.update=函数（）{
x1+=-dx1；
x2+=-dx2；
这个.draw（）；
}
}
功能鸟（x、y、dx、dy、半径、颜色、襟翼）{
这个.x=x；
这个。y=y；
this.dx=dx；
this.dy=dy；
这个半径=半径；
这个颜色=颜色；
this.draw=函数（）{
c、 beginPath（）；
c、 圆弧（x，y，半径，0，2*Math.PI，false）；
c、 填充样式=颜色；
c、 填充（）；
};
this.update=函数（）{
flap=false；
x+=dx
//重力管理器
var重力=0.4；
y+=dy
dy+=重力；
//屏幕冲突管理器
如果（y+dy>内部高度）{
y=内部高度-半径；
}
如果（半径

---

提前感谢您的回答

您要查找的是一个圆形-矩形碰撞

，以及

然后在

update

功能中，运行所有

管道

，并检查每个管道是否发生碰撞。例如：

for(var i = 0; i < pipesArr.length; i++){
    ...
    if(RectCircleColliding(bird, pipe)){
        die()
    }
}

for（变量i=0；i