-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
77 lines (72 loc) · 2.99 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
<html>
<head>
<title>A simple Path Finder</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="">
<div id='visualize'>
<canvas id="myCanvas">
<h1>Your browser does not support canvas! Please use a modern browser.</h1>
</canvas>
</div>
<div id="controls">
<h1>Path Finding using A*</h1>
<br>
<h2>Key Bindings</h2>
<h3><div class="key">🖱️</div> Left-Click to SELECT/DESELECT a node</h3>
<h3><div class="key">🖱️</div> Right-Click to remove any property</h3><br>
<br>
<h3><div class="key">S</div> Press "S" to set node as START</h3><br>
<h3><div class="key">E</div> Press "E" to set node as END</h3><br>
<h3><div class="key">D</div> Press "D" to set node as OBSTACLE</h3><br>
<h3><div class="key">_</div> Press [SPACE] to begin path finding</h3><br>
<h3><div class="key">↑</div> Select Top Node</h3><br>
<h3><div class="key">↓</div> Select Bottom Node</h3><br>
<h3><div class="key">→</div> Select Next Node</h3><br>
<h3><div class="key">←</div> Select Previous Node</h3><br>
<br>
<h2>Controls</h2>
<h3>Animation Speed : </h3> <input type="range" min="2" max="30" value="4" class="slider" id="animspeed"><h3 id="asv" style="color: lime;"></h3><br>
<h3>Node Side Length: </h3> <input type="range" min="20" max="100" value="40" class="slider" id="nodesize"><h3 id="nsv" style="color: lime;"></h3><br>
<h3>Show Debug info : </h3>
<label class="switch">
<input type="checkbox" checked id="dbginfo">
<span class="sw round"></span>
</label>
<h3 id="dv" style="color: lime;"></h3>
<br>
<h3>Allow Diagonal : </h3>
<label class="switch">
<input type="checkbox" id="diagonal">
<span class="sw round"></span>
</label>
<h3 id="adv" style="color: lime;"></h3>
<br>
<h3>Heuristic Method: </h3>
<select name="heuristic" id="heuristic">
<option value="m" selected>Manhattan</option>
<option value="e">Euclidian</option>
<option value="o">Octile</option>
<option value="c">Chebyshev</option>
</select>
<br>
<button class="resetbutt" onclick="f_resetSearch()">RESET SEARCH</button>
<button class="resetbutt" onclick="f_init()">RESET CANVAS</button>
<button class="resetbutt" onclick="window.location.reload()">RESET EVERYTHING</button>
<br>
<h2>Color Codes</h2>
<div class="pill" style="--data-color:lime">Path</div>
<div class="pill" style="--data-color:blue">Neighbours</div>
<div class="pill" style="--data-color:red">Obstacle</div>
<div class="pill" style="--data-color:white">Currently Being Scanned</div>
<div class="pill" style="--data-color:aqua">Scanned</div>
<div class="pill" style="--data-color:orange">Target Node</div>
<div class="pill" style="--data-color:greenyellow">Starting Node</div>
</div>
<script src="js/vars.js"></script>
<script src="js/objects.js"></script>
<script src="js/functions.js"></script>
<script src="js/algo.js"></script>
<script src="js/gameloop.js"></script>
</body>
</html>