-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
192 lines (148 loc) · 9.46 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="SegmentDisplay/segment-display.js"></script>
<script src="simulator.js"></script>
<script src="kim1.js"></script>
<title>Kim1 Emulator</title>
<style>
.led { background-color: black; color: red; font-family: sans; font-size: 24pt; height: 75px; padding: 0px; text-align: right }
#kim { margin-left: auto; margin-right: auto; background: #FFFFFF url(kim1.jpg) bottom right no-repeat; border: 2px solid black; width: 800px; height: 600px; background-position: -70px -495px }
#io { width:260px; margin-left: 500px; margin-top:60px; height: 510px; }
#kb { margin-top: 58px; margin-left: 47px; }
#kb input[type=button] { width: 36px; height: 36px; color: white; background-color: black;margin-right: 7px; margin-bottom: 12px }
tr, td { height: 25px; }
.switch { width: 40px; height: 36px; padding-left: 5px; margin-right:10px}
#mem{ float:left; position: relative; left: 120px; background-color: #ccc; opacity: 0.9; top:80px }
Canvas { margin-left: 10px; }
#toolkit {
float:left;
position: relative;
left: 0px;
background-color: #fff;
top:0px;
z-index: 100;
width: 200px;
display:none;
}
#readme { display: none; }
</style>
<script>
$(function(){
$('#doclink').click(function(){
if ($('#readme').is(':visible')){
$(this).html('Show Readme');
$('#readme').hide();
}else{
$(this).html('Hide Readme');
$('#readme').show();
}
})});
</script>
</head>
<div style="background-color: #ccc; border: 1px solid black; margin-bottom: 20px; padding: 10px;">
<h2>The Amazing JavaScript Kim1!</h2>
<a id="doclink" href="#">Show Readme</a>
<div id="readme" class="blob instapaper_body">
<article class="markdown-body entry-content" itemprop="mainContentOfPage"><h1>
<a name="js-kim1" class="anchor" href="#js-kim1"><span class="octicon octicon-link"></span></a>JS Kim1</h1>
<p>This is a somewhat functional Kim1 simluator running in HTML5/JS. This allows you to write and execute 6502 machine code in the most inefficient way possible. It's quite a bit of fun.</p>
<p>You can view a live demo at <a href="http://www.robsayers.com/jskim1/">http://www.robsayers.com/jskim1/</a></p>
<h2>
<a name="how-to-use-this" class="anchor" href="#how-to-use-this"><span class="octicon octicon-link"></span></a>How to use this?</h2>
<p>I recommend reading <a href="/rsayers/jskim1/blob/master/The%20First%20Book%20of%20Kim">http://users.telenet.be/kim1-6502/6502/fbok.html</a>, a pretty good book on the device that should get you familiar with its operation. Feel free to ignore the section on setting vectors. A lot of machine specific functions do not yet work, so interupts and IO specific things in particular do not work. Any generic 6502 code I have entered has run fine however. </p>
<p>To get started you will first press "RS" (reset) which will give you a fresh start. Then hit "AD" (address) and enter the address where you want your first instruction to go. Once this is entered, hit "DA" (data) and enter the 8 bit value for that location. Hitting "+" will advance you to the next location, but still in data mode, so you can simply enter your next instruction or operand. The basic example from the book simply lets you swap values in two memory locations. </p>
<pre><code>0200 A5 10 START LDA 10 address 10 to A
0202 A6 11 LDX 11 address 11 to x
0204 85 11 STA 11 A to address 11
0206 86 10 STX 10 X to address 10
0208 00 BRK stop the program
</code></pre>
<p>Using the first line as an example: the 0200 is the memory location we will use, A5 is our instruction... in assembly it means LDA, or "Load the A register with the value found at a specific address, and 10 is the memory address we want to read the value of". The columns after that are simply the assembly langauge in human readable format.</p>
<p>So to run this program you would start the simulator, then type the following:</p>
<pre><code>[RS]
[AD] 0 2 0 0 [DA] A5 [+] 10 [+]
A6 [+] 11 [+]
85 [+] 11 [+]
86 [+] 10 [+]
00
</code></pre>
<p>And your program will be ready... but first we need to put some data in locations 10 and 11. So then we type:</p>
<pre><code>[AD] 0 0 1 0
[DA] 22 [+] 33
</code></pre>
<p>And that stores the hex values 22 and 33 in those locations.</p>
<p>Now type [AD] 0 2 0 0, and then hit [GO]</p>
<p>Once this is done, the display should show "0208 00" which is where the program halted. Now use your [AD] button to view locations 0010 and 0011 again, the values should be reversed.</p>
<h2>
<a name="what-good-is-this" class="anchor" href="#what-good-is-this"><span class="octicon octicon-link"></span></a>What good is this?</h2>
<p>I actually built this in an attempt to win fame and fortune in the <a href="http://www.retrochallenge.org">Retrochallenge</a> contest. That said, I think it's a neat tool to see that there's even a lower langauge than assembly. It also helps you understand how much work your assembler does for you. LDA $01, LDA $0001, and LDA #$01 are all different instructions inside the CPU, despite the fact we give one name to all of them.</p>
<h2>
<a name="what-is-left-to-do" class="anchor" href="#what-is-left-to-do"><span class="octicon octicon-link"></span></a>What is left to do?</h2>
<p>Unfortunately very few machine specific functions work, on a real device, hitting a button triggers an interrupt so you can actually enter input while a program is running and do something with it. Also, each segment of each digit is independently controllable which lets you do some neat things. None of those things work in the simulator however. The entore stock ROM is loaded up, but I doubt many of the subroutines would have much effect since no real hardware is emulated correctly.</p>
<p>The one machine specific feature that does work is the register storage buffer, a handfull of addresses that let you read the Accumulator, X, Y, Program counter, and status registers:</p>
<pre><code>00EF: PCL - Program Counter - Low Order Byte
00F0: PGH - Program Counter - High Order Byte
00F1: P - Status Register
00F2: SF - Stack Pointer
00F3: A - Accumulator
00F4: Y - Y-Index Register
00F5: X - X-Index Register
</code></pre>
<p>So if you load the x register with a value, you can simply view location 00F5 to see what that value is. These locations are merely copies, and you can't set values here yourself.</p>
<h2>
<a name="credits" class="anchor" href="#credits"><span class="octicon octicon-link"></span></a>Credits</h2>
<ul>
<li>Stian Soreng <a href="http://www.6502asm.com/">http://www.6502asm.com/</a> For originally writting the JS 6502 Emulation code that is the heart of this simulator</li>
<li>Nick Morgan <a href="http://skilldrick.github.io/easy6502/index.html">http://skilldrick.github.io/easy6502/index.html</a> For his modification to Stian's code, I ultimatley used his version as a base for my changes</li>
<li>Rudiger Appel <a href="Http://www.3quarks.com/en/SegmentDisplay/index.html">Http://www.3quarks.com/en/SegmentDisplay/index.html</a> For the 7 segment display library</li>
</ul></article>
</div>
</div>
</div>
<div id="kim">
<div id="toolkit">
Quick enter a program. Each line should start with an address, and then space delimited values.<br>
<select id="examples">
<option value="-1">Select from below</option>
<option value="0">EX1 from First Book of Kim</option>
</select>
<textarea id="quickedit" rows="15" cols="25"></textarea><br />
<input type="button" id="load" value="Load">
</div>
<div id = "io">
<div id="screen">
<canvas id="display" width="235" height="135">
</canvas>
</screen>
<div id="kb">
<input type="button" class="btn" id="btn_go" value="GO">
<input type="button" class="btn" id="btn_st" value="ST">
<input type="button" class="btn" id="btn_rs" value="RS">
<span class="switch"><input type="checkbox" id="sst"></span>
<input type="button" class="btn" id="btn_ad" value="AD">
<input type="button" class="btn" id="btn_da" value="DA">
<input type="button" class="btn" id="btn_pc" value="PC">
<input type="button" class="btn" id="btn_plus" value="+">
<input type="button" class="btn" id="btn_c" value="C">
<input type="button" class="btn" id="btn_d" value="D">
<input type="button" class="btn" id="btn_e" value="E">
<input type="button" class="btn" id="btn_f" value="F">
<input type="button" class="btn" id="btn_8" value="8">
<input type="button" class="btn" id="btn_9" value="9">
<input type="button" class="btn" id="btn_a" value="A">
<input type="button" class="btn" id="btn_b" value="B">
<input type="button" class="btn" id="btn_4" value="4">
<input type="button" class="btn" id="btn_5" value="5">
<input type="button" class="btn" id="btn_6" value="6">
<input type="button" class="btn" id="btn_7" value="7">
<input type="button" class="btn" id="btn_0" value="0">
<input type="button" class="btn" id="btn_1" value="1">
<input type="button" class="btn" id="btn_2" value="2">
<input type="button" class="btn" id="btn_3" value="3">
</div>
</div>
<div>
<a href="https://github.com/rsayers/jskim1/"><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>