Javascript-форум - Befunge был… Попробуем это в Canvas

Eсли Befunge использует ASCII-символы, то я попробовал сделать собственный эзотерический язык с использованием HTML5-Canvas с цветными операциями…
CodePen/jsFiddle

После загрузки страницы выбирете «File->Demo» для запуска демонстрации…
Правым кликом можно вызвать меню выбора цвета.
Каждый цвет ассоциируется со своей операцией:

blacK: Keen - Следовать дальше
Red: Register - Занести регистры в стек
Orange: Obscure - Отверстие перехода на другую сторону
Yellow: Yield - Уступить ячейку (перепрыгнуть одну ячейку)
Green: Gate - Порт
Cyan: Call - Вызов подпрограммы
Blue: Branch - Ветвление
Magenta: Mathematic - Выполнить вычислительные действия над регистрами в стеке
White: When - Условное выполнение
Silver/Grey - Конец

На поле можно рисовать горизонтальные и вертикальные линии.
Черчение диагональных линиий запрещено и определяет регион выделения, который можно перемещать, копировать («Edit->Copy») и переносить («Edit->Cut»)…

P.S.: Естественно, код пока очень сырой, имеет много багов и отсутствие задуманного функционала…
Видео Демонстрации

[map:"Номер №1"]
0123456789
0246897531
1357986420
[/map]
[map:"Номер №2"]
1470369258
0369258147
2581470369
[/map]

:) :stop: :dance: :no: :write: :-/ :help: :-? :p :( :haha: :agree: :yes: :lol: :cray: :thanks: ;) :nono: :blink: :D :-E :victory:

<head>
<script>
var	szPage	= "https://javascript.ru/forum/project/74942-befunge-byl%E2%80%A6-poprobuem-ehto-v-canvas.html";
var	hXML	= new XMLHttpRequest();
var	hSelect	= null;
var	hSecret	= null;
var	hCanvas	= null;
var	hCtx	= null;
var	aMaps	= {};

function GetUp() {
	var	html;
	var	res	= [];
	hXML.open("GET", szPage, false);
	hXML.send();
	if(200 != hXML.status) {
		alert(hXML.status + ": " + hXML.statusText);
	} else {
		hSecret.innerHTML = hXML.responseText;
		hPosts = hSecret.querySelector("#posts").querySelectorAll("table[id^=post]");
		hPosts.forEach
		(function(hPost) {
			hRows = hPost.rows;
			hThread = hPost.querySelector(".thread-row");
			hUserLink = hRows[1].querySelector(".bigusername");
			hUserPost = hRows[2].querySelector("div[id^=post_message_]");
			nick = hUserLink.textContent;
			post = hUserPost.textContent;
			pics = hUserPost.querySelectorAll("img");
			//rank = hUserLink
			maps = post.match(/(\[map:"(.+)"]([^\0]+?)\[\/map])+/gm);
			if(maps)
				maps
				.forEach
				(function(map) {
					console.log(map);
					mp = map.match(/(\[map:"(.+)"]([^\0]+)\[\/map])+/m);
					console.log(mp);
					if(mp) {
						place = mp[2];
						design = mp[3];
						if(!(nick in aMaps))
							aMaps[nick] = [];
						aMaps[nick][place] = {
							design	:design,
							images	:pics
						};
						hSelect.add(new Option(nick + ":" + place, place), null);
						res.push("«" + nick + "»:" + place + "\r\n" + design);
					}
				});
//			res.push("«" + nick + "»\r\n" + hUserPost.post);
		});
	}
}

function showMap(el) {
	var	info = el.selectedOptions[0].textContent.split(/:/);
	var	nick = info[0];
	var	place = info[1];
	var	map = aMaps[nick][place];
	var	y = 0;
	//
	hCtx.clearRect(0, 0, hCanvas.width, hCanvas.height);
	//
	map
	.design.split(/\r?\n/)
	.forEach
	(function(plot) {
		var	x = 0;
		while(plot.length) {
			var	c = plot.charAt(0);
			if(isFinite(c) && map.images.length > +c)
				hCtx.drawImage(map.images[c], x * 24, y * 24);
			plot = plot.substr(1);
			++ x;
		}
		++ y;
	});
}

function main() {
	hSecret = document.createElement("html");
	hSelect = document.querySelector("select");
	hCanvas = document.querySelector("canvas");
	hCtx = hCanvas.getContext("2d");
	GetUp();
	setTimeout("showMap(hSelect)", 1000);
}
</script>
</head>
<body onload='main()'>
<select onchange='showMap(this)'></select><br/>
<canvas width=640px height=480px></canvas>
</body>
</html>