Javascript 需要帮助使一个对象从另一个对象上反弹吗

我需要做一个程序，有一个球在屏幕上移动，当它击中矩形时，它需要反弹离开它。我已经有球反弹时，它击中画布两侧，但我不知道如何使它反弹的矩形使用函数

我试着用另一个“如果”来表示它是否击中这个区域反弹，但如果我这样做，我会出错，球根本不会移动

我正在使用代码笔这里是链接。我习惯于用评论来让它更容易阅读

以下是我到目前为止的情况：`

//变量
设circleX=40
让circleY=40
设velocityX=5
设velocityY=5
//矩形函数
函数矩形（颜色、大小、大小）{
填充（颜色）
设r=rect（300550，sizeX，sizeY）
}
函数设置（）{
//制作帆布
createCanvas（800600）
}
函数绘图（）{
//将backgound设置为黑色
背景（0）
//造球
圆圈（circleX，circleY，40）
//使球在“X”和“Y”轴上旋转，使其移动
//无论何时需要，都要双向
//让球从向下移动开始，使其垂直反弹
circleY=circleY+velocityY
circleX=circleX+velocityX
//让它调用函数来添加矩形
矩形（#ff0000），400,20）
//做出“如果”的陈述，这样每当球碰到画布的边缘时，它就会反弹到画布上的其他地方
如果（圆圈>高度）{
速度y=-5
}
如果（circleY==0）{
速度y=5
}
else if（圆圈>宽度）{
速度x=-5
}
else if（圈<0）{
速度x=5
}
}

---

为矩形添加位置坐标：

设rectX=200，rectY=550

函数矩形（颜色、posX、posY、sizeX、sizeY）{
填充（颜色）
rect（posX、posY、sizeX、sizeY）
}

矩形（#ff0000），矩形，矩形，400，20） 如果圆的底部低于矩形的顶部，且圆的中心位于矩形的let和右侧之间，则必须更改球的“反弹”和y方向：

rectTop      = rectY;
rectLeft     = rectX;
rectRight    = rectX + 400;
circleBottom = circleY + 20
if (circleBottom > rectTop && circleX >= rectLeft && circleX <= rectRight ) {
    velocityY= -5
}

rectTop=rectY；
rectlift=rectX；
rectRight=rectX+400；
圆圈底部=圆圈+20
如果（circleBottom>rectTop&&circleX>=rectLeft&&circleX rectTop&&circleX>=rectLeft&&circleX高度）{
速度y=-5
}
如果（circleY==0）{
速度y=5
}
else if（圆圈>宽度）{
速度x=-5
}
else if（圈<0）{
速度x=5
}
}

---

非常感谢拉比！