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

您好，感谢您的宝贵时间和帮助。我正在使用HTML 5 Canvas构建迷你高尔夫游戏。我有一个高尔夫球，可以用特定的力量和方向击打它，并相应地停止和减速。

但是，我一直坚持寻找一种检测球是否击中或越过障碍物的最佳方法。我将每个障碍物存储在一个数组中。因此，很容易访问对象的x，y，height和width。我当时认为最好有一个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    

       // } 

}

任何帮助或提示将不胜感激。如果您需要更多代码，或者我对某些内容不清楚，请让我知道，请及时更新我的​​问题。