JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Minecraft Tower Defence</h1>
<div id="wrapper">
    <div id="menus" width="640" height="480"></div>
    <div id="canvases">
        <canvas id="background" width="640" height="480">You need to get google chrome to play this game ;D</canvas>
        <canvas id="blocks" width="640" height="480"></canvas>
        <canvas id="entities" width="640" height="480"></canvas>
        <canvas id="hud" width="640" height="480"></canvas>
    </div>
</div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 98%;
    background-color: #000;
    font-family: monospace;
}

h1 {
    margin: 20px auto;
    width: 666px;
    color: #FFF;
    font-size: 36pt;
}

#wrapper {
    margin: 0px auto;
    width: 640px;
    height: 480px;
    background-color: #FFF;
    cursor: url(http://cl.ly/1U2K240G1d0c/cursor.cur), url(http://cl.ly/1U2K240G1d0c/cursor.cur), default;
}

canvas, #menus {
    position: absolute;
    display: block;
}

JavaScript

var hudCanvas = document.getElementById('hud');
var entitiesCanvas = document.getElementById('entities');
var blocksCanvas = document.getElementById('blocks');
var backgroundCanvas = document.getElementById('background');

var hud = hudCanvas.getContext('2d');
var entities = entitiesCanvas.getContext('2d');
var blocks = blocksCanvas.getContext('2d');
var background = backgroundCanvas.getContext('2d');

background.fillStyle = "#000";
background.fillText("LOADING...",0,320);

var loading_loadedBlocks = false;
var loading_loadedGui = false;
var loading_generatedTerrain = false;
var loading_createdEnvironment = false;

var loading = function() {
    var percent = 0;
    if (loading_loadedBlocks) {
        percent++;
    }
    if (loading_loadedGui) {
        percent++;
    }
    if (loading_generatedTerrain) {
        percent++;
    }
    if (loading_createdEnvironment) {
        percent++;
    }
    return (percent / 4) * 100;
};

blocksCanvas.width = backgroundCanvas.width = 320;
blocksCanvas.height = backgroundCanvas.height = 240;
blocksCanvas.style.width = backgroundCanvas.style.width = '640px';
blocksCanvas.style.height = backgroundCanvas.style.height = '480px';

var blockTiles = new Image();
blockTiles.src = 'http://cl.ly/image/3k382g0d3D2l/terrain.png';

var guiTiles = new Image();
guiTiles.src = 'http://cl.ly/image/2b0z38452l3D/gui.png';

var tileSize = 16;
var WidthOffset = (320 - (16 * tileSize)) / 2;
var HeightOffset = (240 - (12 * tileSize)) / 2;

var player = {
    'name': 'Steve',
    'pos': {
        'x': 0,
        'y': 0
    },
    'inv': [1, 2, 3, 0, 4, 5, 6, 8, 7],
    'invSelected': 1
};

var blockIDs = [
    'air',
    'stone',
    'grass',
    'dirt',
    'sand',
    'gravel',
    'plank',
    'cobble',
    'water'
    ];

blockTypes = {
    'air': [-1, -1, 0],
    'stone': [1, 0, 8],
    'grass': [0, 0, 4],
    'dirt': [2, 0, 4],
    'cobble': [0, 1, 8],
    'plank': [4, 0, 6],
    'sand': [2, 1, 4],
    'gravel': [3, 1, 4],
    'water': [13,...