-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (66 loc) · 2.93 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 name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Towers of Hanoi - JavaScript Project</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<link href="https://fonts.googleapis.com/css?family=Architects Daughter" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
</head>
<body>
<Header>
<h1>Towers of Hanoi</h1>
</Header>
<div id="main">
<aside><h2>How To Play:</h2>
<p>Move all discs, from the first tower to the last tower, while stacking smaller
discs only on larger discs.<p>Try to get as close to the minimum number of moves as possible
in the shortest amount of time.</p>Click Reset after successfully completing a game or to
abort a game in process.<p style="text-align: center">Have fun!</p>
</aside>
<div id="game">
<div id="dashboard">
<div id="disc-selection">
<div id="disc-selection-buttons">
<button class="buttons" id="down-button">▼</button>
<button class="buttons" id="up-button">▲</button>
</div>
<span id="number-of-discs">Discs: 8</span>
</div>
<div id="moves">
<span id="minimum-moves">Minimum Moves: 255</span>
<span id="your-moves">Your Moves: 0</span>
</div>
<div id="reset-and-log">
<button id="reset" class="buttons">Reset</button>
<button id="log" class="buttons">Log</button>
</div>
</div>
<div class="tower-container">
<div class="towers" id="towerA">
<div class="tower-columns" id="towerA-column"></div>
<div class="tower-bases" id="towerA-base"></div>
</div>
<div class="towers" id="towerB">
<div class="tower-columns" id="towerB-column"></div>
<div class="tower-bases" id="towerB-base"></div>
</div>
<div class="towers" id="towerC">
<div class="tower-columns" id="towerC-column"></div>
<div class="tower-bases" id="towerC-base"></div>
</div>
</div>
<div class="info-container">
<div id="winner"></div>
<div id="status"></div>
</div>
</div> <!-- End game section -->
</div> <!-- End main section -->
<script src="./js/Disc.js"></script>
<script src="./js/Tower.js"></script>
<script src="./js/Gameboard.js"></script>
<script src="./js/main.js"></script>
</body>
</html>