Box2dの初期化を書こう

worldを初期化

// Globalで使えるパラメータ
var worldHeight = 600;
var worldWidth = 800;
var worldScale = 30.0;

var world = new b2.World(
  new b2.Vec2(0, 9.8), // 重力方向
  true                 // Sleepの可否
);

run関数内にworld.Step関数を呼び出す

function run() {
  world.Step(1 / 60.0, 10, 10);
  world.DrawDebugData();
  world.ClearForces();
}

worldのDebug表示を設定

function getDebugDraw() {
  var debugDraw = new b2.DebugDraw();
  debugDraw.SetSprite(document.getElementById('canvas').getContext('2d'));
  debugDraw.SetDrawScale(worldScale);
  debugDraw.SetFillAlpha(0.5);
  debugDraw.SetLineThickness(1.0);
  debugDraw.SetFlags(b2.DebugDraw.e_shapeBit);
  return debugDraw;
}

worldに床の追加

function createFloor(world) {
  var bodyDef = new b2.BodyDef;
  bodyDef.type = b2.Body.b2_staticBody;

  // オブジェクトの設定
  var fixDef = new b2.FixtureDef;
  fixDef.density = 1.0;     // 密度
  fixDef.friction = 0.5;    // 摩擦係数
  fixDef.restitution = 0.4; // 反発係数

  // 床の設置
  fixDef.shape = new b2.PolygonShape;
  fixDef.shape.SetAsBox(worldWidth / worldScale, 2.0 / worldScale );
  bodyDef.position.Set(0, (worldHeight - 2) / worldScale);
  world.CreateBody(bodyDef).CreateFixture(fixDef);
}

追加した関数をinit関数に追加

function init() {
  createFloor(world);
  world.SetDrawDebug(getDrawDebug());
}

Demo

Demo

全文（JavaScript）

var b2 = {
    Vec2          : Box2D.Common.Math.b2Vec2
  , AABB          : Box2D.Collision.b2AABB
  , BodyDef       : Box2D.Dynamics.b2BodyDef
  , Body          : Box2D.Dynamics.b2Body
  , FixtureDef    : Box2D.Dynamics.b2FixtureDef
  , Fixture       : Box2D.Dynamics.b2Fixture
  , World         : Box2D.Dynamics.b2World
  , MassData      : Box2D.Collision.Shapes.b2MassData
  , PolygonShape  : Box2D.Collision.Shapes.b2PolygonShape
  , CircleShape   : Box2D.Collision.Shapes.b2CircleShape
  , DebugDraw     : Box2D.Dynamics.b2DebugDraw
  , MouseJointDef : Box2D.Dynamics.Joints.b2MouseJointDef
};

var world = new b2.World(
    new b2.Vec2(0, 9.8), // 重力方向
    true                 // Sleepの可否
);

var worldHeight = 600;
var worldWidth = 800;
var worldScale = 30.0;

function getDebugDraw() {
  var debugDraw = new b2.DebugDraw();
  debugDraw.SetSprite(document.getElementById('canvas').getContext('2d'));
  debugDraw.SetDrawScale(worldScale);
  debugDraw.SetFillAlpha(0.5);
  debugDraw.SetLineThickness(1.0);
  debugDraw.SetFlags(b2.DebugDraw.e_shapeBit);
  return debugDraw;
}


function createFloor(world) {
  var bodyDef = new b2.BodyDef;
  bodyDef.type = b2.Body.b2_staticBody;

  // オブジェクトの設定
  var fixDef = new b2.FixtureDef;
  fixDef.density = 1.0;     // 密度
  fixDef.friction = 0.5;    // 摩擦係数
  fixDef.restitution = 0.4; // 反発係数

  // 床の設置
  fixDef.shape = new b2.PolygonShape;
  fixDef.shape.SetAsBox(worldWidth / worldScale, 2.0 / worldScale );
  bodyDef.position.Set(0, (worldHeight - 2) / worldScale);
  world.CreateBody(bodyDef).CreateFixture(fixDef);
}

function run() {
  world.Step(1 / 60.0, 10, 10);
  world.DrawDebugData();
  world.ClearForces();
}

function init() {
  createFloor(world);
  world.SetDebugDraw(getDebugDraw());
}

function start() {
  init();
  window.setInterval(run, 1000 / 60.0);
}