forked from fatiherikli/brainfuck-visualizer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (114 loc) · 4.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<title>Brainfuck Visualizer</title>
<link rel="stylesheet" href="css/screen.css" />
<script type="text/javascript" src="js/lib/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/lib/underscore-min.js"></script>
<script type="text/javascript" src="js/lib/backbone-min.js"></script>
<script type="text/javascript" src="js/interpreter.js"></script>
<script type="text/javascript" src="js/views.js"></script>
<script type="text/javascript" src="js/models.js"></script>
</head>
<body>
<header>
</header>
<div id="interpreter">
<section class="machine">
<ul class="tape">
</ul>
<div class="pointer"><em></em></div>
</section>
<section class="editor">
<div class="actions">
<a class="button" href="#" id="run">Run</a>
<a class="button hidden" href="#" id="stop">Stop</a>
<a class="button hidden" href="#" id="pause">Pause</a>
<a class="button hidden" href="#" id="continue">Continue</a>
<span id="input-box">
<label>Waiting for input</label>
<input type="text" id="input" maxlength="1"/>
</span>
</div>
<div contenteditable="true" id="source">+++++ +++++ initialize counter (cell #0) to 10
[ use loop to set 70/100/30/10
> +++++ ++ add 7 to cell #1
> +++++ +++++ add 10 to cell #2
> +++ add 3 to cell #3
> + add 1 to cell #4
<<<< - decrement counter (cell #0)
]
> ++ . print 'H'
> + . print 'e'
+++++ ++ . print 'l'
. print 'l'
+++ . print 'o'
> ++ . print ' '
<< +++++ +++++ +++++ . print 'W'
> . print 'o'
+++ . print 'r'
----- - . print 'l'
----- --- . print 'd'
> + . print '!'
> . print '\n'</div>
<h3>Output</h3>
<p id="output"></p>
</section>
</div>
<section id="info">
<h3>Quick Reference</h3>
<table>
<tbody>
<tr>
<td style="text-align:center"><code>></code></td>
<td>increment the data pointer (to point to the next cell to the right).</td>
</tr>
<tr>
<td style="text-align:center"><code><</code></td>
<td>decrement the data pointer (to point to the next cell to the left).</td>
</tr>
<tr>
<td style="text-align:center"><code>+</code></td>
<td>increment (increase by one) the byte at the data pointer.</td>
</tr>
<tr>
<td style="text-align:center"><code>-</code></td>
<td>decrement (decrease by one) the byte at the data pointer.</td>
</tr>
<tr>
<td style="text-align:center"><code>.</code></td>
<td>output the byte at the data pointer.</td>
</tr>
<tr>
<td style="text-align:center"><code>,</code></td>
<td>accept one byte of input, storing its value in the byte at the data pointer.</td>
</tr>
<tr>
<td style="text-align:center"><code>[</code></td>
<td>if the byte at the data pointer is zero, then instead of moving the <a href="/wiki/Program_Counter" title="Program Counter" class="mw-redirect">instruction pointer</a> forward to the next command, <a href="/wiki/Branch_(computer_science)" title="Branch (computer science)">jump</a> it <i>forward</i> to the command after the <i>matching</i> <code>]</code> command.</td>
</tr>
<tr>
<td style="text-align:center"><code>]</code></td>
<td>if the byte at the data pointer is nonzero, then instead of moving the instruction pointer forward to the next command, jump it <i>back</i> to the command after the <i>matching</i> <code>[</code> command.</td>
</tr>
</tbody></table>
<p><a href="http://en.wikipedia.org/wiki/Brainfuck">http://en.wikipedia.org/wiki/Brainfuck</a></p>
</section>
<script type="text/javascript">
$(function () {
var cells = _(27).times($.noop);
var tape = new Tape(cells);
var pointer = new Pointer();
new InterpreterView({
editor: $("#source"),
tape: tape,
pointer: pointer
}).render();
});
</script>
<a href="https://github.com/fatiherikli">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"
alt="Fork me on GitHub"></a>
</body>
</html>