JSFiddle - React, Tailwind, and code Playground

by Chad Neff

HTML

<div id='gamearea'></div>
<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAuCAYAAABwF6rfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdBJREFUeNpi/P//P8NAACYNF6wW/7uxh5Eu9jOMUMAy0A5QXvwSTH/cyI2SEmgd86MxPtBAMus3mOYyfIi1DKB2ChiN8cEC+C35UPL+i3oBmuT90RgfaPDt6S8UPpc0G5hWmvMNTD+f9puqMT9yYxxXC4reABbDH49/gqQANHFql/ojNsYZGdWd/yOXogMV0zAAi3FcpT16mXA3Vpystv5ojMNiHD0G6F2q/370g6h6Hh3cS+EC01/vsRMV86Mxzq30E6XepLQeJhUQiml0wCrHgTWFPp/GCqbfrOHBG/MjN8ZhIzCwelGu9SHevETtGCc1ponN+7Da4VG1PNZSfzTGYTFObl4f6BgnVN/DenmwUn80xuGlHTTmdfe9H5IxTqi+v+wkONofx5rHhyqA1e+48vhofxxdQDj5BZTFN6Q8MlqP07utTmlpT27pjh7To211YvO4ROMHKIu6/XFi+/ffiIx5XL2y0f44uaU6pf1qclMEfJQVR4yjx/TomBulpfpAAfSxPlwzKrhKbVJjejSP02vNCUaI45jBwVULEFs/j8Y4qaX6YAG4Rk5G58eHW4wT6lVRrYwZjfEBBohSW54mMTwa47CW2+ha1hEGAAIMAKgy/gRDLmdpAAAAAElFTkSuQmCC' id='arrow' style='visibility:hidden' />
<img id='longArrow' style='visibility:hidden'...

JavaScript

(function () {

    var worldSize = new Phaser.Point(640, 480);

    var preload = function () {
        var arrow = document.getElementById('arrow');
        var longArrow = document.getElementById('longArrow');
        this.game.cache.addImage('arrow', arrow.url, arrow);
        this.game.cache.addImage('longArrow', longArrow.url, longArrow);
    };
    var trueRender;
    var render = function () {
        trueRender.call(this);
    };

    var create = function () {
        var game = this.game;
        var cursorKeys = game.input.keyboard.createCursorKeys();
        var arrow = game.add.sprite(worldSize.x, 20, 'arrow');
        var longArrow = game.add.sprite(worldSize.x, 20, 'longArrow');
        var graphics = game.add.graphics(0, 0);
        graphics.lineStyle(2, 0xff0000, 1);
        var nextDraw = 100;
        game.physics.arcade.enable(arrow);
        longArrow.rotation = -3.82;
        longArrow.anchor.setTo(0.5, 0.5);

        arrow.rotation = -3.82;
        arrow.anchor.setTo(0.5, 0.5);
        arrow.accelerationSpeed = 800;
        arrow.maxSpeed = 250;
        arrow.body.maxVelocity.setTo(arrow.maxSpeed, arrow.maxSpeed);
        nextDraw = game.time.now + 300;
        arrow.update = function () {
            if (game.time.now > nextDraw) {
                graphics.drawCircle(arrow.position.x, arrow.position.y, 2);
            }
            if (cursorKeys.up.isDown) {
                game.physics.arcade.accelerationFromRotation(this.rotation, this.accelerationSpeed, this.body.acceleration);
            } else if (cursorKeys.left.isDown) {
                if (arrow.body.velocity.getMagnitude() <= arrow.maxSpeed) {
                    game.physics.arcade.accelerationFromRotation(this.rotation, this.accelerationSpeed, this.body.acceleration);
                } else {
                    this.body.acceleration.setTo(0, 0);
                }
            } else {
                this.body.acceleration.setTo(0, 0);
            }
        };
       ...