-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
423 lines (423 loc) · 17.8 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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Towers of Hanoi Demonstration</title>
<meta name="description" content="A page containing the puzzle, variations, and
solutions." />
<meta name="keywords" content="tower, towers, of, hanoi, puzzle, variation,
variations, solution, solutions, disk, disks, stack, stacks" />
<meta name="author" content="Brandon Evans" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"
/>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/lib/base64.js"></script>
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/json2.js"></script>
<script type="text/javascript" src="js/lib/mobile.js"></script>
<script type="text/javascript" src="js/lib/sylvester.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/solve.js"></script>
</head>
<body>
<h1>Towers of Hanoi Demonstration</h1>
<h3>
A page containing the puzzle, variations, and solutions.
</h3>
<p>
Wikipedia describes <a href="http://en.wikipedia.org/wiki/Tower_of_Hanoi"
target="_blank">The Towers of Hanoi</a> as a mathematical puzzle that has
become a popular example of the concept of <a
href="http://en.wikipedia.org/wiki/Recursion_(computer_science)"
target="_blank">recursion</a>. On this page, we have provided the puzzle,
several options used to create variations of it, a method of playing these
games manually, and solutions to many of the combinations. We made this
program to educate, entertain, and strive for the best solutions to these
variations. You can view the project on
<a href="https://github.com/BrandonE/hanoi" target="_blank">GitHub</a> if
you have feedback or contributions. Thanks for visiting.
</p>
<div class="yesscript" style="display: none">
<div id="towers"></div>
<div style="clear: both"></div>
<fieldset>
<legend>Solution</legend>
<table>
<tr>
<td width="50%"><label for="mode">Mode</label></td>
<td width="50%">
<select id="mode">
<option>Wait</option>
<option>Repeat</option>
<option>Increase</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="button" id="switch" value="Start" />
</td>
<td>
<input type="button" id="startover" value="Start Over" />
</td>
</tr>
<tr>
<td>
<div class="stopped">
<input type="button" id="undo" value="Undo" />
</div>
</td>
<td>
<div class="stopped">
<input type="button" id="redo" value="Redo" />
</div>
</td>
</tr>
<tr>
<td><label for="delay">Delay</label></td>
<td>
<input type="text" id="delay" />
</td>
</tr>
<tr>
<td>Moves</td>
<td>
<span id="moves"></span>
</td>
</tr>
<tr>
<td>Minimum Moves</td>
<td>
<span id="minimum"></span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="showlog" />
<label for="showlog">Log</label>
</td>
<td>
<textarea id="log" rows="5" cols="30" readonly="readonly"
style="display: none"></textarea>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="showexport" />
<label for="showexport">Export Moves</label>
</td>
<td>
<textarea id="export" rows="1" cols="30"
readonly="readonly" style="display: none"></textarea>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="showimport" />
<label for="showimport">Import Moves</label>
</td>
<td>
<textarea id="import" rows="1" cols="30"
style="display: none"></textarea>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Settings</legend>
<table>
<tr>
<td width="50%"><label for="disks">Disks per Stack</label></td>
<td width="50%">
<input type="text" id="disks" />
</td>
</tr>
<tr class="antwerp">
<td><label for="per">Towers per Stack</label></td>
<td>
<input type="text" id="per" />
</td>
</tr>
<tr class="antwerp">
<td><label for="stacks">Stacks</label></td>
<td>
<input type="text" id="stacks" />
</td>
</tr>
<tr>
<td><label for="shades">Shades</label></td>
<td>
<input type="text" id="shades" />
</td>
</tr>
<tr class="shade">
<td><label for="top">Top Shade</label></td>
<td>
<select id="top">
<option>Any</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="alternate" />
<label for="alternate">Alternate</label>
</td>
<td>
<input type="checkbox" id="change" />
<label for="change">Change</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="random" />
<label for="random">Random</label>
</td>
<td>
<input type="checkbox" id="shuffle" />
<label for="shuffle">Shuffle</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="antwerp" />
<label for="antwerp">Antwerp</label>
</td>
<td class="shade">
<input type="checkbox" id="home" />
<label for="home">Home</label>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Restrictions</legend>
<table>
<tr>
<td width="50%">
<input type="radio" name="restriction" id="none"
value="none" />
<label for="none">No additional restrictions.</label>
</td>
<td width="50%">
<input type="radio" name="restriction" id="linear"
value="linear" /> <label for="linear">Disks can only move
linearly</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="restriction" id="clock"
value="clock" /> <label for="clock">Disks can only move
cyclicly clockwise</label>
</td>
<td>
<input type="radio" name="restriction" id="counter"
value="counter" /> <label for="counter">Disks can only move
cyclicly counterclockwise</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="restriction" id="different"
value="different" /> <label for="different">Disks can't
touch disks of a different shade</label>
</td>
<td>
<input type="radio" name="restriction" id="same"
value="same" /> <label for="same">Disks can't touch disks
of the same shade</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="restriction" id="group"
value="group" /> <label for="group">In any group of S =
Shades disks, there can't be two disks of the same
shade</label>
</td>
<td>
<input type="checkbox" id="size" />
<label for="size">Disks of the same size can be placed on
eachother</label>
</td>
</tr>
</table>
</fieldset>
<p>
URL for this configuration: <textarea id="configuration" rows="1"
cols="30"></textarea>
</p>
<h2>Development</h2>
Now on
<a href="https://github.com/BrandonE/hanoi" target="_blank">GitHub</a>!
<h2>The Puzzle</h2>
<p>The classic Towers of Hanoi puzzle has two rules:</p>
<ol>
<li>Only one disk shall be moved at a time</li>
<li>
A disk must be moved onto either an empty tower or a bigger disk.
</li>
</ol>
<p>
To win, following these rules, transfer all of the disks to the tower
farthest to the right in size order. Even in this basic case, this may
prove to be much more difficult than expected, and the number of moves
it takes to finish grows exponentially as you increase the number of
disks.
</p>
<h2>How to Use this Page</h2>
<p>
This page provides several ways to play. These methods can be put into
two categories: manual and automatic ones. You can play manually by
clicking a tower to take off the top disk and clicking another tower to
place it. In addition, you can do the same thing by using the number
keys to indicate the tower you want to move to or from, although this
doesn't work for towers greater than 9.
</p>
<p>
For the automatic methods, depending on what options you have provided,
there might be a built-in <b>Solution</b> that you can watch. To see if
we have implemented a solution for this setup, check the <em>Minimum
Moves</em> field; if it shows something other than "Unsolved", click
<em>Start</em> to begin the solution and <em>Stop</em> to stop it.
Also, if you have come up with your own solution and want to save the
moves you made, check <em>Export Moves</em>, copy the contents of the
box that appears, check <em>Import Moves</em>, paste the contents into
the box that appears, and press Start. It will then execute the moves
you did previously. The program will use this method as long as you
keep the Import Moves box open and it contains moves. For both of these
automatic methods, you can adjust the <em>Delay</em> field to change
the number of milliseconds the the program will wait in between moves.
What happens when the program finishes making the moves depends on the
selected <em>Mode</em>: selecting "Wait" will make it await further
input, "Repeat" will restart the solution with the same options
selected, and "Increase" will restart the solution with one additional
disk.
</p>
<p>
We have also provided some additional information fields in the
Solution fieldset that deserve mentioning:
</p>
<ul>
<li><em>Moves</em> shows the number of moves that have been made.</li>
<li>
<em>Log</em> shows the moves made. You can show them by checking
the checkbox.
</li>
<li>
<em>Minimum Moves</em> shows the smallest number of moves it takes
to finish a given configuration known. In other words, it shows how
many moves the built-in solution takes to complete, if this number
can be calculated (It shows "N/A" if the puzzle can be solved, but
it has no method of calculating the number of moves it would take).
This means you can get a solution in less moves than those
provided, as few of these configurations have a solution that has
been proven optimal.
</li>
</ul>
<p>
Once you get a hang of playing the game, you might want to change up
the <b>Settings</b>. Most programs like this one only have you adjust
the number of disks, whereas this one provides many other settings that
deserve explaining:
</p>
<ul>
<li>
<em>Towers per Stack</em> adjusts how many towers each stack can
use. Although increasing this number usually greatly reduces the
number of moves needed to win, it also makes the solution much
harder to prove optimal.
</li>
<li>
<em>Stacks</em> adjusts how many different colored stacks get
placed on the towers. In the default case, making this number more
than one changes the layout of the puzzle so that each stack has
its own game, and the games interlock. This introduces a new rule:
No disk of a given stack can go on a tower that has a
different colored base and peg. This still allows disk of the same
color but a different shade, though. Under this configuration,
rotate the colored stacks clockwise to win.
</li>
<li>
Checking <em>Antwerp</em> changes the layout of a game with
multiple stacks. Instead of placing towers in between the different
stacks, the program places them all next to each other, and each
stack can go on any tower. Again, to win, you must rotate the
colored stacks clockwise. To enable this, you must also enable
<em>Disks of the same size can be placed on each other</em> in the
restrictions section.
</li>
<li>
The <em>Shades</em> option adjusts how many shades each stack has,
the <em>Alternate</em> option makes the shades of the disks
alternate on the stacks, and the <em>Change</em> option makes the
shade of a disk change when moved. These settings only matter when
you enable certain restrictions.
</li>
<li>
The <em>Random</em> option randomly places disks on the towers,
while the <em>Shuffle</em> option shuffles the order of the disks.
These options might create initial setups that break rules for the
given variation. However, in many cases, it's still possible to
solve the puzzle if you don't make any illegal moves from that
point on. That said, we're still working on these features, so
there might be some cases in which they create unsolvable puzzles.
</li>
</ul>
<p>
Lastly, you can enable several <b>Restrictions</b>. These restrictions
have been labeled in an obvious way, so we won't explain what each of
them does. However, if you enable any of the restrictions regarding
shade, and you have enabled <em>Change</em>, two additional settings
appear:
</p>
<ul>
<li>
<em>Top Shade</em> states what shade the top disk of each
stack must be to complete the puzzle. This value can either be
"Any" or a number. Initially, top disk has the shade 1. If you have
set <em>Shades</em> to more than 1, then the color that disk
changes to upon moving would be shade 2, and so on.
</li>
<li>
If you check the <em>Home</em> option, then to win, all the stacks
must return to where they started with the top disk having a
different shade than it originally had. For this reason, when you
check this option, there must be at least two <em>Shades</em>, and
the <em>Top Shade</em> can't be "Any" nor 1.
</li>
</ul>
<p>
If you don't set any additional restrictions, you can also select
<em>Star Towers</em>. To make a tower a star tower, check the checkbox
on top of it. If you have selected star towers, moves must either be
from or to them.
</p>
<p>
Finally, if you want to share the options you have set, copy the
<em>URL for this configuration</em>.
</p>
</div>
<div class="noscript">
<p style="text-align: center">
<strong>In order to use this page, you must enable Javascript.</strong>
</p>
</div>
<p style="text-align: center">
Copyright © 2010-2015 <a href="http://www.brandonevans.org/">Brandon
Evans</a>. All Rights Reserved.
</p>
<p>
Special thanks to Fred Lunnon for <a href="java/">his Java implementation I
based this page on</a>, Victor Mascolo for inventing the original
Multistack Hanoi puzzle and models (U.S. patent number 7,566,057), Paul
Stockmeyer and Steve Minsker for their papers on several variations as well
as other contributions, Alex Munroe for his example of a custom built
generator as well as other assistance, Chris Santiago for design help,
James Rhodes, Ian Rahimi, and Samuel Sieb for support, and my sister,
Lindsay Evans, for proposing an alternative solution to the Classic
multiple stacks problem, and for being supportive with all of my endeavors.
</p>
</body>
</html>