-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (67 loc) · 2.26 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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="./styles/style.css">
<title>Grid</title>
</head>
<body>
<div class="navbar">
<ul class="nav-btn">
<li class='start-state' data-state="start" onclick="changeState(this)">Start</li>
<li class='wall-state' data-state="wall" onclick="changeState(this)">Wall</li>
<li class='end-state' data-state="end" onclick="changeState(this)">End</li>
<li class='visualize'>Visualize</li>
<li class='Algorithm'>
<div class="dropdown">
<button class="dropbtn">Algorithm</button>
<ul class="dropdown-content">
<li class="BFS" data-algo="bfs" onclick="algorithm(this)">BFS</li>
<li class="DFS" data-algo="dfs" onclick="algorithm(this)">DFS</li>
<li class="Dijsktra" data-algo="dijsktra" onclick="algorithm(this)">Dijsktra</li>
<li class="AStar" data-algo="AStar" onclick="algorithm(this)">A Star</li>
<li class="JPS" data-algo="JPS" onclick="algorithm(this)">JPS</li>
</ul>
</div>
</li>
<li class='clear' onclick="clearAll()">Clear</li>
</ul>
</div>
<div id="Grid" class="Grid">
</div>
<script src="./components/dataStructures.js"></script>
<script>
//variables
var wall = false;
var start_x =0;
var start_y =0;
var end_x = 49;
var end_y = 19;
var state = "";
var path = new Stack();
var start = "<div class='start'></div>";
var end = "<div class='end'></div>";
var algo = 'none';
var exploring = false;
var grid = "";
var x = 50, y=20;
var Grid = document.querySelector('#Grid');
const vis = document.querySelector(".visualize");
for(let i=0;i<y;i++){
grid += "<div class='row'>" ;
for(let j=0;j<x;j++){
grid += "<div class='box' data-x='" + j + "' data-y='" + i + "' data-state='none'>" + "</div>";
}
grid += "</div>";
}
document.getElementById("Grid").innerHTML = grid;
</script>
<script src="./components/state.js"></script>
<script src="./algorithms/bfs.js"></script>
<script src="./algorithms/dfs.js"></script>
<script src="./algorithms/AStar.js"></script>
<script src="./algorithms/jps.js"></script>
<script src="./algorithms/dijsktra.js"></script>
<script src="./components/visualize.js"></script>
</body>
</html>