new Vue({
  el: '#app',
　data: {
  },
    mounted () {
        this.init()
    this.createWorld()
    this.loop()
    },
    methods: {
        init () {
            this.canvas = document.getElementById('c')
      this.canvas.width = 456
      this.canvas.height = 456
      this.b2Vec2 = Box2D.Common.Math.b2Vec2
        this.b2BodyDef = Box2D.Dynamics.b2BodyDef
        this.b2Body = Box2D.Dynamics.b2Body
        this.b2FixtureDef = Box2D.Dynamics.b2FixtureDef
        this.b2Fixture = Box2D.Dynamics.b2Fixture
        this.b2DistanceJointDef = Box2D.Dynamics.Joints.b2DistanceJointDef
        this.b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef
        this.b2World = Box2D.Dynamics.b2World
        this.b2MassData = Box2D.Collision.Shapes.b2MassData
        this.b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
        this.b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
        this.b2DebugDraw = Box2D.Dynamics.b2DebugDraw
    },
    createWorld() {
      this.world = new this.b2World(new this.b2Vec2(0, 10), true);
      this.debugDraw = new this.b2DebugDraw();
      this.debugDraw.SetSprite(this.canvas.getContext("2d"));
      this.debugDraw.SetDrawScale(200);
      this.debugDraw.SetFillAlpha(0.9);
      this.debugDraw.SetLineThickness(1.0);
      this.debugDraw.SetFlags(this.b2DebugDraw.e_shapeBit | this.b2DebugDraw.e_jointBit);
      this.world.SetDebugDraw(this.debugDraw);
      this.bodyDef = new this.b2BodyDef;
      this.bodyDef.linearDamping = 0.1;
      this.fixDef = new this.b2FixtureDef;
      this.fixDef.restitution = 1;
      this.createWall(0, 0, 2, 0.1);
      this.createWall(0, 0, 0.1, 2);
      this.createWall(2, 0, 0.1, 2);
      this.createWall(0, 2, 2.1, 0.1);
      this.fixDef.shape = new this.b2CircleShape(0.1);  
      this.fixDef.density = 0.4;
      this.fixDef.friction = 0.9;
      this.fixDef.restitution = 0.9;
      this.bodyDef.type = this.b2Body.b2_dynamicBody;
      this.bodyDef.position = new this.b2Vec2(1.5, 1.0);
      this.bodyDef.linearVelocity = new this.b2Vec2(-5.0, -5.0);
      this.world.CreateBody(this.bodyDef).CreateFixture(this.fixDef);
    },
    createWall(x, y, w, h) {
        this.bodyDef.type = this.b2Body.b2_staticBody;
        this.bodyDef.position.x = x + w / 2;
        this.bodyDef.position.y = y + h / 2;
        this.fixDef.shape = new Box2D.Collision.Shapes.b2PolygonShape;
        this.fixDef.shape.SetAsBox(w / 2, h / 2);  
        this.world.CreateBody(this.bodyDef).CreateFixture(this.fixDef);
    },
    loop() {
        this.world.Step(1 / 60, 10, 10);
        this.world.DrawDebugData();
        this.world.ClearForces();
        setTimeout(this.loop, 15);
    },
  }
});