-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (157 loc) · 6.16 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
<!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="style.css" />
<title>SKIER'S REVENGE</title>
</head>
<body>
<canvas id="canvas" width="1400" height="800"></canvas>
<div id="main-container">
<div id="buttons-container">
<button id="commands-btn" class="btn-with-sound">COMMANDS</button>
<button id="reset-btn" class="btn-with-sound">RESET</button>
<button id="pause-btn" class="btn-with-sound">PAUSE</button>
</div>
<div id="metrics-container">
<div id="lives-container">
<span class="text-span">LIVES:</span>
<div class="hearts-container">
<img class="life" src="Images/Home/Life_heart.png" alt="heart" />
<img class="life" src="Images/Home/Life_heart.png" alt="heart" />
<img class="life" src="Images/Home/Life_heart.png" alt="heart" />
<img class="life" src="Images/Home/Life_heart.png" alt="heart" />
</div>
</div>
<div id="yetis-killed-container">
<span>YETIS KILLED:</span>
<span class="count-yetis-killed"></span>
<img src="Images/Home/RIP_yetis.png" />
</div>
<div id="distance-container">
<span>DISTANCE:</span>
<span class="current-distance"></span>
<span>m</span>
</div>
</div>
</div>
<div id="commands-width-container">
<div id="commands-container" class="invisible">
<img src="Images/Home/Commands.png" alt="commands" />
<br />
<br />
<button id="close-commands-btn" class="btn-with-sound">CLOSE</button>
</div>
</div>
<div id="countdown-container">
<p id="countdown">START LINE</p>
</div>
<div id="home-background">
<div id="img-home-container">
<img src="Images/Home/Name_game.png" id="img-home-animation" alt="game logo"/>
</div>
<small id="game-info" class="invisible">Create by Marina Blasón Graviz in 2022 | Inspired on SkiFree game by Chris Pirih</small>
<div id="buttons-home-container">
<div id="buttons-flex-container">
<button id="instructions-btn" class="invisible btn-with-sound">HOW TO PLAY</button>
<button id="play-btn" class="invisible btn-with-sound">LET'S PLAY</button>
</div>
</div>
</div>
<div id="instructions-container" class="invisible">
<div id="instructions">
<h2>ARE YOU READY TO FINALLY TAKE REVENGE ON THE YETIS?</h2>
<br />
<br />
<ul>
<li>Avoid the obstacles, otherwise they will take lives away from you.</li>
<li>You can only jump rocks and cut trees.</li>
<li>Use the rainbow ramp to escape from the yetis and go further.</li>
<li>If any yeti appears, throw snowballs at them to kill them.</li>
<li>But watch out! If the yeti manages to catch you... it will eat you!</li>
</ul>
<br />
<br />
<img src="Images/Home/Commands.png" alt="commands" />
<br />
<br />
<button id="close-instructions-btn" class="btn-with-sound">CLOSE</button>
</div>
</div>
<div id="choose-level-width-container">
<div id="choose-level-container"class="invisible">
<div class="input-container">
<h2>ENTER YOUR NAME:</h2>
<input id="input" type="text" required></input>
</div>
<h2>CHOOSE THE DIFFICULTY:</h2>
<div class="level-btn-container">
<div>
<button id="easy-diff-btn" class="btn-with-sound">EASY</button>
<small>I’VE NEVER KILLED A YETI BEFORE</small>
</div>
<div>
<button id="normal-diff-btn" class="btn-with-sound">NORMAL</button>
<small>I USED TO KILL SOME YETIS</small>
</div>
<div>
<button id="hard-diff-btn" class="btn-with-sound">HARD</button>
<small>KILL YETIS = PIECE OF CAKE</small>
</div>
</div>
</div>
</div>
<div id="game-over-width-container">
<div id="game-over-container" class="invisible">
<h2>GAME OVER</h2>
<div id="columns-score">
<div id="current-score">
<h3>YOUR SCORE:</h3>
<div>
<span class="final-yetis-killed"></span>
<span>YETIS KILLED</span>
<img src="Images/Home/RIP_yetis.png" />
</div>
<div>
<span class="final-distance"></span>
<span class="meters">m</span>
<span>DISTANCE TRAVELED</span>
</div>
</div>
<div id="best-score">
<div id="name-user">
<div>
<h3>BEST SCORE BY:</h3>
</div>
<div class="span-name-input"></div>
</div>
<div>
<span class="best-yetis-killed"></span>
<span>YETIS KILLED</span>
<img src="Images/Home/RIP_yetis.png" />
</div>
<div>
<span class="best-distance"></span>
<span class="meters">m</span>
<span>DISTANCE TRAVELED</span>
</div>
</div>
</div>
<button id="play-again-btn" class="btn-with-sound">PLAY AGAIN</button>
</div>
</div>
<script src="JS/background-snow.js"></script>
<script src="JS/snowball.js"></script>
<script src="JS/obstacle.js"></script>
<script src="JS/dog-animation.js"></script>
<script src="JS/snowboard-animation.js"></script>
<script src="JS/home.js"></script>
<script src="JS/enemy.js"></script>
<script src="JS/player.js"></script>
<script src="JS/game.js"></script>
<script src="JS/constants.js"></script>
<script src="JS/script.js"></script>
</body>
</html>