-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
269 lines (217 loc) · 10 KB
/
index.html
File metadata and controls
269 lines (217 loc) · 10 KB
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Brahma Tower</title>
<link rel="shortcut icon" href="assets/images/towr.ico" />
<link rel="stylesheet" href="css/audio_button.css">
<link rel="stylesheet" href="css/page1.css">
<link rel="stylesheet" href="css/page2.css">
<link rel="stylesheet" href="css/page3.css">
<link rel="stylesheet" href="css/page4.css">
<link rel="stylesheet" href="css/page5.css">
<link rel="stylesheet" type="text/css" href="css/page6.css">
<link rel="stylesheet" href="css/page7.css">
<link rel="stylesheet" href="css/loader.css">
<link rel="stylesheet" href="css/victory_message.css">
</head>
<body>
<audio id="player">
<source src="assets/sounds/bg_music.mp3" type="audio/mp3" />
</audio>
<a id="playPause" href="#" class="speaker">
<span></span>
</a>
<audio id="won">
<source src="assets/sounds/won.mp3" type="audio/mp3">
</audio>
<img class="badges" id="firstGameBadge" src="assets/images/1stgame(g).png" />
<img class="badges" id="nearOptBadge" src="assets/images/nearopt(g).png" />
<img class="badges" id="optimumBadge" src="assets/images/optimum(g).png" />
<img class="badges" id="insaneBadge" src="assets/images/insane(g).png" />
<div><img id="yourCharacter" src="assets/images/yourcharacter.jpg" /></div>
<div id="cover">
<div id="loader">Loading...</div>
</div>
<div id="page1">
<h1 id="gameTitle1"><span data-shadow-text="Text-Shadow">Brahma Tower</span></h1>
<div class="login">
<input id="playerName" type="text" name="player_Name" placeholder="Username at least 3 characters" />
<button id="submitBtn" type="submit" class="btn">Next</button>
</div>
</div>
<div id="page2" style="display: none;">
<h1 id="gameTitle2"><span data-shadow-text="Text-Shadow" id="gameTitleSpan">Brahma Tower</span></h1>
<div id="instructions">
<p>
Welcome to Brahma Tower. Your mission is simple, just move all the disks from the leftmost tower to the rightmost tower. Remember that only one disk may be moved at a time, and it is not possible to place a bigger disk on a smaller one.
</p>
</div>
<div id="startButtonDiv">
<button class="btn" id="startButton">Lets's start</button>
<div id="divider"></div>
<button class="btn" id="ContinueBtn">Continue</button>
</div>
<div>
<button class="button" id="Bgs">View Badges</button>
</div>
<div class="box">
<a class="button" href="#popup1">Credits</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Credits:</h2>
<a class="cls" href="#">×</a>
<div class="content">
An implementation of the Tower of Hanoi in HTML and JavaScript. <br/> Team Members:<br/> 1) Amr Essam (Amr-Elnemr).<br/> 2) Kareem Adel (kareemadel).<br/> 3) Muhammad Majid (plutonium239kraken).<br/> 4) Shaimaa Nabil (shaimaanabil).<br/><br/> >>The Tower of Hanoi(another name for this puzzle)is widely believed to have been invented in 1883 by the French mathematician Édouard Lucas.
</div>
</div>
</div>
</div>
<div id="page3" style="display: none;">
<div id="header">
<h3>Brahma Tower</h3>
</div>
<div>
<div class="speech-bubble">
<div class="talktext">
<p>Do you know that:<br/>If the legend of Brahm's Tower was true, and if the priests were able to move disks at a rate of one per second, using the smallest number of moves it would take them around 585 billion years to finish,which is
about 42 times the current age of the Universe.</p>
<p>Do you know that:<br/>The puzzle was invented by the French mathematician Édouard Lucas in 1883. There is a story about an Indian temple in Kashi Vishwanath which contains a large room with three time-worn posts in it, surrounded by
64 golden disks.</p>
<p>Do you know that:<br/>According to the legend, Brahmin priests have been moving Brahma Tower disks in accordance with the immutable rules of Brahma since that time. It was beleived that, when the last move of the puzzle is completed,
the world will end.</p>
<p>Do you know that:<br/>In the film Rise of the Planet of the Apes (2011), this puzzle, called in the film the "Lucas Tower", is used as a test to study the intelligence of apes.</p>
</div>
</div>
</div>
<div>
<img class="chr" src="assets/images/squirtle33.png" />
</div>
<div>
<button class="button" id="mainMenuBtn">Home</button>
</div>
<div>
<button class="button" id="skipBtn">Play</button>
</div>
</div>
<div id="page4" style="display: none;">
<h1 id="typeOfPerson">What Type Of Person Are You?</h1>
<div id="tier1">
<h2 class="difficulty">Easy</h2>
<a href="#" class="anchor" id="easy">
<div class="level easyLevel">
</div>
</a>
<h2 class="difficulty">Average</h2>
<a href="#" class="anchor" id="average">
<div class="level averageLevel">
</div>
</a>
</div>
<div id="tier2">
<h2 class="difficulty">Hard</h2>
<a href="#" class="anchor" id="hard">
<div class="level hardLevel">
</div>
</a>
<h2 class="difficulty">Insane</h2>
<a href="#" class="anchor" id="insane">
<div class="level insaneLevel">
</div>
</a>
</div>
<div id="mainMenuButtonDiv4">
<button class="btn" id="mainMenuButton4">Home</button>
</div>
</div>
<div id="page5" style="display: none;">
<div class="Choose">
<h1 id="charcChoose"><span>Choose your character</span></h1>
</div>
<div class="characters">
<div><img id="charmander" class="cr" src="assets/images/004Charmander_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png" width="100" height="140" /></div>
<div><img id="pikachu" class="cr" src="assets/images/Cute_pikachu_with_hat_by_mlpochea-d63xlom.png" width="100" height="140" /></div>
<div><img id="bulbasaur" class="cr" src="assets/images/001Bulbasaur_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png" width="100" height="140" /></div>
<div><img id="squirtle" class="cr" src="assets/images/Squirtle_Rojo_Fuego_y_Verde_Hoja.png" width="100" height="140" /></div>
</div>
<div class="types">
<p>Charmander</p>
<p>Pikachu</p>
<p>Bulbasaur</p>
<p>Squirtle</p>
</div>
<div id="mainMenuButtonDiv5">
<button class="btn" id="mainMenuButton01">Home</button>
</div>
</div>
<!-- added tabindex to capture keyboard events -->
<div id="page6" style="display: none;" tabindex="0">
<div id="game">
<div id="moves"></div>
<div id="towers">
<ul id="tower-1" value="0"></ul>
<ul id="tower-2" value="1"></ul>
<ul id="tower-3" value="2"></ul>
</div>
</div>
<div id="restartDiv">
<button class="btn" id="restartButton">Restart</button>
</div>
<div id="mainMenuButtonDiv">
<button class="btn" id="mainMenuButton6">Home</button>
</div>
<div id="optimumSolutionButtonDiv">
<button class="btn" id="optimumSolutionButton">Optimum Solution</button>
</div>
</div>
<!-- The VictoryMessage -->
<div id="myVictoryMessage" class="VictoryMessage">
<!-- VictoryMessage content -->
<div class="VictoryMessage-content">
<div class="VictoryMessage-header">
<span class="close">×</span>
<h2 id="VictoryHeader">Congratulations</h2>
</div>
<div class="VictoryMessage-body">
<p id="VictoryMessageBody">You Have Won.</p>
</div>
</div>
</div>
<div id="page7" style="display: none;">
<div id="tbgd">
<p>Badges</p>
</div>
<div>
<img id="badge1" src="assets/images/1stgame.png" />
<p id="exp1" class='explain'>Winning your First game</p>
</div>
<div>
<img id="badge2" src="assets/images/nearopt.png" />
<p id="exp2" class='explain'>Winning near the optimum number of moves</p>
</div>
<div>
<img id="badge3" src="assets/images/optimum.png" />
<p id="exp3" class='explain'>Winning with the perfect number of moves</p>
</div>
<div>
<img id="badge4" src="assets/images/insane.png" />
<p id="exp4" class='explain'>Winning the INSANE level</p>
</div>
<div>
<button class="button" id="mainMenuButtonbdg">Back</button>
</div>
</div>
<script type="text/javascript" src="js/helper_functions.js"></script>
<script type="text/javascript" src="js/buttons_And_Their_Functions.js"></script>
<script type="text/javascript" src="js/randomize_pg3.js"></script>
<script type="text/javascript" src="js/disk.js"></script>
<script type="text/javascript" src="js/game.js"></script>
<script type="text/javascript" src="js/session.js"></script>
<script type="text/javascript" src="js/tower.js"></script>
<script type="text/javascript" src="js/DOM_elements.js"></script>
<script type="text/javascript" src="js/audio_button.js"></script>
<script type="text/javascript" src="js/events.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>