JSFiddle - React, Tailwind, and code Playground

by Nathan Piper

HTML

<canvas id='player' height=400 width=500 style='border: 1px solid black'></canvas>
<canvas id='background' height=400 width=500 style='border: 1px solid black'></canvas>
<canvas id='enemy' height=400 width=500 style='border: 1px solid black'></canvas>
<canvas id='GUI' height=400 width=500 style='border: 1px solid black'></canvas>

CSS

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

var FPS = 60;
var width = 500;
var height = 400;
var gpLayer = document.getElementById('player').getContext('2d');
var gbackground = document.getElementById('background').getContext('2d');
var genemy = document.getElementById('enemy').getContext('2d');
var gGUI = document.getElementById('GUI').getContext('2d');

var x = width + 20;
var y = (height / 2) - 20;

gplayer.fillRect(111, 111, 20, 20);

var player = {
    x: width + 20,
    y: (height / 2) - 20,
    width: 20,
    height: 20,
    render: function () {
     
    },
    tick: function () {}

};

    function render() {
        player.render();
    }

    function tick() {
        player.render();
    }

setInterval(function () {
    render();
    tick();
}, 1000 / FPS);