JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://rawgit.com/craftyjs/Crafty/release/dist/crafty-min.js"></script>
<div id="game"></div>

JavaScript

$(document).ready(function () {
            var gWidth = window.innerWidth;
            var gHeight = window.innerHeight;
            $("#game, canvas").css({width: gWidth, height: gHeight});
            
            Crafty.init(gWidth, gHeight, document.getElementById('game'));
            Crafty.multitouch(true);
            
            Crafty.c("Circle", {
                init: function (radius, color) {
                    this.requires("2D, Canvas");
                    this.bind("Draw", this._draw_me);
                    this.ready = true;
                }
                , _draw_me: function (e) {
                    var ctx = e.ctx;
                    ctx.beginPath();
                    ctx.fillStyle = this.color;
                    ctx.arc(e.pos._x + this.radius, e.pos._y + this.radius, this.radius, 0, Math.PI * 2);
                    ctx.closePath();
                    ctx.fill();
                }
            });
            
            
            var myCircle = Crafty.e("2D, Canvas, Color, Circle, Collision").attr({
                x: gWidth/2
                , y: gHeight/2
                , w: 0.04*gHeight
                , h: 0.04*gHeight
                , radius: 0.02*gHeight
                , color: 'brown'
                , xDirection: 0.005*gWidth
                , yDirection: 0.005*gHeight
            }).bind("EnterFrame", function (eventData) {
                this.x += this.xDirection;
                this.y += this.yDirection;
                if (this.x < 0) this.xDirection *= -1;
                if (this.y < 0) this.yDirection *= -1;
                if (this.x > (0.96*gWidth)) this.xDirection *= -1;
                if (this.y > (0.96*gHeight)) this.yDirection *= -1;
            });     
        });