-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (132 loc) · 7.63 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Frogger: Arcade Game</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="introduction">
<div class="intro-container">
<div class="intro-item">
<h2>How To Play</h2>
<div class="intro-desc">
<p>Get the player across to the swimming pool to earn points, avoid any contact with the bugs and move around the rocks that are on your way.</p>
<p class="question">How many times can you cross over? </p>
<p class="question">How many points can you score?</p>
</div>
</div>
<div class="intro-item">
<h2>Buttons</h2>
<div class="arrow-grid">
<div class="up"><img src="images/Arrow_Up.png" alt="Up" class="keys">
</div>
<div class="left"><img src="images/Arrow_Left.png" alt="Left" class="keys">
</div>
<div class="down"><img src="images/Arrow_Down.png" alt="Down" class="keys">
</div>
<div class="right"><img src="images/Arrow_Right.png" alt="Right" class="keys">
</div>
<div class="arrows-desc">Move Player</div>
</div>
<div class="buttons-grid">
<div class="star"><img src="images/S.png" alt="Star" class="keys">
</div>
<div class="star-desc">Activates Star</div>
</div>
<div class="buttons-grid">
<div class="restart"><img src="images/R.png" alt="Restart" class="keys">
</div>
<div class="restart-desc">Restart the Game</div>
</div>
</div>
</div>
<div id="player-selection">
<h2 id="chars-title">Select your Player</h2>
<button class="chars" onclick="selectChar('images/char-boy.png')" onmouseover="charHover()"><img src="images/char-boy.png" alt="boy character">
<span class="char-names"><br><em>Boy</em>
</span>
</button>
<button class="chars" onclick="selectChar('images/char-cat-girl.png')" onmouseover="charHover()"><img src="images/char-cat-girl.png" alt="cat girl character">
<span class="char-names"><br><em>Cat Girl</em>
</span>
</button>
<button class="chars" onclick="selectChar('images/char-horn-girl.png')" onmouseover="charHover()"><img src="images/char-horn-girl.png" alt="horn girl character">
<span class="char-names"><br><em>Horn Girl</em>
</span>
</button>
<button class="chars" onclick="selectChar('images/char-pink-girl.png')" onmouseover="charHover()"><img src="images/char-pink-girl.png" alt="pink girl character">
<span class="char-names"><br><em>Pink Girl</em>
</span>
</button>
<button class="chars" onclick="selectChar('images/char-princess-girl.png')" onmouseover="charHover()"><img src="images/char-princess-girl.png" alt="princess girl character">
<span class="char-names"><br><em>Princes</em>
</span>
</button>
<div>
<h4 id="player-selected"></h4>
<button onclick="startGame()" class="play-game">Play Game</button>
</div>
</div>
<div id="game-info">
<h2 class="info-head">Score System</h2>
<div class="info">
<div class="info-items crosses">
<h4>Crosses</h4>
<div class="list-items">For every succesful Cross 10 points will be rewarded.</div>
<div class="list-items">However, if you have crossed more than:
<p class="justify"> <strong>50 times</strong> - each cross rewards <strong>20</strong> points.</p>
<p class="justify"><strong>100 times</strong> - each cross rewards <strong>30</strong> points.</p>
<p class="justify"><strong>150 times</strong> - each cross rewards <strong>40</strong> points.</p>
</div>
</div>
<div class="info-items gems ">
<h4>Gems</h4>
<div class="justify">Gems can pop up on your way, don't ignore them. Collect as many as possible to increase your Score.</div>
<div class="info-list">
<div class="info-list-items"><img src="images/Gem-Blue.png" alt="Blue Gem"> <span class="gems">Blue Gem: 100 points</span>
</div>
<div class="info-list-items"><img src="images/Gem-Green.png" alt="Green Gem"> <span class="gems">Green Gem: 200 points</span>
</div>
<div class="info-list-items"><img src="images/Gem-Orange.png" alt="Orange Gem"> <span class="gems">Orange Gem: 400 points</span>
</div>
</div>
</div>
<div class="info-items streak">
<h4>Streak</h4>
<div class="list-items">Don't let them bite you. Keep your crosses' Streak as high as possible to multiple the score you earn.</div>
<div class="list-items">Streak higher than:
<p class="justify"><strong>20</strong> double the points you earn.</p>
<p class="justify"><strong>30</strong> triples the points you earn.</p>
<p class="justify"><strong>50</strong> quadruples the points you earn.</p>
</div>
</div>
<div class="info-items keep-alive">
<h4>Stay Alive</h4>
<div class="keep-alive-grid">
<div class="ka-desc justify">Besides the Gems, Hearts and Stars will also come your way. Collect them to live longer.</div>
<div class="info-list">
<div class="info-list-items ka justify"><img src="images/Heart.png" alt="Heart"> <span class="gems heart">Once your Heart gets to 0 you cannot be bitten by a bug anymore. If so Game Over!! </span>
</div>
<div class="info-list-items ka justify"><img src="images/Star.png" alt="Star"> <span class="gems">Star gives you a temporary invincibility. For 5 seconds Bugs won't be able to bite you and you will be able to climb over the rocks. Use it wisely. Hint: There can be too many rocks on your way!!!</span>
</div>
<!--<div class="ka">Use the arrow key to move player. Scroll up to see all buttons functions.-->
</div>
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="credit">Udacity Project - Frogger: Arcade Game by <a href="https://github.com/stefanomonteiro/Frogger-Arcade-Game">Stefano Monteiro</a></div>
<div class="tags">
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />
</a>
</div>
</footer>
</div>
<script src="js/resources.js"></script>
<script src="js/app.js"></script>
<script src="js/engine.js"></script>
</body>
</html>