-
Notifications
You must be signed in to change notification settings - Fork 0
/
game.html
79 lines (75 loc) · 3.64 KB
/
game.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
<!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" />
<link rel="apple-touch-icon" sizes="180x180" href="game/favicon_io/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="game/favicon_io/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="game/favicon_io/favicon-16x16.png" />
<link rel="manifest" href="game/favicon_io/site.webmanifest" />
<title>Pierre Neveu - Scary Things</title>
<link rel="stylesheet" href="style/style.css" />
<link rel="stylesheet" href="game/style/game.css" />
</head>
<body class="bg">
<div class="wrapper">
<header id="header__nav"></header>
<div class="main container-borders container-bg toggle-target" data-aos="zoom-in">
<div id="wrapper-game" class="pos-relative bg-dark-night">
<div id="overlay" class="overlay pos-absolute">
<div class="overlay-row pos-relative">
<div id="ghost-icon" class="overlay-item side-item hidden"><i class="fa-solid fa-ghost"></i></div>
<div id="result" class="central-item hidden"></div>
<div id="score-counter" class="overlay-item side-item hidden">0</div>
</div>
<div class="overlay-row pos-relative">
<div id="title" class="deprecated pos-absolute">Scary Things...</div>
<div id="menu">
<button id="start" class="zoom-loop">NEW GAME</button>
</div>
</div>
<div class="overlay-row pos-relative">
<div class="overlay-item side-item">
<button type="button" id="pause-button" class="hidden"><i class="fa-regular fa-circle-pause"></i></button>
</div>
<div class="overlay-item central-item pos-relative">
<div id="instruction" class="hidden pos-absolute">You better run!</div>
<button type="button" id="question-mark-button">
<i class="fa-regular fa-circle-question"></i>
</button>
</div>
<div class="overlay-item side-item">
<button type="button" id="fullscreen-button" class="pos-relative"><i id="fullscreen-icon" class="fa-solid fa-expand"></i></button>
</div>
</div>
<div id="progress">
<div class="progress-bar"></div>
</div>
<div id="arrows" class="pos-absolute">
<div class="arrow"><i id="ArrowLeft" class="fa-solid fa-caret-left"></i></div>
<div class="arrow">
<div class="arrow"><i id="ArrowUp" class="fa-solid fa-caret-up"></i></div>
<div class="arrow"><i id="ArrowDown" class="fa-solid fa-caret-down"></i></div>
</div>
<div class="arrow"><i id="ArrowRight" class="fa-solid fa-caret-right"></i></div>
</div>
</div>
<div class="container-game pos-relative">
<canvas id="canvas-bg" class="pos-absolute" width="768" height="432"></canvas>
<canvas id="canvas-anim" class="pos-absolute" width="768" height="432"></canvas>
</div>
</div>
</div>
<footer>
<nav id="footer__nav"></nav>
</footer>
</div>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script defer src="script/animate.js" type="module"></script>
<script src="https://kit.fontawesome.com/0adb2859cd.js" crossorigin="anonymous"></script>
<script src="script/createNavigation.js" type="module"></script>
<script src="script/languageHandler.js" type="module"></script>
<script src="game/game.js" type="module"></script>
</body>
</html>