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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
My son loves Minecraft & Minecraft Hour of Code, so built this live "IDE" to teach him real coding :)