box2djsの作法 その5

# 概要

box2djsの作法、調べてみた。
ドミノ倒しやってみた。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/ff41fe6f-b2c1-95f7-2997-fedf18a996ad.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 TWO_PI = 6.283185307179586;
var _prismaticJointDef = new b2PrismaticJointDef();

function createrect(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 createdomi(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.6;
	fixDef1.restitution = 0.2;
    var box1 = world.CreateBody(box1Def);
    box1.CreateFixture(fixDef1);
    box1.SetAngle(angle * 3.14 / 180);
    return box1;
}
function createcircle(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 = 5.9;
	fixDef1.friction = 0.5;
	fixDef1.restitution = 0.2;
    var box1 = world.CreateBody(box1Def);
    box1.CreateFixture(fixDef1);
    return box1;
}
var cube = createrect(0, 0, 10, 1, 1);
var ball = createcircle(1, 10, 1);
var domi0 = createdomi(0, 7, 10, 0.1, 2);
var domi1 = createdomi(0, 9, 10, 0.1, 2);
var domi2 = createdomi(0, 11, 10, 0.1, 2);
var domi3 = createdomi(0, 13, 10, 0.1, 2);
var domi4 = createdomi(0, 15, 10, 0.1, 2);
var domi5 = createdomi(0, 17, 10, 0.1, 2);
var domi6 = createdomi(0, 19, 10, 0.1, 2);
var domi7 = createdomi(0, 21, 10, 0.1, 2);
var gd = createrect(0, 0, 12, 30, 0.2);
_prismaticJointDef.Initialize(ball, cube, cube.GetWorldCenter(), new b2Vec2(1, 0));
_prismaticJointDef.enableMotor = true;
_prismaticJointDef.motorSpeed = -10;
_prismaticJointDef.maxMotorForce = 5;
_prismaticJointDef.lowerTranslation = -5;
_prismaticJointDef.upperTranslation = 10;
_prismaticJointDef.enableLimit = true;
_prismaticJointDef.collideConnected = true;
world.CreateJoint(_prismaticJointDef);
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.setInterval(loop, 1000 / 60);
function loop() {
    world.Step(1 / 60, 10, 10);
    world.DrawDebugData();
    world.ClearForces();
};




```

# 成果物

https://embed.plnkr.co/plunk/8rfbvzCpAjhzpUrQ


以上。