mc.html

## mc.html
<html>
    <head>
        <meta charset="utf8"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.15.2/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.15.2/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.15.2/mode/javascript/javascript.min.js"></script>
    </head>
    <body>
        <canvas width="200" height="240"></canvas>
        <div style="position: absolute; left: 250px; top: 20px; bottom: 0px; right: 0px;">
            <textarea>
var levels = [
    [
        [0, 0, 1, 1, 1],
        [1, 1, 1, 1, 1],
        [2, 2, 2, 1, 1],
        [1, 1, 2, 1, 1],
        [1, 1, 2, 1, 1],
    ],
    [
        [4, 3, 0, 1, 1],
        [0, 0, 0, 0, 1],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0],
    ]
];

var cellsize = 40;

for (var z = 0; z < levels.length; z++)
{
    var map = levels[z];

    var levelOffset = ((levels.length - z) * cellsize / 2);

    for (var y = 0; y < map.length; y++) {
        for (var x = 0; x < map[y].length; x++) {
            draw(x * cellsize, y * cellsize + levelOffset, map[y][x]);
        }
    }

}

            </textarea>
        </div>

        <script>
            var blocks = new Image();
            blocks.src = "https://studio.code.org/blockly/media/skins/craft/images/Blocks.png";
            blocks.onload = function() {

                var aliases = {
                    "grass": 1,
                    "water": 2,
                    "stone": 3,
                    "gold": 4,
                    "brick": 5,
                    "glass": 6,
                }

                var blockPositions = [
                    { x: 166, y: 180 },
                    { x: 440, y: 356 },
                    { x: 167, y: 120 },
                    { x: 160, y: 250 },
                    { x: 0, y: 261 },
                    { x: 80, y: 251 },
                    { x: 40, y: 261 },
                    { x: 207, y: 120 },
                    { x: 247, y: 120 },
                    { x: 287, y: 120 },
                    { x: 327, y: 120 },
                    { x: 367, y: 120 },
                    { x: 407, y: 120 },
                    { x: 206, y: 180 },
                    { x: 246, y: 180 },
                    { x: 286, y: 180 },
                    { x: 326, y: 180 },
                    { x: 366, y: 180 },
                    { x: 406, y: 180 },
                    { x: 446, y: 180 },
                ];

                var canvas = document.querySelector('canvas');
                var context = canvas.getContext('2d');
                var draw = function(x, y, block) {
                    if (isNaN(block))
                        block = aliases[block] || 0;
                    block--;
                    var width = 40;
                    var height = 60;
                    var pos = blockPositions[block];
                    if (pos)
                        context.drawImage(blocks, pos.x, pos.y, width, height, x, y, width, height);
                }
                var editor = CodeMirror.fromTextArea(document.querySelector('textarea'), { lineNumbers: true });
                editor.setSize("auto", "95%")
                editor.on('change', function(cm, changeObj) {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    eval(cm.getValue());
                });
                eval(editor.getValue());

            }
        </script>
    </body>
</html>