We will set up the Box2D library. We must carry out the following steps to prepare our project:
First, let's set up our game project. Create a folder with the following file structure. The HTML file contains an HTML template with empty content and includes all the scripts and style files. You may find the full document's source in the code bundle. Please also download the Box2D source file into the
jsfolder.
In the HTML body, we must define a canvas, as follows:
<canvas id="game" width="1300" height="600"></canvas>
We must then alias several Box2D classes that we will use in our game; this makes it easier to refer them in the code:
// Box2D alias var b2Vec2 = Box2D.Common.Math.b2Vec2 , b2BodyDef = Box2D.Dynamics.b2BodyDef , b2Body = Box2D.Dynamics.b2Body , b2FixtureDef = Box2D.Dynamics.b2FixtureDef , b2World = Box2D.Dynamics.b2World , b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape , b2CircleShape = Box2D.Collision...