How To Improve Performance With Many Objects In Game In Html5?

What things can I do when it's necessary to show many objects and calculate position, collision detection, reaction, etc. and I want everything look smoothly? Here's an example I'm

Solution 1:

The basic steps to improve performance in canvas can be seen in this HTML5 Rock's Canvas Performance Tutorial.

And, if you are free to handle collision detection without Box2D, check this quad-tree implementation. The quad-tree doesn't deals with collisions directly but can improve performance by reducing the amount of comparisons needed to detect the collisions.

Articles suggestion for further reading:

Broad Phase Collision Detection Using Spatial Partitioning

Collision Detection and Response

Making Games With Box2dWeb

Solution 2:

I see you're using box2d--an excellent and mature physics library. Good choice!

Box2d is fairly well optimized already...and a lot of eyeballs have looked at the code to search for further optimizations.

Therefore (if your design needs permit), your path to improvement is replacing this large library with simpler collision functions.

Check out this set of video tutorials. Ignore the fact it targets processingJS, it still provides a good tutorial on game physics and handling collisions. Skip to the second link if you are already good on physics basics:

Tutorial "home": http://channel9.msdn.com/Series/Sketchbooktutorial

Tutorial chapter on collision of circular objects: http://channel9.msdn.com/Series/Sketchbooktutorial/Simple-Collision-Detection-and-Response