-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (69 loc) · 8.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="main.css" rel="stylesheet" type="text/css" />
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script defer src="./js/main.js"></script>
<title>Emoji Maze</title>
</head>
<body>
<nav>
<h1>CHOOSE YOUR CHARACTER</h1>
<div class="human-players">
<div>
<p id="cowboy" class="emoji">🤠</p>
</div>
<div>
<p id="alien" class="emoji">👽</p>
</div>
<div>
<p id="bee" class="emoji">🐝</p>
</div>
</div>
<h3>AI Players</h3>
<div class="ai-players">
<div>
<p id="dfs" class="emoji">🤖</p>
<p>DFS</p>
</div>
<div class="locked">
<p id="bfs" class="emoji">🤖</p>
<p>BFS</p>
</div>
<div class="locked">
<p id="dijkstra" class="emoji">🤖</p>
<p>Dijkstra</p>
</div>
</div>
</nav>
<header>
<h1 id="header-h1">🤩 EMOJI MAZE ⚡️</h1>
<div class="subheading">
<p id="start" class="button">Start</p>
</div>
</header>
<!-- For this prebuilt board, I used js to let me build it by clicking boxes, toggling the available tag.
Then I copied the html from dev tools. -->
<div id="board">
<div id="0" class="square available"></div><div id="1" class="square available"></div><div id="2" class="square available"></div><div id="3" class="square available"></div><div id="4" class="square"></div><div id="5" class="square available"></div><div id="6" class="square available"></div><div id="7" class="square available"></div><div id="8" class="square available"></div><div id="9" class="square"></div><div id="10" class="square available"></div><div id="11" class="square available"></div><div id="12" class="square available"></div><div id="13" class="square available"></div><div id="14" class="square"></div><div id="15" class="square available"></div><div id="16" class="square"></div><div id="17" class="square"></div><div id="18" class="square available"></div><div id="19" class="square available"></div><div id="20" class="square"></div><div id="21" class="square available"></div><div id="22" class="square"></div><div id="23" class="square available"></div><div id="24" class="square"></div><div id="25" class="square"></div><div id="26" class="square"></div><div id="27" class="square"></div><div id="28" class="square available"></div><div id="29" class="square available"></div><div id="30" class="square"></div><div id="31" class="square available"></div><div id="32" class="square available"></div><div id="33" class="square"></div><div id="34" class="square"></div><div id="35" class="square available"></div><div id="36" class="square available"></div><div id="37" class="square available"></div><div id="38" class="square"></div><div id="39" class="square available"></div><div id="40" class="square available"></div><div id="41" class="square"></div><div id="42" class="square available"></div><div id="43" class="square available"></div><div id="44" class="square available"></div><div id="45" class="square available"></div><div id="46" class="square available"></div><div id="47" class="square available"></div><div id="48" class="square available"></div><div id="49" class="square available"></div><div id="50" class="square available"></div><div id="51" class="square"></div><div id="52" class="square"></div><div id="53" class="square available"></div><div id="54" class="square"></div><div id="55" class="square available"></div><div id="56" class="square"></div><div id="57" class="square"></div><div id="58" class="square"></div><div id="59" class="square available"></div><div id="60" class="square"></div><div id="61" class="square"></div><div id="62" class="square"></div><div id="63" class="square"></div><div id="64" class="square available"></div><div id="65" class="square"></div><div id="66" class="square available"></div><div id="67" class="square available"></div><div id="68" class="square"></div><div id="69" class="square"></div><div id="70" class="square"></div><div id="71" class="square available"></div><div id="72" class="square"></div><div id="73" class="square available"></div><div id="74" class="square available"></div><div id="75" class="square available"></div><div id="76" class="square available"></div><div id="77" class="square available"></div><div id="78" class="square available"></div><div id="79" class="square available"></div><div id="80" class="square available"></div><div id="81" class="square"></div><div id="82" class="square"></div><div id="83" class="square available"></div><div id="84" class="square available"></div><div id="85" class="square available"></div><div id="86" class="square available"></div><div id="87" class="square available"></div><div id="88" class="square"></div><div id="89" class="square available"></div><div id="90" class="square"></div><div id="91" class="square"></div><div id="92" class="square available"></div><div id="93" class="square"></div><div id="94" class="square"></div><div id="95" class="square available"></div><div id="96" class="square available"></div><div id="97" class="square available"></div><div id="98" class="square available"></div><div id="99" class="square"></div><div id="100" class="square"></div><div id="101" class="square"></div><div id="102" class="square"></div><div id="103" class="square available"></div><div id="104" class="square available"></div><div id="105" class="square available"></div><div id="106" class="square available"></div><div id="107" class="square"></div><div id="108" class="square available"></div><div id="109" class="square"></div><div id="110" class="square available"></div><div id="111" class="square available"></div><div id="112" class="square"></div><div id="113" class="square"></div><div id="114" class="square available"></div><div id="115" class="square available"></div><div id="116" class="square"></div><div id="117" class="square available"></div><div id="118" class="square"></div><div id="119" class="square available"></div><div id="120" class="square"></div><div id="121" class="square available"></div><div id="122" class="square available"></div><div id="123" class="square"></div><div id="124" class="square available"></div><div id="125" class="square"></div><div id="126" class="square available"></div><div id="127" class="square"></div><div id="128" class="square available"></div><div id="129" class="square"></div><div id="130" class="square available"></div><div id="131" class="square"></div><div id="132" class="square available"></div><div id="133" class="square available"></div><div id="134" class="square"></div><div id="135" class="square"></div><div id="136" class="square"></div><div id="137" class="square available"></div><div id="138" class="square"></div><div id="139" class="square"></div><div id="140" class="square"></div><div id="141" class="square"></div><div id="142" class="square available"></div><div id="143" class="square"></div><div id="144" class="square available"></div><div id="145" class="square available"></div><div id="146" class="square available"></div><div id="147" class="square"></div><div id="148" class="square available"></div><div id="149" class="square available"></div><div id="150" class="square available"></div><div id="151" class="square available"></div><div id="152" class="square available"></div><div id="153" class="square available"></div><div id="154" class="square available"></div><div id="155" class="square available"></div><div id="156" class="square available"></div><div id="157" class="square"></div><div id="158" class="square available"></div><div id="159" class="square available"></div>
</div>
<footer>
<div class="arrows">
<div class="up-container">
<div id="up" class="arrow">⬆️</div>
</div>
<div class="left-down-right-container">
<div id="left" class="arrow">⬅️</div>
<div id="down" class="arrow">⬇️</div>
<div id="right" class="arrow">➡️</div>
</div>
</div>
</footer>
</body>
</html>