-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathindex.html
More file actions
269 lines (261 loc) · 13.4 KB
/
index.html
File metadata and controls
269 lines (261 loc) · 13.4 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 lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dungeon Hero</title>
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./static/stylesheets/game.css">
<script src="./src/Game.js"></script>
<script src="./src/Dice.js"></script>
<script src="./src/Readout.js"></script>
<script src="./src/Loot.js"></script>
<script src="./src/Player.js"></script>
<script src="./src/Monster.js"></script>
<script src="./src/Combat.js"></script>
<script src="./src/Rooms.js"></script>
<script src="./src/Shop.js"></script>
<script src="./src/Trap.js"></script>
<script src="./src/FlavourText.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="./src/interface.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<div id="helpButton" class="help-button">
<img src="./static/images/help-button.png" alt="help">
</div>
<div id='output' class="readout"></div>
<div class="character-sheet">
<span class='alignleft'>NAME:</span>
<span id='playerName' class='alignright'></span>
<div style="clear: both;"></div>
<div class="rule-break"></div>
<span class='alignleft'>HEALTH:</span>
<span id='playerHealth' class='alignright'></span>
<div style="clear: both;"></div>
<span class='alignleft'>ARMOUR CLASS:</span>
<span id='playerArmour' class='alignright'></span>
<div style="clear: both;"></div>
<span class='alignleft'>STRENGTH:</span>
<span id='playerStrength' class='alignright'></span>
<div style="clear: both;"></div>
<span class='alignleft'>DEXTERITY:</span>
<span id='playerDexterity' class='alignright'></span>
<div style="clear: both;"></div>
<div class="rule-break"></div>
<span class='alignleft'>WEAPON TYPE:</span>
<span id='playerWeapon' class='alignright'></span>
<div style="clear: both;"></div>
<span class='alignleft'>WEAPON DAMAGE:</span>
<span id='playerDmg' class='alignright'></span>
<div style="clear: both;"></div>
<span class='alignleft'>ARMOUR:</span>
<span id='armourType' class='alignright'></span>
<div style="clear: both;"></div>
<span class='alignleft'>GOLD:</span>
<span id='playerGold' class='alignright'></span>
<div style="clear: both;"></div>
<div class="player-portrait">
<img id='playerImage' class="player" src="./static/images/hero.png" alt="hero">
</div>
</div>
<div class="portrait">
<img id='monsterPortrait' src="./static/images/blank.png" alt="zombie">
</div>
<div class="monster-name">
<span id='monsterName' ></span>
</div>
<div class="monster-stats">
<span class='alignleft'>HEALTH:</span>
<span id='monsterHealth' class='alignright'></span>
<div style="clear: both;"></div>
<span class='alignleft'>ARMOUR:</span>
<span id='monsterArmor' class='alignright'></span>
<div style="clear: both;"></div>
<span class='alignleft'>DAMAGE:</span>
<span id='monsterDmg' class='alignright'></span>
<div style="clear: both;"></div>
<div class="rule-break"></div>
</div>
</div>
<div class="action-bar">
<div class="icon">
<input type="image" id="playerAttack" src="./static/images/icon-attack-color.png">
<span class="tooltiptext">Normal Attack</span>
</div>
<div class="icon">
<input type="image" id="insaneAttack" src="./static/images/insane-attack-color.png">
<span class="tooltiptext">Strong Attack</span>
</div>
<div class="icon">
<input type="image" id="parryAttack" src="./static/images/parry-attack-color.png">
<span class="tooltiptext">Quick Attack</span>
</div>
<div class="icon">
<input type="image" id="stunAttack" src="./static/images/stun-attack-color.png">
<span class="tooltiptext">Stun Attack</span>
</div>
<div class="icon">
<input type="image" id="healthPotion" src="./static/images/health-potion-color.png">
<span id="healthQuantity" class="quantity"></span>
<span class="tooltiptext">Health Potion</span>
</div>
<div class="icon">
<input type="image" id="dexPotion" src="./static/images/dex-potion-color.png">
<span id="dexQuantity" class="quantity"></span>
<span class="tooltiptext">Dexterity Potion</span>
</div>
<div class="icon">
<input type="image" id="strPotion" src="./static/images/str-potion-color.png">
<span id="strQuantity" class="quantity"></span>
<span class="tooltiptext">Strength Potion</span>
</div>
<div class="icon">
<input type="image" id="warCry" src="./static/images/warcry-color.png">
<span class="tooltiptext">War Cry</span>
</div>
</div>
<div id="helpModal" class="modal">
<div class="modal-content">
<div class="helpContent">
<div class="help-title">OBJECTIVE:</div>
<div>To succeed at Dungeon Hero, you must navigate through a series of rooms to reach the exit of the dungeon. Each room will
have either a monster to combat, or a potential trap to negotiate. Defeating the final 'boss' monster will earn your hero their
freedom! You will gather gold or equipment (loot) rewards after every room to upgrade your hero, and you may discover a way to
spend your gold and further increase your hero's power. Good luck (you'll need it)!</div>
<br>
<div class="help-title">COMBAT:</div>
<div>Dungeon Hero has a turn-based combat system where the player must select from a range of attacks, potions and abilities in
order to defeat the various monsters while trying to escape the dungeon. </div>
<br>
<div class="help-title">ACTIONS:</div>
<div class="small-icon"><img src="./static/images/icon-attack-color.png"> </div>
<span class="icon-help"> Normal Attack:</span> Strike with damage based on regular weapon range with strength modifier<br>
<div style="clear: both;"></div>
<div class="small-icon"><img src="./static/images/insane-attack-color.png"> </div>
<span class="icon-help"> Insane Attack:</span> More difficult to hit the monster, but with double the regular amount of damaget <br>
<div style="clear: both;"></div>
<div class="small-icon"><img src="./static/images/parry-attack-color.png"> </div>
<span class="icon-help"> Quick Attack:</span> Increases chance to block the monster, but own attack will be less effective<br>
<div style="clear: both;"></div>
<div class="small-icon"><img src="./static/images/stun-attack-color.png"> </div>
<span class="icon-help"> Stun Attack:</span> May cause the monster to be miss a turn but has a chance to break free each round<br>
<div style="clear: both;"></div>
<div class="small-icon"><img src="./static/images/health-potion-color.png"> </div>
<span class="icon-help"> Health Potion:</span> Magically treats wounds and increases current Health by 25 points<br>
<div style="clear: both;"></div>
<div class="small-icon"><img src="./static/images/str-potion-color.png"> </div>
<span class="icon-help"> Strength Potion:</span> Fills the hero with immense power and increases Strength by 5 points <br>
<div style="clear: both;"></div>
<div class="small-icon"><img src="./static/images/dex-potion-color.png"> </div>
<span class="icon-help"> Dexterity Potion:</span> Sharpens reflexes and speed to increase Dexterity by 5 points <br>
<div style="clear: both;"></div>
<div class="small-icon"><img src="./static/images/warcry-color.png"> </div>
<span class="icon-help"> WarCry:</span> Emit a bloodcurdling cry that upgrades Strength and Dexterity but delivers no damage<br>
<div style="clear: both;"></div>
<br>
<div id="helpReturn" class="returnButton"><span class="textButton">[Return to the Dungeon]</span></div>
</div>
</div>
</div>
<div id="winModal" class="modal">
<div class="modal-content">
<h1>YOU WIN</h1>
You killed the <span id='monsterName1'></span>
<br>Loot:<br><br>
<span id='roomLoot'></span><br><br>
<span class='textButton' id='takeLoot'>[Take Loot]</span>
<span class='textButton' id='nextRoom'>[Go to Next Room]</span>
</div>
</div>
<div id="loseModal" class="modal">
<div class="modal-content">
<h1>YOU DIED!</h1>
<img src="./static/images/stitch-8bit-01.png" alt="DEATH"><br><br>
<a href="index.html">
<input type="image" src="./static/images/play-again.png">
</a>
</div>
</div>
<div id="trapModal" class="modal">
<div class="modal-content">
<h1>TRAP ROOM?</h1>
<div class="chest-pic"><img src="./static/images/treasure-chest.png"></div>
<div class="shop-text">
<p>You enter a dark and dismal room that is dominated by a large chest sitting on a small plynth.<br>
You look over it and it is plain to see that the chest is clearly not locked. This troubles you ... it could contain loot, or it could be a trap!</P>
<p>What do you do?</p>
</div>
<div id="chestChoices" class="chest-choice">
<span class='textButton' id='openChest'>[Open Chest]</span>
<span class='textButton' id='skipChest'>[Go to Next Room]</span>
</div>
<div id="chestLoot" class="chest-loot">
<p>The chest contains loot! Equip what you want:</p>
<span id="chestLoot1"></span><span id="equip1" class="textButton"> --- [equip]</span><br>
<span id="chestLoot2"></span><span id="equip2" class="textButton"> --- [equip]</span><br>
<span id="chestLoot3"></span><span id="equip3" class="textButton"> --- [equip]</span><br>
</div>
<div id="chestTrap" class="chest-trap">
<br><p>THE CHEST IS A TRAP AND IT EXPLODES WHEN YOU LIFT THE LID!</p>
<p style="color:white;">You take 25 Health in Damage!</p>
</div>
<p id="chestNext" class="textButton">[Move to Next Room]</p>
</div>
</div>
<div id="winnerModal" class="modal">
<div class="modal-content">
<br><h1>YOU BEAT THE GAME!</h1>
<p>AGAINST ALL ODDS, YOU HAVE TRIUMPHED</p>
<p>Dungeon Hero has been proudly brought to you by:<br><br>
*** Cesare Camurani ***<br>
*** Darryl Banks ***<br>
*** Leon Cross ***<br>
*** Luca Francesco Eto ***<br><br></p>
<a href="index.html">
<input type="image" src="./static/images/play-again.png">
</a>
</div>
</div>
<div id="shopModal" class="modal">
<div class="modal-content">
<h1>TREASURE GOBLIN!</h1>
<div class="goblin-pic"><img src="./static/images/treasure-goblin.png"></div>
<div class="shop-text">
<span>A goblin wearing a bulky backpack appears in a puff of smoke before a large iron door.</span><br>
<span>"Well done on getting this far! I really thought you'd be dead by now!", he says. "I have a bunch of stuff that may help you battle whatever lies beyond this door ... but it'll cost ya!"</span>
<br><br><p>YOU HAVE <span id="goldCount"style="color: orange;"></span> REMAINING</p>
</div>
<div class="shop-list">
<span id='item1' class='alignleft shopItem'></span>
<span id='price1' class='alignright'></span>
<div style="clear: both;"></div>
<span id='item2' class='alignleft shopItem'></span>
<span id='price2' class='alignright'></span>
<div style="clear: both;"></div>
<span id='item3' class='alignleft shopItem'></span>
<span id='price3' class='alignright'>100 gold</span>
<div style="clear: both;"></div>
</div>
<div class="shop-list">
<span id='item4' class='alignleft shopItem'>Health Potion</span>
<span id='price4' class='alignright'></span>
<div style="clear: both;"></div>
<span id='item5' class='alignleft shopItem'>Strength Potion</span>
<span id='price5' class='alignright'></span>
<div style="clear: both;"></div>
<span id='item6' class='alignleft shopItem'>Dexterity Potion</span>
<span id='price6' class='alignright'></span>
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
<div class="rule-break"></div><br>
<span class='textButton' id='nextRoomFromShop'>[Proceed to Final Room]</span>
</div>
</div><br>
<!-- <button id="modalButton" type="button" name="button">modal</button> -->
</div>
</body>
</html>