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);
    },
  }
});

成果物

以上。