JSFiddle - React, Tailwind, and code Playground

by intrinsica

HTML

<canvas id="_p"></canvas>

JavaScript

// this code was autogenerated from PJS
(function($p) {

    function setup() {
        $p.size(600, 800);
        $p.frameRate(30);
    }
    $p.setup = setup;
    setup = setup.bind($p);
    var c = $p.loadImage("http://i.imgur.com/cXaR0vS.png"),
        b = $p.loadImage("http://i.imgur.com/mw0ai3K.png");
    var w = $p.loadImage("http://i.imgur.com/4SUsUuc.png"),
        m = $p.loadImage("http://i.imgur.com/U6KEwxe.png");
    var r = 0,
        s = 0,
        d = 1,
        x = 0,
        y = 400,
        vy = 0,
        wx = [0, 0],
        wy = [0, 0],
        e = 1800,
        l = 600,
        hs = 0,
        v = 800;

    function draw() {
        for (var t = 0, q = 1; t <= e; t += e, q = 1) for ($p.imageMode(1); q > 0; q--, $p.imageMode(3)) $p.image(c, x + t, 0);
        for (var i = 0, z = y += vy += 1, q = (x = x - 6 == -1800 ? 0 : x - 6); i < 2; i++, $p.fill(0), $p.textSize(40), $p.image(b, l / 2, y)) {
            for (var j = -1; j < 2; j += 2, $p.text("" + s, l / 2 - 15, 700)) $p.image(w, wx[i], wy[i] + j * (w.height / 2 + 100));
            if ((wx[i] = wx[i] < 0 ? (wy[i] = $p.__int_cast($p.random(200, v - 200))) / wy[i] * l : wx[i] - 6) == l / 2 && d == 0) hs = $p.max(++s, hs);
            d = ($p.abs($p.width / 2 - wx[i]) < 25 && $p.abs(y - wy[i]) > 100) || y > $p.height || y < 0 ? 1 : d;
        }
        if (d == (r = 1)) for ($p.imageMode(1); r > 0; r--, $p.rectMode(3), $p.text("HighScore: " + hs, 50, l)) $p.image(m, 0, 0);
    }
    $p.draw = draw;
    draw = draw.bind($p);

    function mousePressed() {
        if (d == (vy = -15) / -15) y = (wx[1] = 900) + 100 - ((wy[0] = (wy[1] = wx[0] = 600) - 200) + 200 + (x = s = d = 0));
    }
    $p.mousePressed = mousePressed;
    mousePressed = mousePressed.bind($p);
setup();
})(new Processing(_p));