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

Question

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

但是，我一直在寻找一种最佳方法来检测球是击中还是越过球场上的障碍物。我将每个障碍物对象存储在一个数组中。因此很容易访问对象的 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    

       // } 

}

如有任何帮助或提示，我们将不胜感激。如果您需要更多代码或者我不清楚某些事情，请告诉我并更新我的问题。

Answer 1

这叫做碰撞检测。有很多方法可以处理碰撞。取决于物体的形状（它们是圆形、方形还是汽车形）以及发生碰撞时您希望发生什么。球会弹回来吗？它停止了吗？在物体边缘检测到碰撞是否最重要？

您可以阅读 simple collision detection working with either square or circle shaped objects here。

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

How to check if an object is hitting another object during animation.

javascript

canvas

game-physics