plunkerでvue その51

#概要

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

#成果物

以上。