如何检测碰撞答案

【问题标题】：How to detect collision如何检测碰撞
【发布时间】：2014-06-09 07:27:28
【问题描述】：

我正在根据本教程做一个小游戏http://code.tutsplus.com/tutorials/learn-createjs-by-building-an-html5-pong-game--active-11845

我做了修改，但这条线有问题

if(ball.x <= player.x + 22 && ball.x > player.x && ball.y >= player.y && ball.y < player.y + 75)

每当用户从左侧或右侧快速击球时，即使在教程中，球也会不断弹跳，错误就在那里，有人可以帮我解决这个问题吗？

谢谢

【问题讨论】：

不太清楚我是否理解问题所在 - 是不是因为球员错过了球而在不应该的时候反弹？
如果您尝试教程中的演示，当您从边缘击球时，它会弹跳多次，看起来像是被卡住了
您的代码行将正确确定球是否在球员桨内。但是，如果球跑得足够快，它会在您测试碰撞之前穿过并超越桨。
@markE 是的，这是怎么回事，有什么办法可以解决吗？
看到这篇文章stackoverflow.com/questions/4230029/…

标签： javascript jquery canvas createjs

【解决方案1】：

我认为最简单的解决方案是为球添加一个方向变量并对其进行测试。如果它是针对玩家的，请执行您编码的检查，否则忽略。如果检查通过，则在玩家拦截它时改变方向。然后当它反弹回来时，再次改变方向。这也将大大简化您的代码并减少正在进行的检查次数。

【讨论】：

【解决方案2】：

我已经为您的问题找到了正确的解决方案

您应该再添加一个条件 xSpeed<0，以便您的 if 语句更改为如下所示

if(xSpeed<0 && ball.x <= player.x + 22 && ball.x > player.x && ball.y >= player.y && ball.y < player.y + 75 )
{
    xSpeed *= -1;
    SoundJS.play('hit');
}

我在测试代码后给了你这个解决方案。

【讨论】：

【解决方案3】：

我认为这是因为球由于某种原因进得太远了，它会多次运行*= -1;。

所以你应该测量距离并把它带回来然后*= -1

代码是这样的：

if(ball.x <= player.x + 22 && ball.x > player.x && ball.y >= player.y && ball.y < player.y + 75)
{   
    ball.x += ball.x-player.x;
    xSpeed *= -1;
    SoundJS.play('hit');
}

这样我们就可以确保球在杆内时出局。

** 从您发布的链接中编辑的代码。

【讨论】：

【解决方案4】：

在 2D 中检测碰撞有两种主要方法：

逐像素。仅当您具有复杂形状时才应使用此方法，因为此算法具有 O(Height*Width) 复杂度，其中 Height 和 Width 是较小精灵的大小（以像素为单位）。
按公式。如果可能，您应该始终使用此方法。这通常会导致 O(1) 复杂度。

我认为，在你的情况下，球是圆形（显然），玩家是矩形。

回答问题“如何通过公式检查矩形和圆形是否相交？”已回答here。

【讨论】：

【解决方案5】：

嗯，如果问题是“太快”的球会进入桨内，你有三个选择：

用数学进行碰撞测试，即。计算在当前时间步长期间球是否会通过桨划一条线。
使时间步长更小，即以更小的增量移动球并在每一步进行碰撞检查。
使时间步长具有适应性，因此当物体变得更快时它会变小，并且球在每个时间步长的移动量大致相同，而不管它的速度如何。

【讨论】：