Button押したら動くObject生成¶

ButtonをHTMLに追加¶

<div>
  <canvas id="canvas" width="800px" height="600px" style="border:1px solid red;"></canvas>
</div>
<div>
  <button id="btn1">円形</button>
  <button id="btn2">四角形</button>
</div>

x座標をランダムで設定するための関数¶

function randInt(maxValue) {
  return 0|(Math.random() * maxValue);
}

「円形」クリックボタンのイベントを追加¶

$('#btn1').click(function() {
  var circleRadius = 40;
  createCircle(world,
               circleRadius + randInt(worldWidth - 2 * circleRadius),
               -circleRadius,
               circleRadius);
});

「四角形」クリックボタンのイベントを追加¶

$('#btn2').click(function() {
  var boxLength = 80;
  createBox(world,
            boxLenght / 2.0 + randInt(worldWidth - boxLength),
            -boxLength,
            boxLength,
            boxLength);
});

Demo¶

Demo

全文（HTML&JavaScript）¶

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Box2DWeb Demo</title>
</head>
<body>
  <div>
    <canvas id="canvas" width="800px" height="600px" style="border:1px solid red;"></canvas>
  </div>
  <div>
    <button id="btn1">円形</button>
    <button id="btn2">四角形</button>
  </div>
  <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/Box2dWeb-2.1.a.3.min.js"></script>
  <script type="text/javascript" src="js/main.js"></script>
  <script type="text/javascript">
  <!--
    start();
  //--></script>
</body>
</html>

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 createCircle(world, x, y, r) {
  var bodyDef = new b2.BodyDef;
  bodyDef.type = b2.Body.b2_dynamicBody;

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

  // 円形オブジェクトの設置
  bodyDef.position.x = x / worldScale;
  bodyDef.position.y = y / worldScale;
  world.CreateBody(bodyDef).CreateFixture(fixDef);
}

function createBox(world, x, y, w, h) {
  var bodyDef = new b2.BodyDef;
  bodyDef.type = b2.Body.b2_dynamicBody;

  var halfWidth = w / 2.0;
  var halfHeight = h / 2.0;

  // オブジェクトの設定
  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(halfWidth / worldScale, halfHeight / worldScale );
  bodyDef.position.Set(x / worldScale, y / worldScale );
  world.CreateBody(bodyDef).CreateFixture(fixDef);
}

function randInt(maxValue) {
  return 0|(Math.random() * maxValue);
}

$('#btn1').click(function() {
  var circleRadius = 40;
  createCircle(world,
               circleRadius + randInt(worldWidth - 2 * circleRadius),
               -circleRadius,
               circleRadius);
});

$('#btn2').click(function() {
  var boxLength = 80;
  createBox(world,
            boxLength / 2.0 + randInt(worldWidth - boxLength),
            -boxLength,
            boxLength,
            boxLength);
});

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

function init() {
  createFloor(world);
  for (i = 0; i < 10; i++) {
    //createCircle(world, i*80+40, i*40, 40);
    createBox(world, i*80+40, i*40, 79, 79);
  }
  world.SetDebugDraw(getDebugDraw());
}

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