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]
<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>
