Javascript 篮球物理碰撞检测与弹跳物理

我正在做一个篮球物理模拟器。我用一个参数方程来计算球的路径。我很难用篮筐、篮板、杆子和球场（帆布底部）的前部进行碰撞检测。此外，我想让球在击中这些物体时反弹，但我有一个困难的时间。有人能帮我解决这个问题吗

以下是代码片段：

var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
变换（1,0,0，-1,0，canvas.height）
ctx.translate（canvas.width/2，canvas.height/2）；
无功转速=5；
var重力=16；
var=10；
var-mouseX=0；
var-mouseY=0；
var阶段=1；
var x=0；
var y=0；
var xOrgn=0；
var-yOrgn=0；
var xClk=175；
var-yClk=100；
var-mag=0；
var ang=0；
var xVel=0；
var-yVel=0；
var时间=0；
函数{
ctx.beginPath（）；
弧（x，y，12，0，Math.PI*2）；
ctx.fillStyle=“#FF8C00”；
ctx.fill（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.lineWidth=2；
ctx.moveTo（x，y+12）；
ctx.lineTo（x，y-12）；
ctx.strokeStyle=‘黑色’；
ctx.stroke（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.lineWidth=2；
ctx.moveTo（x-12，y）；
ctx.lineTo（x+12，y）；
ctx.strokeStyle=‘黑色’；
ctx.stroke（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.lineWidth=2；
ctx.moveTo（x-8，y-8）；
贝塞尔曲线（x-2，y-4，x-2，y+4，x-8，y+8）；
ctx.strokeStyle=‘黑色’；
ctx.stroke（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.lineWidth=2；
ctx.moveTo（x+8，y-8）；
贝塞尔曲线（x+2，y-4，x+2，y+4，x+8，y+8）；
ctx.strokeStyle=‘黑色’；
ctx.stroke（）；
}
函数drawHoop（）{
ctx.beginPath（）；
ctx.rect（228，-160,12172）；
ctx.fillStyle=“#191919”；
ctx.fill（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.rect（222，-12,6,80）；
ctx.fillStyle=“#666666”；
ctx.fill（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.rect（171，-6,51,6）；
ctx.fillStyle=“#e50000”；
ctx.fill（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.arc（171，-3,3,0，Math.PI*2）；
ctx.fillStyle=“#e50000”；
ctx.fill（）；
ctx.closePath（）；
}
函数drawCursor（）{
ctx.beginPath（）；
ctx.lineWidth=2；
ctx.moveTo（mouseX-12，mouseY）；
ctx.lineTo（鼠标+12，鼠标）；
ctx.strokeStyle='#00cd00'；
ctx.stroke（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.lineWidth=2；
ctx.moveTo（mouseX，mouseY-12）；
ctx.lineTo（mouseX，mouseY+12）；
ctx.strokeStyle='#00cd00'；
ctx.stroke（）；
ctx.closePath（）；
}
函数calcVel（）{
mag=Math.sqrt（（Math.pow（xClk-xOrgn，2）+Math.pow（yClk-yOrgn，2））/4）；
ang=Math.atan（（yClk-yOrgn）/（xClk-xOrgn））；
xVel=mag*Math.cos（ang）；
yVel=mag*Math.sin（ang）；
}
函数绘图（）{
ctx.clearRect（-（canvas.width/2）、-（canvas.height/2）、canvas.width、canvas.height）；
ctx.canvas.addEventListener（'mousemove'，函数（事件）{
mouseX=event.clientX-ctx.canvas.offsetLeft-canvas.width/2；
mouseY=-event.clientY+ctx.canvas.offsetTop+canvas.height/2；
});
牵引杆（）；
拉环（）；
如果（阶段===1）{
x=鼠标；
y=老鼠；
ctx.canvas.addEventListener（'click'，函数（事件）{
xOrgn=x；
yOrgn=y；
阶段=2；
});
}否则如果（阶段===2）{
drawCursor（）；
ctx.canvas.addEventListener（'click'，函数（事件）{
xClk=鼠标；
yclk=老鼠；
calcVel（）；
时间=0；
阶段=3；
});
}否则如果（阶段===3）{
x=xVel*时间+xOrgn；
y=-重力*数学功率（时间，2）+yVel*时间+约伦；
时间=时间+速度*0.01；
}
}
设置间隔（抽签，10）
画布{
背景：白色；
}
您只需在“阶段3”中添加碰撞检测。因为所有东西的位置和大小都是硬编码的，所以逐项添加碰撞检测非常简单。（但是如果你把它弄得更复杂，我会加入一些变量或对象，这样就可以很容易地得到事物作为变量的位置，等等）

当球击中篮板时，我增加了一个水平弹跳和一个垂直弹跳。其他的都是类似的

（注意，使这些成为可能的是迭代更新x和y（以及xVel，yVel），而不是从确定的方程。结果是相同的，但计算和动态行为更容易）


var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
变换（1,0,0，-1,0，canvas.height）
ctx.translate（canvas.width/2，canvas.height/2）；
无功转速=5；
var重力=16；
var=10；
var-mouseX=0；
var-mouseY=0；
var阶段=1；
var x=0；
var y=0；
var xOrgn=0；
var-yOrgn=0；
var xClk=175；
var-yClk=100；
var-mag=0；
var ang=0；
var xVel=0；
var-yVel=0；
var时间=0；
函数{
ctx.beginPath（）；
弧（x，y，12，0，Math.PI*2）；
ctx.fillStyle=“#FF8C00”；
ctx.fill（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.lineWidth=2；
ctx.moveTo（x，y+12）；
ctx.lineTo（x，y-12）；
ctx.strokeStyle=‘黑色’；
ctx.stroke（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.lineWidth=2；
ctx.moveTo（x-12，y）；
ctx.lineTo（x+12，y）；
ctx.strokeStyle=‘黑色’；
ctx.stroke（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.lineWidth=2；
ctx.moveTo（x-8，y-8）；
贝塞尔曲线（x-2，y-4，x-2，y+4，x-8，y+8）；
ctx.strokeStyle=‘黑色’；
ctx.stroke（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.lineWidth=2；
ctx.moveTo（x+8，y-8）；
贝塞尔曲线（x+2，y-4，x+2，y+4，x+8，y+8）；
ctx.strokeStyle=‘黑色’；
ctx.stroke（）；
}
函数drawHoop（）{
ctx.beginPath（）；
ctx.rect（228，-160,12172）；
ctx.fillStyle=“#191919”；
ctx.fill（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.rect（222，-12,6,80）；
ctx.fillStyle=“#666666”；
ctx.fill（）；
ctx.closePath（）；
ctx.beginPath（）；
计算机断层扫描