您好,感谢您的时间和帮助。我正在使用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
// }
}
任何帮助或提示都将不胜感激。如果你需要更多的代码,或者我不清楚什么,请告诉我,我会更新我的问题。
这称为碰撞检测。处理碰撞有很多方法。取决于对象的形状(它们是圆形、方形还是汽车形状)以及碰撞发生时希望发生的情况。球弹回来了吗?它停止了吗?在物体的边缘检测到碰撞是最重要的吗?
您可以在这里阅读有关使用方形或圆形对象的简单碰撞检测的信息。