-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtower.html
123 lines (123 loc) · 4.78 KB
/
tower.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>South-East Asian Disc-Stacking Problem</title>
<style>
body {
background: #ffffff;
}
h3 {
font-family: sans-serif;
text-align: center;
}
#canvas {
margin: 20px;
padding: 20px;
background: #dddddd;
border: thin inset #aaaaaa;
}
</style>
</head>
<body><div>
<h3>Click the graphic to begin</h3>
<script>
let discs = 6;
let delayms = 500;
let canvasX = 860;
let canvasY = 480;
let discMaxWidth = canvasX / 3.5;
let discMinWidth = canvasX / 8;
document.write('<canvas id="canvas" width="' + canvasX + '" height="' + canvasY + '">');
document.write('Canvas not supported by this browser');
document.write('</canvas>');
var canvas = document.getElementById('canvas');
let from = [], spare = [], to = [];
let colors = [ 'red', 'yellow', 'white' ];
function makeDisc(size, color) {
return { "width": size, "color": colors[color % colors.length] };
}
function initializeDisks() {
from = [];
spare = [];
to = [];
for (var i = discs; i > 0; i--) {
from.push(makeDisc(discMinWidth + (i - 1) * (discMaxWidth - discMinWidth) / (discs - 1), i));
}
}
function showDiscs() {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvasX, canvasY);
for (var p = 0; p != 3; ++p) {
var stack;
switch (p) {
case 0:
stack = from;
break;
case 1:
stack = spare;
break;
case 2:
stack = to;
break;
default:
break;
}
let center = (canvasX / 3) * p + canvasX / 6;
let pWidth = canvasX / 4;
let pThickness = 30;
context.fillStyle = ('brown');
context.fillRect(center - pWidth / 2, canvasY - pThickness, pWidth, pThickness);
context.fillRect(center - pThickness / 2, 0, pThickness, canvasY - pThickness);
let dThickness = (canvasY - 2 * pThickness) / discs;
if (dThickness > pThickness * 2) {
dThickness = pThickness * 2;
}
for (var d = 0; d != stack.length; ++d) {
context.fillStyle = (stack.at(d).color);
context.fillRect(center - stack.at(d).width / 2, canvasY - pThickness - (d + 1) * dThickness, stack.at(d).width, dThickness);
}
}
}
async function moveDiscs(n, from, to, spare) {
if (n > from.length) {
alert("Too few discs.");
return;
}
switch (n) {
case 0:
alert("Bad disc.");
return;
case 1:
let disc = from.pop();
if ((to.length > 0) && (disc.width >= to.at(to.length - 1).width)) {
alert("Disc too big.");
return;
}
to.push(disc);
let delay = (timeout) => {
return new Promise(res => {
setTimeout(res, timeout)
}
)};
await delay(delayms);
showDiscs();
break;
default:
await moveDiscs(n - 1, from, spare, to);
await moveDiscs(1, from, to, spare);
await moveDiscs(n - 1, spare, to, from);
break;
}
}
canvas.onclick = function() {
initializeDisks();
showDiscs();
moveDiscs(from.length, from, to, spare);
};
initializeDisks();
showDiscs();
</script>
</div></body>
</html>