JSFiddle - React, Tailwind, and code Playground

by sombriks

HTML

<html>
   <head>
      <title>Box2dWeb Demo</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="http://box2dweb.googlecode.com/svn/trunk/Box2D.js"></script>
   </head>
   <body>
      <canvas id="canvas" width="600" height="400" style="background-color:#333333;" ></canvas>
   </body>
</html>

JavaScript

function CameraManager(cfg) {

    var ctx = cfg.canvas.getContext("2d");

    this.pos = {
        x : 0,
        y : 0
    };

    this.step = function() {
        var v = cfg.player.GetPosition();
        this.pos.x = -v.x * cfg.scale + cfg.canvas.width / 2;
        this.pos.y = -v.y * cfg.scale + cfg.canvas.height / 2;
        ctx.translate(this.pos.x, this.pos.y);
    };
}

/**
 * utilitário para fornecer um meio simples de criar o mundo
 * 
 * @param cfg.world
 *            instância de b2World para fazermos as simulações
 * @param cfg.canvas
 *            elemento DOM de desenho
 * @param cfg.scale
 *            zoom. Tipo isso
 * @param cfg.debug
 *            se devemos ativar o modo de debug de desenho
 * @param cfg.running
 *            se a simulação começa parada ou não
 */
function WorldManager(cfg) {

    function mkFixture(shp, w, h) {
        var fixDef = new b2FixtureDef;
        if (shp == 0) {
            fixDef.shape = new b2CircleShape(w);
        } else if (shp == 1) {
            fixDef.shape = new b2PolygonShape();
            fixDef.shape.SetAsBox(w, h);
        } 
        fixDef.density = 1.0;
        fixDef.friction = 0.1;
        fixDef.restitution = 0.1;
        return fixDef;
    }

    this.makeCircle = function(x, y, r, isDynamic) {
        var fixDef = mkFixture(0, r);
        var bodyDef = new b2BodyDef();
        bodyDef.type = isDynamic ? b2Body.b2_dynamicBody : b2Body.b2_staticBody;
        bodyDef.position.Set(x, y);
        var body = cfg.world.CreateBody(bodyDef);
        body.CreateFixture(fixDef);
        return body;
    };

    this.makeBox = function(x, y, w, h, isDynamic) {
        var fixDef = mkFixture(1, w, h);
        var bodyDef = new b2BodyDef();
        bodyDef.type = isDynamic ? b2Body.b2_dynamicBody : b2Body.b2_staticBody;
        bodyDef.position.Set(x, y);
        var body = cfg.world.CreateBody(bodyDef);
        body.CreateFixture(fixDef);
        return body;
    };

    this.debugEnabled = function(b)...