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。

如何在动画期间检查对象是否正在击中另一个对象。

1 个答案: