如何在HTML5游戏中提高许多对象的性能？

Question

当需要显示许多物体并计算位置，碰撞检测，反应等时，我可以做些什么？我希望一切看起来都很顺利？这是我正在开发的example。我希望如果我在屏幕上有100个球，我可以顺利地显示它们。但我不知道该怎么做。每个建议都将不胜感激。

Answer 1

我看到你正在使用box2d - 一个优秀且成熟的物理库。不错的选择！

Box2d已经相当优化了......很多眼球都在研究代码以寻找进一步的优化。

因此（如果您的设计需要允许），您的改进之路就是用更简单的碰撞功能替换这个大型库。

查看这组视频教程。忽略它针对processingJS的事实，它仍然提供了一个关于游戏物理和处理碰撞的好教程。如果您已经擅长物理基础知识，请跳至第二个链接：

教程“家”： http://channel9.msdn.com/Series/Sketchbooktutorial

关于圆形物体碰撞的教程章节： http://channel9.msdn.com/Series/Sketchbooktutorial/Simple-Collision-Detection-and-Response

Answer 2

在HTML5 Rock Canvas Performance Tutorial中可以看到提高画布性能的基本步骤。

并且，如果您可以在没有Box2D的情况下自由处理碰撞检测，请检查此quad-tree implementation。四叉树不直接处理碰撞，但可以通过减少检测碰撞所需的比较量来提高性能。

文章建议进一步阅读：

Broad Phase Collision Detection Using Spatial Partitioning

Collision Detection and Response

Making Games With Box2dWeb