-
Notifications
You must be signed in to change notification settings - Fork 4
/
survival.html
147 lines (146 loc) · 4.76 KB
/
survival.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
<!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="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/game.css" />
<link rel="stylesheet" href="./css/pyro.css" />
<link rel="stylesheet" href="./css/survival.css" />
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
<title>AstroMath | survival</title>
</head>
<body class="not-home">
<!--Loading Gif-->
<div class="loader">
<img src="./assets/gifs/loading.gif" alt="loading..." />
</div>
<!-- theme -->
<audio class="audio__theme" src="./assets/music/themeMusic.mp3"></audio>
<!--High Score-->
<audio class="audio__high" src="./assets/music/game/high_Score.mp3"></audio>
<!--Low Score-->
<audio class="audio__low" src="./assets/music/game/game_lost.mp3"></audio>
<!-- Game Music -->
<audio class="audio__game" src="./assets/music/game/explode.wav"></audio>
<audio class="audio__game" src="./assets/music/game/danger.mp3"></audio>
<!-- Fireworks -->
<audio
class="audio__fireworks"
src="./assets/music/game/firework.wav"
></audio>
<!-- header -->
<header class="header">
<h2 class="header__info header__info--time">120 s</h2>
<h2 class="header__info header__info--score">0</h2>
<h2 class="header__info header__info--sound">
<img
class="header__info--sound-icon settings__sound--icon"
src="./assets/images/soundon.svg"
alt="sound-toggle"
/>
</h2>
<h2 class="header__info header__info--level"></h2>
<h2 class="header__info header__info--exit">
<a href="./astro-math-levels.html" id="exit">Exit</a>
</h2>
</header>
<!-- main -->
<main class="main">
<!-- lives -->
<section class="life">
<img
data-value="1"
src="./assets/images/meteorlife.svg"
alt="Life"
class="life__img"
/>
<img
data-value="2"
src="./assets/images/meteorlife.svg"
alt="Life"
class="life__img"
/>
<img
data-value="3"
src="./assets/images/meteorlife.svg"
alt="Life"
class="life__img"
/>
</section>
<!-- start popup -->
<section class="popup--game">
<h2 class="popup__title">Get Ready</h2>
<p class="popup__description">Click Start to Play!</p>
<button class="popup__button popup__button--start">Start</button>
</section>
<!-- asteroids -->
<div class="main__asteroids none"></div>
<!-- results -->
<div class="result none">
<div class="pyro none">
<div class="before"></div>
<div class="after"></div>
</div>
<h2 class="result__title secondary-color">Results</h2>
<div class="result__details">
<div class="result__images">
<img
src="./assets/images/asteroid.png"
alt="asteroid"
class="result__img"
/>
<img
src="./assets/gifs/high_score.gif"
alt="high_score"
class="result__high-score none"
/>
<p class="result__quotes popup__description primary-color">20%</p>
</div>
<div class="result__data">
<div>
<p class="result__prescore popup__description primary-color">
Previous Score: <span class="secondary-color">2</span>
</p>
<p class="result__score popup__description primary-color">
Score: <span class="secondary-color">2</span>
</p>
</div>
</div>
</div>
<div class="result__buttons">
<button class="result__button popup__button" data-value="again">
Play Again
</button>
<a href="./astro-math-levels.html">
<button class="result__button popup__button exit__button">
Exit
</button></a
>
</div>
</div>
</main>
<!-- footer -->
<footer class="footer">
<button
class="footer__option footer__option1"
data-option="1"
data-value="1"
></button>
<button
class="footer__option footer__option2"
data-option="2"
data-value="1"
></button>
<button
class="footer__option footer__option3"
data-option="3"
data-value="1"
></button>
</footer>
<!-- js -->
<script type="module" src="./js/game.js"></script>
<script type="module" src="./js/survival_logic.js"></script>
</body>
</html>