Html5 Canvas 2d Frameworks Focusing On Collision Detection And Physics

I am looking for the best way to manage objects within the canvas context. For my first project I am looking to do the following: Draw the ground. Drop a circle onto the ground wi

Solution 1:

If you're trying to build a tank game (weapons that destroy ground), you're best bet is to not actually track the location of what is/is not ground since you're going to end up with absurd shapes. Instead, use a canvas and the image of the ground itself as that object. Canvas has methods to get a pixel color at a specific point that you can use to check "is there ground here". Your explosion would then simply erase part of the canvas and you'd run a loop to make any floating ground "fall"

If you do this, I'd suggest putting the ground itself in a separate canvas element from any other elements so that you can have effects/units/etc on top of the ground without interfering with your collision detection.

Solution 2:

what you need is the Javascript 2D Game Engine which can be found here http://www.lukewallin.co.uk/?go=engine Here's a demo: http://www.lukewallin.co.uk/singleplayer_games/sandbox4/sandbox.php?id=21 It even has explosions :)

Solution 3:

I would have a look into the box2d port for javascript to use with html5's canvas element. I've used it for flash in the past and it is a solid engine. It will do all the collision and physics for you so all you would have to do is listen for the callbacks and change the image accordingly.