如何在动画过程中检查一个对象是否正在撞击另一个对象

您好，感谢您的时间和帮助。我正在使用HTML5画布构建一个迷你高尔夫游戏。我有一个高尔夫球，它能够以特定的力量和方向击球，并相应地停止和减速。

然而，我一直在寻找一种最佳的方法来检测球是击中还是越过球场上的障碍物。我将每个障碍物存储在一个阵列中。因此，很容易访问对象的x、y、高度和宽度。我想最好有一个for循环，通过每个对象来检查球是否在动画中击中了其中的任何一个。此外，高尔夫球的x和y也很容易访问，其值存储在字典中。

有没有测试的建议，看看是否有障碍物被击中？

这是关于我如何测试边界并使球正确反弹的代码

function animateGolfBall(timestamp){
    if(powerBar.widthChange != 0){
        context.clearRect(0, 0, canvasTag.width, canvasTag.height);    
        if (golfBall.x > canvasTag.width - 5 || golfBall.x < 5 ) {
           golfBall.angle = 180 - golfBall.angle;
           updateGolfBall();
           drawEverything();
        } 
        else if (golfBall.y > canvasTag.height - 5 || golfBall.y < 5) {
            golfBall.angle = 360 - golfBall.angle;
            updateGolfBall();
            drawEverything();
        }
        else{
            updateGolfBall();
            drawEverything();
        }
        window.requestAnimationFrame(animateGolfBall);
        powerBar.widthChange -= 1;
    }
    else{
        golfBall.isMoving = false;
        drawEverything();
    }
}

这是重新绘制障碍物的代码，我认为应该在哪里进行检查，看看高尔夫球是否击中了它们

function drawObstacle(){  
    for(var i = 0; i < obsticles.length; i++){
        obsticles[i].createSquare(obsticles[i].squareX/canvasTag.width,
                                  obsticles[i].squareY/canvasTag.height,
                                  obsticles[i].squareWidth/canvasTag.width,
                                  0,
                                  obsticles[i].squareHeight/canvasTag.height,
                                  0,"pink",3,"yellow"); 

       // if { need help with logic here
            //And what to put here, and how ever many logical statements will be needed    
       // } 
}

任何帮助或提示都将不胜感激。如果你需要更多的代码，或者我不清楚什么，请告诉我，我会更新我的问题。