physics.createWorld = function() {
  var gravity = new b2Vec2(0, 9.8);
  this.world = new b2World(gravity, /*allow sleep= */ true);

  // create two temoporary bodies
  var bodyDef = new b2BodyDef;
  var fixDef = new b2FixtureDef;

  bodyDef.type = b2Body.b2_staticBody;
  bodyDef.position.x = 100/pxPerMeter;


A Ball-shooting Machine with Physics Engine

258

  bodyDef.position.y = 100/pxPerMeter;

  fixDef.shape = new b2PolygonShape();
  fixDef.shape.SetAsBox(20/pxPerMeter, 20/pxPerMeter);

  this.world.CreateBody(bodyDef).CreateFixture(fixDef);

  bodyDef.type = b2Body.b2_dynamicBody;
  bodyDef.position.x = 200/pxPerMeter;
  bodyDef.position.y = 100/pxPerMeter;

  this.world.CreateBody(bodyDef).CreateFixture(fixDef);
  // end of temporary code
}
5. The update method is the game loop's tick event for the physics engine.
It calculates the world step and refreshes debug draw. The world step
upgrades the physics world. We'll discuss it later:
physics.update = function() {
  this.world.Step(1/60, 10, 10);
  if (shouldDrawDebug) {
    this.world.DrawDebugData();
  }
  this.world.ClearForces();
};
6. Before we can refresh the debug draw, we need to set it up. We pass a canvas
reference to the Box2D debug draw instance and configure the drawing settings:
physics.showDebugDraw = function() {
  shouldDrawDebug = true;

  //set up debug draw
  var debugDraw = new b2DebugDraw();
  debugDraw.SetSprite(document.getElementById("debug-canvas").
getContext("2d"));
  debugDraw.SetDrawScale(pxPerMeter);
  debugDraw.SetFillAlpha(0.3);
  debugDraw.SetLineThickness(1.0);
  debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_
jointBit);
  this.world.SetDebugDraw(debugDraw);
};