plunkerでvue その52

概要

plunkerでvueやってみた。
box2dwebやってみた。
エレベーター書いてみた。

写真

サンプルコード

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(7);
      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.elevator = [];
      var i;
      this.createrect(0, 485, 0, 10, 550);
      this.createrect(10, 50, 420, 320, 10);
      for (i = 0; i < 7; i++)
      {
        this.elevator.push(this.createele(0, 420, i * 80 + 120, 50, 10));
      }
      for (i = 0; i < 7; i++)
      {
        this.createcircle(40 + i, 110, 12);
      }
    },
    createrect(angle, x, y, width, height) {
      var box1Def = new this.b2BodyDef;
      box1Def.type = this.b2Body.b2_staticBody;
      box1Def.position.Set(x / 10, y / 10);
      var fixDef1 = new this.b2FixtureDef;
      fixDef1.shape = new Box2D.Collision.Shapes.b2PolygonShape;
      fixDef1.shape.SetAsBox(width / 10, height / 10);
      var box1 = this.world.CreateBody(box1Def);
      box1.CreateFixture(fixDef1);
      box1.SetAngle(angle * 3.14 / 180);
    },
    createcircle(x, y, r) {
      var box1Def = new this.b2BodyDef;
      box1Def.type = this.b2Body.b2_dynamicBody;
      box1Def.position.Set(x / 10, y / 10);
      var fixDef1 = new this.b2FixtureDef;
      fixDef1.shape = new this.b2CircleShape(r / 10);
      fixDef1.density = 0.01;
        fixDef1.friction = 1.5;
        fixDef1.restitution = 0.2;
      var box1 = this.world.CreateBody(box1Def);
      box1.CreateFixture(fixDef1);
    },
    createele(angle, x, y, width, height) {
      var box1Def = new this.b2BodyDef;
      box1Def.type = this.b2Body.b2_dynamicBody;
      box1Def.position.Set(x / 10, y / 10);
      var fixDef1 = new this.b2FixtureDef;
      fixDef1.shape = new Box2D.Collision.Shapes.b2PolygonShape;
      fixDef1.shape.SetAsBox(width / 10, height / 10);
      var box1 = this.world.CreateBody(box1Def);
      box1.CreateFixture(fixDef1);
      box1.SetAngle(angle * 3.14 / 180);
      return box1;
    },
    loop() {
      var i;
      for (i = 0; i < 7; i++)
        {
            var body = this.elevator[i];
        var p = body.GetPosition();
          body.SetLinearVelocity(new this.b2Vec2(0, -1));        
            if (p.y <  50 / 10)
        {
          body.SetAngle(-10 * 3.14 / 180);
        }
        if (p.y < -5 / 10)
            {
                body.SetAngle(0 * 3.14 / 180);
                body.SetPosition(new this.b2Vec2(p.x, 550 / 10));
            }        
        }
      this.world.Step(1 / 60, 10, 10);
      this.world.DrawDebugData();
      this.world.ClearForces();
      setTimeout(this.loop, 15);
    },

  }
});

成果物

以上。