-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (97 loc) · 3.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./media/chessboard-img.png" type="image/icon type">
<link rel="stylesheet" href="styles/all-pages.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="head">
<a href="n-queens/n-queens.html" class="left"><i class="fas fa-arrow-circle-left"></i> N Queens <i class="fas fa-chess-queen"></i></a>
<h1 class="hide-when-small">CHESS BACKTRACKING VISUALIZERS</h1>
<a href="knights-tour/knights-tour.html" class="right">
<i class="fas fa-chess-knight"></i>
Knight's Tour
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
<hr>
<div id="big-wrapper">
<div id="desc-container">
<hr class="hide-when-large">
<div id="n-queens-desc" class="desc">
<div>
In the N queens puzzle, the goal is to place N queens onto an NxN chess board
such that no two queens are attacking each other.
</div>
<br>
<div class="hide-when-small demo-image-container">
<img class="demo-image" src="media/n-queens-demo.png">
</div>
<br>
<div>
The N Queens problem asks how many ways there are to place N queens in this way
onto an NxN board. It is a classic exercise in backtracking. In my visualizer,
you may place a queen on any square by clicking, except for squares that are
already attacked by other queens, which will be marked. The number of queens you
have placed will be tracked and displayed. Also, the number of possible solutions,
given the queens you have placed so far, will be calculated using a straightforward
backtracking algorithm and displayed in real time.
</div>
<br>
<div class="hide-when-small demo-image-container">
<img class="demo-image" src="media/n-queens-complete.png">
</div>
</div>
<div id="overall-desc" class="desc">
<h3>
<i class="fas fa-chess-queen"></i>
Welcome!
<i class="fas fa-chess-knight"></i>
</h3>
<div class="hide-when-small">
This website features visualizers for the N Queens and Knight's Tour problems.
</div>
Use the navigation links at the top to play with each visualizer.
<br><br>
<i class="fas fa-chess-queen"></i>
<a href="mailto:[email protected]">CONTACT ME</a>
<i class="fas fa-chess-knight"></i>
</div>
<hr class="hide-when-large">
<div id="knights-tour-desc" class="desc">
<div>
To complete the Knight's Tour puzzle, you must find a way to move a knight
N<sup>2</sup> times on an NxN chessboard such that the knight visits all
N<sup>2</sup> squares exactly once, that is without missing or revisiting
any square.
</div>
<br>
<div class="hide-when-small demo-image-container">
<img class="demo-image" src="media/knights-tour-demo.png">
</div>
<br>
<div>
You may set the size of the board and then click squares to place and move
knights. Possible next moves will be highlighted. The number of moves you
have taken will be tracked. In addition, my algorithm continually searches
for a complete tour using the Warnsdorff heuristic as you make moves, and
displays whether a complete tour has been found. Because the heuristic is
non-deterministic, this display of whether a complete tour exists may be
wrong at times, i.e. it may incorrectly display "no tour exists" for some
configurations of moves where a tour does in fact exist.
</div>
<br>
<div class="hide-when-small demo-image-container">
<img class="demo-image" src="media/knights-tour-complete.png">
</div>
</div>
<hr class="hide-when-large">
</div>
</div>
<script src="https://kit.fontawesome.com/3059e8df3b.js" crossorigin="anonymous"></script>
</body>
</html>