-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
67 lines (60 loc) · 1.9 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
<!DOCTYPE html>
<html>
<head>
<title>Retro Frogger</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- App CSS -->
<link rel="stylesheet" href="dist/css/app.css">
</head>
<body>
<!-- Header -->
<header>
<img src="dist/images/logo.png">
<div id="toggleMusic" class="toggle-music on">
Music
<span>On</span>
<span>Off</span>
</div>
</header>
<!-- /Header -->
<!-- Main Content -->
<main>
<div id="overlayStart" class="start overlay">
<div class="content">
<img src="dist/images/logo.png">
<a id="playGame" class="button primary">Play Now!</a>
</div>
<div class="grass"></div>
</div>
<div id="overlayInstructions" class="overlay instructions">
<div class="content">
<h2 class="heading">How to Play</h2>
<p>Press the up, down, left and right arrow keys on your keyboard to move the player. Do your best to get to the other side of the
road without being taken down by a bug!</p>
<p>You have 3 lives. Clearing a level is worth 600 points, and a gem of any color is worth 300.</p>
<p>Go get em!</p>
<a id="howToClose" class="button primary">Got it!</a>
</div>
</div>
<div id="overlayGameOver" class="overlay game-over">
<div class="content">
<h2 class="heading">Game Over</h2>
<div class="final-score">
Final Score: <span id="finalScore"></span>
</div>
<a id="playAgain" class="button primary">Play Again</a>
<img src="dist/images/char-boy-dead.png">
</div>
</div>
<div id="overlayCollision" class="overlay collision"></div>
</main>
<!-- /Main Content -->
<!-- Footer -->
<footer>
<a id="howToOpen" class="how-to-link">How to play</a>
</footer>
<!-- /Footer -->
<!-- App JS -->
<script src="dist/js/app.js"></script>
</body>
</html>