JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<div id="grid"></div>

CSS

#grid {
    margin: 24px;
    position: relative;
}
#grid div {
    background: #ddd;
    border: 1px solid #fff;
    float: left;
    height: 20px;
    width: 20px;
}
#grid div.first {
    clear: left;
}

JavaScript

var mlms = {};
mlms.dom = {};
mlms.dom.create = function (tag, attributes) {
    var args = arguments,
        el = document.createElement(tag),
        attr,
        i;

    // Add all attributes to the element
    if ((typeof attributes).toLowerCase() === 'string') {
        el.className = attributes;
    } else {
        for (attr in attributes) {
            if (attributes.hasOwnProperty(attr)) {
                el.setAttribute(attr, attributes[attr]);
            }
        }
    }

    // Append child elements and text nodes
    for (i = 2; i < args.length; i++) {
        if ((typeof args[i]).toLowerCase() === 'string') {
            el.appendChild(document.createTextNode(args[i]));
        } else {
            el.appendChild(args[i]);
        }
    }

    return el;
};

function Game() {}

Game.prototype.Map = function (height, width) {
    var grid = document.getElementById('grid');

    function Coord(x, y) {
        this.x = x;
        this.y = y;
    }

    this.height = height;
    this.width = width;
    this.draw = function () {
        var el, i, j, attr;

        for (i = 0; i < this.height; i++) {
            attr = 'first';
            for (j = 0; j < this.width; j++) {
                el = mlms.dom.create('div', attr);
                grid.appendChild(el);
                attr = '';
            }
        }
    };
    this.path = {
        start: new Coord(4, 0),
        path: [new Coord(4, 5), new Coord(8, 5)],
        end: new Coord(8, 16)
    };
};
Game.prototype.init = function () {
    this.map = new this.Map(16, 16);
};

var g = new Game();
g.init();
g.map.draw();