javascript - HTML5 Canvas 物理

Question

您好，我有以下 Canvas 应用程序:http://dev.driz.co.uk/canvas/

正如您将看到的，它渲染了一堆球。我遇到的问题是当应用程序首次启动时，球被 Canvas 边缘切断。他们不应该这样做，如果他们触摸它，他们应该从 Canvas 边缘弹开!

我很难理清物理原理，如果您移动鼠标它们会反弹，但如果在启动时则不会。

谢谢

Answer 1

您可以检查一下，如果有任何球被切断(它伸出墙外)，则只需将其重新定位在墙上，或者将球沿它应该移动的方向移动到离墙很远的地方。

因此，如果球距离墙 3 个像素，那么您可以将它定位在距离墙 3 个像素的新方向上。

这会有所帮助，因为如果您的时间段太短，并且球移动得太快，您可以修复它。

更新:

查看您的代码后，出于某种原因我看不到它在 Chrome 中移动，也没有在 Firefox 4b7 上绘制，但是通过查看您的代码，这一行可能是一个问题:

Balls[i].x += Balls[i].vx;

如果x + vx < 0那么它仍然会在墙的左边。

它可以关闭的原因是你有这个代码:Balls[i].vx *= 0.99; , 将继续减少 vx在你做检查之前。在进行调整后，您可能希望将其放在最后。

此外，您在同一个 if 语句 block 中同时拥有左右墙的代码，我希望它们应该分开处理。

要解决此问题，最好的办法是使用 Firebug，在 Firefox 上，用一个球，当它越过一堵墙时放置一个 break 语句，然后查看每个步骤中的值是什么。

当您调整时，您还假设球沿直线运动，因为您只在一个方向上进行校正，具体取决于哪个方向 if声明失败，尽管在 Angular 落的情况下，两者都失败是可能的。那是你的物理模型的失败，如果我以 45 度 Angular 前进并且撞到了墙，我应该以 45 度 Angular 反弹，例如，如果墙是理想的。

学习使用调试器，Chrome、IE 和 Firefox 都有不错的调试器，但我倾向于使用 Firebug，也许是因为使用它的经验。