JSFiddle - React, Tailwind, and code Playground

by JThomas

HTML

<canvas width="600" height="500"></canvas>

CSS

canvas{
    border: 2px solid #000;
}

JavaScript

(function(ns){
    ns.Game = function(gameWindow){
        var canvas = gameWindow,
            ctx = canvas.getContext('2d'),
            fps = 30,
            entites = [],
            _loop = 'undefined';
        
        
        function start(ctx) {
            this.ctx = ctx;
            
            this._loop = window.setInterval(this.render, 1000 / fps);
        }
        
        function render() {
            this._update();
            this._draw();
        }
        
        function _update() {
            for(var i=this.entites.length, e; e = entities[--i];){
                e.update();
            }
        }
                
        function _draw() {
            for(var i=this.entites.length, e; e = entities[--i];){
                e.draw(ctx);
            }
        }
        
        return {
            canvas: canvas,
            fps: fps,
            entities: entities,
            start: start,
            pause: pause,
        };
    };
    console.log(new Game);
}(window));