bf

Simple js Brainfuck interpreter \ debugger

by Kirill

HTML

<div id="wrapper">
	<textarea id="source">,[.,] #code here</textarea>
	<button id="execute">execute</button>
	<div id="result">Output here</div>
</div>
<div id="memory"></div>

CSS

#wrapper {
	width: 300px;
	float: left;
	margin-right: 10px;
}
#source, #result, #memory {
	padding: 2px;
	width: 300px;
	height: 200px;
}
#memory {
	float: left;
	overflow: auto;
}
button { 
	float: right;
}
#result {
	font-family: monospace;
	border: 1px solid #a9a9a9;
	clear: both;
}

JavaScript

document.getElementById("execute").addEventListener("click", execute, false);
function execute () {
    var prog = document.getElementById("source").value;
	var begin = prog.match(/\[/g) ? prog.match(/\[/g).length : 0;
	var end = prog.match(/\]/g) ? prog.match(/\]/g).length: 0;
	var err = (begin>end) ? "Close bracket missing" : (end>begin) ? "Open bracket missing" : "";
	if(err) return display(err);
	var mem = new Array(30000);
	var loop = [];
	var p = 0;
	var out = "";
	for (var i = 0;i < mem.length;i++) mem[i] = 0;
	for (var i=0;i<prog.length;i++) {
		if (prog[i]=="+") mem[p] = (mem[p]<255) ? mem[p]+1 : 0;
		else if (prog[i]=="-") mem[p] = (mem[p]>0) ? mem[p]-1 : 255;
		else if (prog[i]==">") p = (p<29999) ? p+1 : 0;
		else if (prog[i]=="<") p = (p>0) ? p-1 : 29999;
		else if (prog[i]==".") out+=String.fromCharCode(mem[p]);
		else if (prog[i]==",") {
			var inp = prompt("Enter value");
			mem[p] = (inp!=null) ? ((0 <= inp.charCodeAt(0) <= 255) ? inp.charCodeAt(0) : 0) : 0;
		}
		else if (prog[i]=="[") {
			if (mem[p]==0) {
				var end = 1;
				while (end) {
					i++;
					if (prog[i]=="]") end--;
					else if (prog[i]=="[") end++;
				}
			}
			else loop.push(i);
		}
		else if (prog[i]=="]") {i = loop.pop()-1;}
	}

	display (out, mem, p);
}
function display (out,mem,p) {
	document.getElementById("result").innerHTML = out;
	for (var i=mem.length-1;i>-1;i--) {
		if (mem[i]==0 && i!=p) mem.pop();
		else break;
	}
	for (var i=0;i<mem.length;i++) {
		if (i==p) mem[i]="(" + mem[i] + ")";
	}
	document.getElementById("memory").innerHTML = "Memory state: <br>" + mem + "<br> Pointer position: <br>" + p;
}