JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://seekpunk.hostei.com/animation.js"></script>
<script src="http://seekpunk.hostei.com/Box2dWeb-2.1.a.3.js"></script>
<script src="http://strd6.com/space_demo/javascripts/jquery.hotkeys.js"></script>
<script src="http://strd6.com/space_demo/javascripts/key_status.js"></script>
<canvas id="b2dCanvas" width="1024" height="500" backgroundColor="2A3038" style="border:1px solid black;background-color:Black"></canvas>
JavaScript
$(document).ready(function () {
var b2Vec2 = Box2D.Common.Math.b2Vec2
, b2AABB = Box2D.Collision.b2AABB
, b2BodyDef = Box2D.Dynamics.b2BodyDef
, b2Body = Box2D.Dynamics.b2Body
, b2FixtureDef = Box2D.Dynamics.b2FixtureDef
, b2Fixture = Box2D.Dynamics.b2Fixture
, b2World = Box2D.Dynamics.b2World
, b2MassData = Box2D.Collision.Shapes.b2MassData
, b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
, b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
, b2DebugDraw = Box2D.Dynamics.b2DebugDraw
, b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef
, b2Shape = Box2D.Collision.Shapes.b2Shape
, b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef
, b2Joint = Box2D.Dynamics.Joints.b2Joint
, b2PrismaticJointDef = Box2D.Dynamics.Joints.b2PrismaticJointDef
, b2ContactListener = Box2D.Dynamics.b2ContactListener
, b2Settings = Box2D.Common.b2Settings
, b2Mat22 = Box2D.Common.Math.b2Mat22
, b2EdgeChainDef = Box2D.Collision.Shapes.b2EdgeChainDef
, b2EdgeShape = Box2D.Collision.Shapes.b2EdgeShape
, b2WorldManifold = Box2D.Collision.b2WorldManifold;
var Physics = window.Physics = function (element, scale) {
var gravity = new b2Vec2(0, 9.8);
this.world = new b2World(gravity, true);
this.element = element;
this.context = element.getContext("2d");
this.scale = scale || 20;
this.dtRemaining = 0;
this.stepAmount = 1 / 60;
};
Physics.prototype.debug = function () {
this.debugDraw = new b2DebugDraw();
this.debugDraw.SetSprite(this.context);
this.debugDraw.SetDrawScale(this.scale);
this.debugDraw.SetFillAlpha(0.3);
this.debugDraw.SetLineThickness(1.0);
this.debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
this.world.SetDebugDraw(this.debugDraw);
};
Physics.prototype.step = function (dt) {
this.dtRemaining...