A Ball-shooting Machine with Physics Engine - HTML5 Game Development - page 252

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 ick 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 conigure the drawing seings:
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);
};