Skip to content

Instantly share code, notes, and snippets.

@andrei-markeev
Last active March 25, 2020 00:28
Show Gist options
  • Save andrei-markeev/a05298ddebf3d1a827b212e1a01db2b6 to your computer and use it in GitHub Desktop.
Save andrei-markeev/a05298ddebf3d1a827b212e1a01db2b6 to your computer and use it in GitHub Desktop.
Mini IDE for learning how to code, Minecraft theme
<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>
@andrei-markeev
Copy link
Author

My son loves Minecraft & Minecraft Hour of Code, so built this live "IDE" to teach him real coding :)

minecraft_

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment