Why Box2dWeb? Firstly, we are only working with 2-dimensional physics and Box2dWeb is only programmed to simulate physics in a 2-dimensional world. Its constraint system is called joints and it’s easy to set up and use. Even setting up collision detection is relatively simple since you just have to add a listener to that particular object. It is quite fast to execute and as with any programming language, only poor coding can mess that up. The API is very simple; you can always refer the original C/C++ manual or the manual for the Flash port if you find the JavaScript manual lacking. Overall, it’s a feature rich 2-dimensional physics that is supported on all major browsers.

Starting with Simple Scene: We’ll get the body tag out of the way first. It’s just the canvas within which the demo takes place. Now, the very first thing that needs to be done is to set up a world in which all of the actions are to take place. To do this we need to create an instance of b2World which in turn requires you to declare a vector along which the force of gravity will act upon all objects (both free-falling and pivoted) within the canvas. Vectors are defined using the b2Vec2 function, which is a 2D column vector with two elements. <canvas id=”canvas”width=”600” height=”400”>

  new b2Vec2(0,10) //gravity , true );   After downloading the file you can view the source by pressing Ctrl + U. Once, this is done, we’ll add a ground surface. We create objects and define their state using b2BodyDef and then create fixtures using b2Fixtutre and define their physical properties like density, friction, restitution etc. using b2FixtureDef. An entire list of all parameters that can be used if available in the documentation.

fixDef.density = 1.0; fixDef.friction = 0.5; fixDef.restitution = 0.2; var bodyDef = new b2BodyDef;   / /create ground bodyDef.type – b2Body.b2_staticBody; bodyDef.position.x = 9; bodyDef.position.y = 13; fixDef.shape = new b2PolygonShape; fixDef.shape.SetAsBox(10, 0.5); world.CreateBody(bodyDef).CreateFixture(fixDef);   You can use the same definition to create walls and enclosures. Now we’ll add some objects that have random characteristics. We’re going to be adding ten objects and we’ll be randomizing their shape (quadrilaterals or circles). Further on, even the length/ width/ radius will be randomizing along with the co-ordinates where they are to be initialized.   for(var I = 0; I < 10; ++i)    { // creating 10 objects if(Math.random() > 0.5) { // randomizing shape using a condition fixDef.shape = new b2PolygonShape; fixDef.shape.SetAsBox( Math.random() + 0.1 // set width of box ,   Math.random() + 0.1 //set height of box ); } else { fixDef.shape = newb2CircleShape( Math.random() + 0.1 //set radius of circle ); } bodyDef.position.x = Math.random() *10; //initial position x-co-ordinate bodyDef.position.y = Math.random() *10; //initial position y-co-ordinate World.CreateBody(bodyDef).CreateFixture(fixDef); } An optional step is to setup debugdraw, which paints all the objects so you can observe interactions and subsequently debug. You can also mark out the object that is active and non-active using different colors.   The last thing that needs to be done is to update the world whenever actions are performed. These can be user generated actions or actions resulting from incidental collisions of objections in the game world. debugDraw.SetSprite(document.getElementById(“canvas”).getContext(‘2d”)); debugDraw.SetDrawScale(30.0); debugDraw.SetlineThickness(1.0); debugDraw. SetFlag(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit); World.SetDebugDraw(debugDraw); window.setInterval(update, 1000 / 600);   world.Step( 1/60 //frame-rate , 10    // velocity iterations , 10   // position iterations ); world.DrawDebugData(); world.ClearForces(); }; To summarize, we’ve created a world, implemented gravity along a vector. A ground surface was added as a rigid body and then ten random objects were generated that would drop down and collide with the ground. This is the simplest implementation of the JavaScript library and we’d love to see any works that you’ve created using the same library. As created by digit Resources: https://code.google.com/p/box2dweb/ Box2D API Documentation https://box2d.org/manual.pdf Box2D Forum https://box2d.org/forum/ Example Featured in this article https://pastebin.com/0a94fJRW More useful info at gamasutra  raywenderlich  

How to make 2D Physics Games with Box2D - 16How to make 2D Physics Games with Box2D - 3How to make 2D Physics Games with Box2D - 58How to make 2D Physics Games with Box2D - 70