-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (97 loc) · 4.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="description" content="Shadowhound - An immersive gaming experience" />
<meta name="keywords" content="Shadowhound, gaming, adventure, action, immersive" />
<meta name="author" content="Mario Kreitz" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Shadowhound" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<title>Shadowhound</title>
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Shadowhound - An Immersive Gaming Experience" />
<meta property="og:description" content="Dive into the world of Shadowhound, where adventure meets action." />
<meta property="og:image" content="https://mario-kreitz.dev/shadowhound/screenshot_menu.png" />
<meta property="og:url" content="https://shadowhound.mario-kreitz.dev/" />
<meta property="og:type" content="website" />
</head>
<body id="body">
<div
id="loading"
style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
padding: 20px 30px;
border-radius: 10px;
color: white;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
">
<h2>Loading...</h2>
</div>
<img
style="
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
object-fit: cover;
transform: translate(-50%, -50%);
z-index: -9999;
"
id="background-page"
src="./img/background/background_page.jpg"
alt="background_page"
loading="eager" />
<div id="main-menu" style="display: none">
<h1 id="game-title">Shadowhound</h1>
<div id="game-menu">
<button id="start-btn">Start Game</button>
<button id="help-btn">Help</button>
<div id="controls"></div>
</div>
</div>
<canvas id="canvas1"></canvas>
<img style="display: none" id="player" src="./img/player/player.png" alt="player" />
<img style="display: none" id="lives" src="./img/ui/lives.png" alt="player-head" />
<img style="display: none" id="layer-1" src="./img/background/forest/layer-1.png" alt="layer-1" />
<img style="display: none" id="layer-2" src="./img/background/forest/layer-2.png" alt="layer-2" />
<img style="display: none" id="layer-3" src="./img/background/forest/layer-3.png" alt="layer-3" />
<img style="display: none" id="layer-4" src="./img/background/forest/layer-4.png" alt="layer-4" />
<img style="display: none" id="layer-5" src="./img/background/forest/layer-5.png" alt="layer-5" />
<img style="display: none" id="enemy-fly" src="./img/enemies/flying/enemy_fly.png" alt="enemy_fly" />
<img style="display: none" id="enemy-plant" src="./img/enemies/ground/enemy_plant.png" alt="enemy_plant" />
<img
style="display: none"
id="enemy-spider-big"
src="./img/enemies/ceiling/enemy_spider_big.png"
alt="enemy_spider_big" />
<img style="display: none" id="fire" src="./img/particles/fire.png" alt="fire" />
<img style="display: none" id="collision" src="./img/particles/boom.png" alt="collision" />
<audio id="ui-click-sound" src="./audio/ui/ui-click-sound.mp3"></audio>
<audio id="ui-hover-sound" src="./audio/ui/ui-hover-sound.mp3"></audio>
<audio id="game-menu-music" src="./audio/game/game-menu-music.mp3"></audio>
<audio id="game-effect-1" src="./audio/game/game-effect-1.mp3"></audio>
<audio id="game-bg-music" src="./audio/game/game-bg-music.mp3"></audio>
<audio id="game-over-sound" src="./audio/game/game-over-sound.mp3"></audio>
<audio id="character-die-sound" src="./audio/character/character-die-sound.mp3"></audio>
<div id="help-modal" style="display: none"></div>
<span id="rotate-device-parent"
><img id="rotate-device" src="./img/background/background_page.jpg" alt="game background"
/></span>
<script type="module" src="/src/main.ts"></script>
<script>
window.addEventListener("orientationchange", function () {
window.scrollTo(0, 1);
});
</script>
</body>
</html>