-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (93 loc) · 2.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
<html>
<head>
<meta charset="UTF-8" />
<title>Knight's Tour</title>
</head>
<body>
<p>
Al-Adli ar-Rumi solution to the knight's tour problem. Source repository
<a href="https://github.com/tescande/knighttour">here</a>.
</p>
<canvas width="500" height="500"></canvas>
<script>
var table = [ "H1", "G3", "F1", "H2", "G4", "E3", "D1", "B2",
"A4", "C3", "B1", "A3", "C4", "B6", "A8", "C7",
"B5", "A7", "C8", "D6", "E8", "F6", "D5", "E7",
"G8", "H6", "F5", "G7", "H5", "F4", "E2", "D4",
"C6", "A5", "B7", "C5", "A6", "B8", "D7", "E5",
"F3", "G1", "H3", "G5", "H7", "F8", "E6", "D8",
"F7", "H8", "G6", "H4", "G2", "E1", "D3", "C1",
"A2", "B4", "C2", "A1", "B3", "D2", "E4", "F2" ];
var offset = 30;
var board_size = 8;
var cell_size = 40;
function sleep(ms)
{
return new Promise(resolve => setTimeout(resolve, ms));
}
function draw_board()
{
let x, y;
let cx = document.querySelector("canvas").getContext("2d");
cx.beginPath();
cx.font = "22px Verdana";
for (let i = 0; i <= board_size; i++) {
x = offset;
y = offset + i * cell_size;
cx.moveTo(x, y);
cx.lineTo(x + cell_size * board_size, y);
if (i < board_size)
cx.fillText(i+1, offset / 2 - 10,
y + cell_size / 2 + 10);
x = offset + i * cell_size;
y = offset;
cx.moveTo(x, y);
cx.lineTo(x, y + cell_size * board_size);
if (i < board_size)
cx.fillText(String.fromCharCode(65 + i),
x + cell_size / 2 - 10, offset / 2 + 5);
}
cx.stroke();
}
function get_coord(str_coord)
{
let coord = new Array();
x = str_coord.charCodeAt(0) - "A".charCodeAt(0);
coord[0] = x * cell_size + offset + cell_size / 2;
y = str_coord.charCodeAt(1) - "1".charCodeAt(0);
coord[1] = y * cell_size + offset + cell_size / 2;
return coord;
}
async function draw_path()
{
let cx = document.querySelector("canvas").getContext("2d");
let x, y;
cx.strokeStyle = "#FF0000";
cx.font = "12px Arial";
for (let i = 0; i < table.length - 1; i++) {
cx.beginPath();
[x, y] = get_coord(table[i]);
if (!i) {
cx.fillStyle = "#000000";
cx.fillText(i + 1, x + 4, y + 3);
cx.fillStyle = "#00FF00";
} else {
cx.fillStyle = "#FF0000";
}
cx.fillRect(x - 3, y - 3, 6, 6);
cx.moveTo(x, y);
[x, y] = get_coord(table[i + 1]);
cx.lineTo(x, y);
cx.stroke();
cx.fillStyle = "#00FF00";
cx.fillRect(x - 3, y - 3, 6, 6);
cx.fillStyle = "#000000";
cx.fillText(i + 2, x + 4, y + 3);
await sleep(50);
}
}
draw_board();
draw_path();
</script>
</body
</html>