box2djsの作法 その2

# 概要

box2djsの作法、調べてみた。
gameです。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/7f46fcb0-6f42-b7ea-cbe3-d8699404b7c4.png)

# サンプルコード


```
var b2Vec2 = Box2D.Common.Math.b2Vec2,
    b2BodyDef = Box2D.Dynamics.b2BodyDef,
    b2Body = Box2D.Dynamics.b2Body,
    b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
    b2World = Box2D.Dynamics.b2World,
    b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
    b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
    b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef,
    b2DistanceJointDef = Box2D.Dynamics.Joints.b2DistanceJointDef,
    b2RopeJointDef = Box2D.Dynamics.Joints.b2RopeJointDef,
    b2MouseJointDef =  Box2D.Dynamics.Joints.b2MouseJointDef,
    b2DebugDraw = Box2D.Dynamics.b2DebugDraw,
    b2Fixture = Box2D.Dynamics.b2Fixture,
    b2AABB = Box2D.Collision.b2AABB,
    b2MassData = Box2D.Collision.Shapes.b2MassData,
    b2Color = Box2D.Common.b2Color,
    b2PrismaticJointDef = Box2D.Dynamics.Joints.b2PrismaticJointDef;

var canvas = document.getElementById("c");
canvas.width = 456;
canvas.height = 456;
var world = new b2World(new b2Vec2(0, 10), true);
var count = 10;
function wall(angle, x, y, width, height) {
    var box1Def = new b2BodyDef;
    box1Def.type = b2Body.b2_staticBody;
    box1Def.position.Set(x, y);
    var fixDef1 = new b2FixtureDef;
    fixDef1.shape = new b2PolygonShape;
    fixDef1.shape.SetAsBox(width, height);
    var box1 = world.CreateBody(box1Def);
    box1.CreateFixture(fixDef1);
    box1.SetAngle(angle * 3.14 / 180);
    return box1;
}
function pin(x, y, r) {
    var box1Def = new b2BodyDef;
    box1Def.type = b2Body.b2_staticBody;
    box1Def.position.Set(x, y);
    var fixDef1 = new b2FixtureDef;
    fixDef1.shape = new b2CircleShape(r);    
    var box1 = world.CreateBody(box1Def);
    box1.CreateFixture(fixDef1);
    return box1;
}
function tama(x, y, r) {
  var box1Def = new b2BodyDef;
  box1Def.type = b2Body.b2_dynamicBody;
  box1Def.position.Set(x, y);
  var fixDef1 = new b2FixtureDef;
  fixDef1.shape = new b2CircleShape(r); 
  fixDef1.density = 0.09;
	fixDef1.friction = 0.1;
	fixDef1.restitution = 0.9;
  var box1 = world.CreateBody(box1Def);
  box1.CreateFixture(fixDef1);
  return box1;
}
function box(angle, x, y, width, height) {
  var box1Def = new b2BodyDef;
  box1Def.type = b2Body.b2_dynamicBody;
  box1Def.position.Set(x, y);
  var fixDef1 = new b2FixtureDef;
  fixDef1.shape = new b2PolygonShape;
  fixDef1.shape.SetAsBox(width, height);
  fixDef1.density = 0.9;
	fixDef1.friction = 0.1;
	fixDef1.restitution = 0.9;
  var box1 = world.CreateBody(box1Def);
  box1.CreateFixture(fixDef1);
  box1.SetAngle(angle * 3.14 / 180);
  return box1;
}
var w0 = wall(45, 21, 2, 1, 0.1);
var w1 = wall(-45, 2, 3, 1, 0.1);
var w2 = wall(-60, 1, 5, 1, 0.1);
var w3 = wall(-90, 1, 7, 1, 0.1);
var w4 = wall(-45, 17, 14, 1, 0.1);
var w5 = wall(45, 4, 14, 1, 0.1);
var w6 = wall(60, 2, 12, 1, 0.1);
var w8 = wall(-45, 15, 16, 1, 0.1);
var w9 = wall(45, 6, 16, 1, 0.1);
var g0 = wall(90, 8, 19, 1, 0.1);
var g1 = wall(0, 10, 20, 2, 0.1);
var g2 = wall(90, 12, 19, 1, 0.1);
var b0 = pin(14, 8, 1);
var p0 = box(0, 14, 8, 2, 2);
var _revoluteJointDef = new b2RevoluteJointDef();
_revoluteJointDef.Initialize(b0, p0, b0.GetPosition());
_revoluteJointDef.enableMotor = true;
_revoluteJointDef.motorSpeed = -2;
_revoluteJointDef.maxMotorTorque = 100;
_revoluteJointDef.enableLimit = false;
world.CreateJoint(_revoluteJointDef);
function shoot() {
    count--;
    if (count < 0) return;
    //var c = document.getElementById("ball");
    //c.innerHTML = "Ball: " + count;
    var ball = tama(20, 16, 1.0);
    //var p = Math.random() * 1 - 0.5;
    ball.ApplyImpulse(new b2Vec2(0, -10), ball.GetWorldCenter());
}
function onMouseUp(e) {
  //alert("")
  shoot();
}
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite(document.getElementById("c").getContext("2d"));
debugDraw.SetDrawScale(20);  
debugDraw.SetFillAlpha(0.9); 
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);
window.addEventListener("mouseup", onMouseUp, false);
window.setInterval(loop, 1000 / 60);
function loop() {
  world.Step(1 / 60, 10, 10);
  world.DrawDebugData();
  world.ClearForces();
};




```

# 成果物

https://embed.plnkr.co/plunk/YvG5dn8e6QjboSMu


以上。