-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
264 lines (235 loc) · 11.7 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
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
<!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">
<title>Sharkie</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="./img/favicon.png" type="image/x-icon">
<script src="./classes/drawable-object.class.js"></script>
<script src="./classes/movable-object.class.js"></script>
<script src="./classes/background/background-object.class.js"></script>
<script src="./classes/background/barrier.class.js"></script>
<script src="./classes/background/background.class.js"></script>
<script src="./classes/pufferfish.class.js"></script>
<script src="./classes/jellyfish/jellyfish.class.js"></script>
<script src="./classes/jellyfish/jellyfish-normal.class.js"> </script>
<script src="./classes/jellyfish/jellyfish-dangerous.class.js"></script>
<script src="./classes/world.class.js"></script>
<script src="./classes/keyboard.class.js"></script>
<script src="./classes/character.class.js"></script>
<script src="./classes/endboss.class.js"></script>
<script src="./classes/statusbars/picture.class.js"></script>
<script src="./classes/statusbars/dynamic-statusbar.class.js"></script>
<script src="./classes/collectable-objects/collectable-object.class.js"></script>
<script src="./classes/collectable-objects/coin.class.js"></script>
<script src="./classes/collectable-objects/poison.class.js"></script>
<script src="./classes/collectable-objects/animated-poison.class.js"></script>
<script src="./classes/bubble.class.js"></script>
<script src="./classes/level.class.js"></script>
<script src="./levels/level1.js"></script>
<script src="./levels/level2.js"></script>
<script src="./js/main.js"></script>
<script src="./js/game.js"></script>
</head>
<body onload="showStartScreen(1,true)">
<div class="blur">
<h1>SharKie</h1>
<div id="wrapper" class="wrapper">
<!-- canvas -->
<canvas id="canvas" width="720" height="480"></canvas>
<div id="settings-on-canvas">
<button class="btn">
<img id="fullscreen-1" onclick="toggleFullscreen(-1)" style="display: block;">
</button>
<button class="btn">
<img id="volume-1" onclick="toggleVolume(-1)" style="display: block;">
</button>
</div>
<!-- startscreen level1 -->
<div id="level1-screen" class="startscreen">
<p class="p-32 m-0">Sharkie is the friendliest shark ever, but he lives in a hostile environment.
<br><br>All the other
animals he encounters are deathly dangerous for him. Luckily, he found out how to take advantage of
the pollution of the sea to defend himself. <br><br>
Help Sharkie to fight his enemies and survive!
</p>
<div class="vertical-btn-group">
<button class="btn w-240" onclick="showInstructions(1)">Instructions</button>
<button class="btn w-240" onclick="startLevel(1)">Start game</button>
</div>
<div class="settings">
<button class="btn w-60">
<img id="fullscreen1" onclick="toggleFullscreen(1)" style="display: block;">
</button>
<button class="btn w-60">
<img id="volume1" onclick="toggleVolume(1)" style="display: block;">
</button>
</div>
</div>
<!-- startscreen level2 -->
<div id="level2-screen" class="startscreen">
<p class="p-32 m-0">
In this level, Sharkie meets even more dangerous animals. Be careful, to stay away from them and
fight them from a safe distance! <br><br>
With the coins collected in the previous level, Sharkie got some cures to improve his health.
</p>
<div class="vertical-btn-group">
<button class="btn w-240" onclick="showInstructions(2)">
Instructions
</button>
<button class="btn w-240" onclick="startLevel(2)">
Start level
</button>
</div>
<div class="settings">
<button class="btn w-60">
<img id="fullscreen2" onclick="toggleFullscreen(2)" style="display: block;">
</button>
<button class="btn w-60">
<img id="volume2" onclick="toggleVolume(2)" style="display: block;">
</button>
</div>
</div>
<!-- instruction screen -->
<div id="instruction-screen" class="startscreen t-center">
<div class="key-wrapper">
<div class="flex-center">
<div class="t-center" style="width:190px">
<button class="w-60">ᐃ</button><br>
<button class="w-60">ᐊ</button>
<button class="w-60">ᐁ</button>
<button class="w-60">ᐅ</button>
</div>
<span class="pt-8 m-0">move Sharkie</span><br>
</div>
<div class="flex-center">
<button class="w-120">space</button>
<span class="t-center pt-8 m-0">fin slap</span><br>
</div>
<div class="flex-center">
<button class="w-60">b</button>
<span class="t-center pt-8 m-0">blow bubbles</span>
</div>
<div class="flex-center">
<button class="w-60">v</button>
<span class="t-center pt-8 m-0">blow poisoned bubbles</span>
</div>
</div>
<div class="vertical-btn-group">
<button class="btn w-240" onclick="showHelp()">
Help
</button>
<button id="start-btn" class="btn w-240">
Start level
</button>
</div>
<div class="settings">
<button class="btn w-60">
<img id="fullscreen0" onclick="toggleFullscreen(0)" style="display: block;">
</button>
<button class="btn w-60">
<img id="volume0" onclick="toggleVolume(0)" style="display: block;">
</button>
</div>
</div>
<!-- help screen -->
<div id="help-screen" class="helpscreen">
<div class="overlay">
<h2 class="t-center">How can Sharkie fight his enemies?</h2>
<div class="d-flex align-center">
<img src="./img/cut-pufferfish.png" width="70px" display="block">
<p class="m-12"> Slap pufferfish with Sharkie's fin to get rid of them. Sharkie must be directly
in front of
or
behind the enemey to hit it.
</p>
</div>
<div class="d-flex align-center">
<img src="./img/cut-2-jellyfish.png" width="70px" display="block">
<p class="m-12"> Jellyfish are really dangerous, so keep your distance! The only way to fight
them is to trap
them in a bubble (no poison needed).
</p>
</div>
<div class="d-flex align-center">
<img src="./img/cut-endboss.png" width="70px" display="block">
<p class="m-12"> It will take 3 poisoned bubbles to kill the killer whale. Be careful not to
waste poison on
other enemies or to bubble from far away!
</p>
</div>
<div class="btn-group">
<div class="t-center">
<button class="btn w-240 mt-40" onclick="hideHelp()">
Back
</button>
</div>
<div class="t-center">
<button class="btn w-240 mt-40" onclick="showLegal()">
About
</button>
</div>
</div>
</div>
</div>
<!-- legal screen -->
<div id="legal-screen" class="helpscreen">
<div class="overlay">
<h2 class="t-center">Impressum</h2>
<div class="d-flex justify-space">
<div>
<p>Angaben gemäß § 5 TMG</p>
<p>Sabine Detering <br>
Heideweg 14A<br>
76149 Karlsruhe <br>
</p>
</div>
<div>
<p> <strong> Vertreten durch:</strong> <br>
Sabine Detering<br>
</p>
<p><strong>Kontakt: </strong><br>
Telefon: 0152-53458810<br>
E-Mail: <a href='mailto:[email protected]'>[email protected]</a></p>
</div>
</div>
<p> Website Impressum erstellt durch <a
href="https://www.impressum-generator.de">impressum-generator.de</a> von der <a
href="https://www.kanzlei-hasselbach.de/" rel="nofollow">Kanzlei Hasselbach</a></p>
<div class="t-center">
<button class="btn w-240 mt-40" onclick="hideLegal()">
Back
</button>
</div>
</div>
</div>
<!-- win screen -->
<div id="win-screen" class="endscreen">
<img id="img-win" src="./img/win-screen-resized.png">
<div id="collected-coins">
<p id="coin-text" class="p-16 m-0"></p>
<img src="./img/4.Marcadores/1. Coins/1.png" style="width:50px;height:50px;">
</div>
<div class="btn-group">
<button id="restart-btn" class="btn w-240 mt-40">Restart level</button>
<button id="next-btn" class="btn w-240 mt-40">Next level</button>
</div>
</div>
<!-- loose screen -->
<div id="loose-screen" class="endscreen">
<img id="img-loose" src="./img/6.Botones/Tittles/Game Over/Recurso 13.png">
<button id="again-btn" class="btn w-240 mt-40" onclick="">Try again</button>
</div>
</div>
<!-- undertitel instructions -->
<div id="small-instructions">
<span> arrows: move Sharkie</span>
<span> space: fin slap</span>
<span> b: bubble</span>
<span> v: poisoned bubble</span>
</div>
</div>
</body>
</html>