JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<canvas id="grid" width="500" height="500"></canvas>

JavaScript

var canvas = document.getElementById("grid");
    var context = canvas.getContext("2d");
    var tile = new Image();
    var cursorImg = new Image();
    cursorImg.src = "http://www.sebissimos.com/imgs/rmt_icon.png";
    var game = function(document) {
        this.document = document;
        this.grid = {};
        this.cursor = {
            spriteImg: cursorImg,
            x: 0,
            y: 0,
            cellx: 2,
            celly: 2
        };
        this.tile = function(idx, idy, x, y, type) {
            this.idx = idx;
            this.idy = idy;
            this.x = x;
            this.y = y;
            this.sprite = new Image();
            if (type === "dirt") {
                this.walkable = true;
                this.sprite.src = 'http://vignette1.wikia.nocookie.net/tibia/images/0/0b/Dirt_%28Light%29.gif/revision/latest?cb=20091024213053&path-prefix=en';
            }
            if (type === "rock") {
                this.walkable = false;
                this.sprite.src = 'http://christessmer.com/sprites/tiles/grey_rock_tile.png';
            }
        };
        this.map = [
            ["rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock"],
            ["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
            ["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
            ["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
            ["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
            ["rock", "rock", "dirt", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "dirt", "rock", "rock"],
            ["rock", "dirt",...