当乒乓球拍移动时，帆布球弹错了方向

Canvas Ball bounces in wrong direction when pong paddle is moving

本文关键字：错了 方向 帆布 乒乓球拍 移动      更新时间：2023-09-26

我想从一个注释开始。我试着使用jsfiddle，但由于某种原因HTML5画布不起作用。因此，作为一种变通方法，我使用了http://jsbin.com/gugihuwegopa/1/.要使用此网站进行编辑，请单击窗口右上角的编辑按钮。不管怎样，我的问题是，当球拍不动时，球会正确地从四面八方反弹（nomove变量与此无关，它只是用"w"键使其消失）。然而，当我用鼠标将球拍移向球时，它会卡在球拍内。我认为这是因为它没有足够快地更新球拍的位置，以至于球最终进入球拍内部，而我的代码仍然会导致球在里面反弹。（直到快速移开球拍，球拍松开为止）。是的，我试过把cxt.fillRect放在cxt.arc()之前。有时球也会穿过球拍。我想解决这个问题的方法是在我的两个if语句中考虑球的方向：

if(y+ymove>=w && y+ymove<=w+h && x>=s && x<=s+l ) ymove*=-1; //top and bottom
if(x+xmove>=s && x+xmove<=s+l && y+ymove<=w+h && y+ymove>=w ) xmove*=-1; //left and right

我尝试过的其他一些方法包括：

    if(y+ymove>=w && y+ymove<=w+h && x>=s && x<=s+l && centerY+17.5 < y+ymove+5 && centerX+12.5 < x+xmove+5) ymove*=-1; //top and bottom, extra +5 for radius
    if(x+xmove>=s && x+xmove<=s+l && y+ymove<=w+h && y+ymove>=w && centerX+12.5 < x+xmove+5 && centerY+17.5 < y+ymove+5) xmove*=-1; //left and right

所以基本上，无论我如何移动球拍，我都只需要球正确反弹。您可以随意编辑所需内容，即使这意味着要添加更多的if语句。我所要求的绝对不是JQuery。提前谢谢。

为了获得帮助，我建议您对代码进行更友好的处理，删除注释，只保留需要修复的部分。

关于你的问题，你可以做的一件事是使用标志，如果球正在击打球拍，将标志设置为True，进行一次重定向，并停止检查碰撞，直到标志为false。

当然，应该有一个更好的解决方法，但这只是一个开始。

您必须将碰撞处理视为（至少）有两个阶段：碰撞检测和碰撞解决。在这里，你只能通过改变速度来解决碰撞，但如果一个速度很高，两个物体可能仍然会相交：一个物体很可能在另一个物体内部：所以你还必须解决位置问题，或者，如果你喜欢把最轻的物体从最重的物体中"推"出来。可以通过在两个对象的x、y、w、h上使用几个min/max来实现这一点。

或者，还有另一种避免对象重叠的"动态"方法：驱动碰撞处理时间。将碰撞处理拆分为时间子步骤，在每次碰撞时停止。您必须计算下一次碰撞发生的时间，然后将每个人移动到该时间，然后只更新速度，然后再次执行此操作，直到经过足够的时间。因此，甚至不可能发生重叠：碰撞时"停止手表"，然后改变速度，然后重新开始计时。一帧中可能会发生多次碰撞，这种情况无法通过单次传球算法正确处理（当球击中角落附近时）。举个例子：假设你的游戏帧时间，"dt"是16毫秒，现在你在10.2毫秒检测到球击中球拍->你让两个物体移动10.2毫秒（x+=vx*10.2/y…），求解它们的速度（仅），然后你要求碰撞引擎再迭代5.8毫秒。
这是一个小工作，但我在我的游戏引擎中做到了，它工作得很好。

（希望我一直在帮助而不是困惑…：-）

相关文章：