andrei-markeev/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: 317, y: 276 },
                    { x: 392, y: 476 },
                    { x: 326, y: 336 },
                    { x: 80, y: 980 },
                    { x: 0, y: 803 }
                ];

                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>
	<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: 317, y: 276 },
	{ x: 392, y: 476 },
	{ x: 326, y: 336 },
	{ x: 80, y: 980 },
	{ x: 0, y: 803 }
	];

	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>