JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="800" height="600">
    <p>You're browser does not support the required functionality to play this game.</p>
    <p>Please update to a modern browser such as <a href="www.google.com/chrome/‎">Google Chrome</a> to play.</p>
</canvas>

CSS

/*
    Keep This: #217398
*/

* {
    padding : 0;
    margin  : 0;
}

body{
    background: #eeeeee;
}

canvas {
    background    : black;
    position      : absolute;
    top           : 0; right : 0; bottom : 0; left : 0;
    margin        : auto;
}

JavaScript

var Game = (function () {
    function _init() {
        requestAnimationFrame(update);
    }

    function update() {
        Player.update();

        requestAnimationFrame(draw);
        requestAnimationFrame(update);
    }

    function draw() {
        Canvas.context.clearRect(0, 0, Canvas.width, Canvas.height);
        Player.draw();
    }

    _init();
})();

var Canvas = (function () {
    var element = document.getElementById('canvas');
    var context = element.getContext('2d');

    var width = element.width;
    var height = element.height;

    var bindEvent = function (trigger, action) {
        element.addEventListener(trigger, action);
    };

    return {
        width: width,
        height: height,
        element: element,
        context: context,
        bindEvent: bindEvent
    }
})();

var Player = (function () {
    var width = 50;
    var height = 50;
    var x = 0;
    var y = 0;
    var projectiles = [];

    var update = function () {
        for (var p = 0; p < projectiles.length; p++) {
            if(!projectiles[p].destroyed)projectiles[p].update();
        }
    };

    var draw = function () {
        Canvas.context.fillStyle = 'white';
        Canvas.context.fillRect(x, y, width, height);

        for (var p = 0; p < projectiles.length; p++) {
            if(!projectiles[p].destroyed)projectiles[p].draw();
        }
    };

    Canvas.bindEvent('mousemove', function (e) {
        //x = e.pageX - Canvas.element.getBoundingClientRect().left;
        y = e.pageY - Canvas.element.getBoundingClientRect().top;
    });

    Canvas.bindEvent('click', function () {
        projectiles.push(new Projectile(width, y + (height / 2)));
    });

    return {
        draw: draw,
        update: update
    }
})();

var Projectile = function (x, y) {
    this.w = 10;
    this.h = 10;
    this.x = x;
    this.y = y;
    this.speed = 5;
    this.destroyed = false;

    this.update = function () {
        this.x += this.speed;

        if(this.x >...