HTML5 Game Development by Example(Second Edition)

Time for action – putting a dynamic box in the world

Carry out the following steps to create our first dynamic body:

1. Open our JavaScript file and add the following box creation code to the page loaded event handler. Place the code after the createGround function:

   // temporary function
   function createBox() {
     var bodyDef = new b2BodyDef;
     var fixDef = new b2FixtureDef;
   
     bodyDef.type = b2Body.b2_dynamicBody;
     bodyDef.position.x = 50/pxPerMeter;
     bodyDef.position.y = 210/pxPerMeter;
   
     fixDef.shape = new b2PolygonShape();
     fixDef.shape.SetAsBox(20/pxPerMeter, 20/pxPerMeter);
   
     var body = carGame.world.CreateBody(bodyDef);
     body.CreateFixture(fixDef);
   
     return body;
   }

2. We need to call our newly created createBox function. Place the following code after we call the ...