-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·70 lines (63 loc) · 2.97 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Udacity Frogger, by Victoria</title>
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Main selection popup for choosing avatar, difficulty, and game duration -->
<div id="selectionPopup">
<h1>Are you ready for a</h1>
<h1>Udacious Frogger Game??</h1>
<hr>
<h2>Game Instructions</h2>
<h3>Collect as many gems and stars as you can without getting hit by the enemy bug cars. Use your keyboard arrows.</h3>
<hr>
<h2>Choose your avatar:</h2>
<img id="avatar0" class="avatarImg" onclick="avatarClick(this.id, 0)" src="images/char-boy.png" alt="boy avatar"/>
<img id="avatar1" class="avatarImg" onclick="avatarClick(this.id, 1)" src="images/char-cat-girl.png" alt="cat girl avatar" />
<img id="avatar2" class="avatarImg" onclick="avatarClick(this.id, 2)" src="images/char-horn-girl.png" alt="horn girl avatar"/>
<img id="avatar3" class="avatarImg" onclick="avatarClick(this.id, 3)" src="images/char-pink-girl.png" alt="pink girl avatar"/>
<img id="avatar4" class="avatarImg" onclick="avatarClick(this.id, 4)" src="images/char-princess-girl.png" alt="princess girl avatar"/>
<hr>
<h2>Take it easy, or challenge yourself:</h2>
<button id="easyButton" class="button difficultyButton" onclick="difficultyClick(this.id, 'Easy')">Easy</button>
<button id="mediumButtom" class="button difficultyButton" onclick="difficultyClick(this.id, 'Medium')">Medium</button>
<button id="hardButton" class="button difficultyButton" onclick="difficultyClick(this.id, 'Hard')">Hard</button>
<hr>
<h2>Quick game, or a few minutes to spare?</h2>
<button id="twoButton" class="button durationButton" onclick="timeClick (this.id, 'one')">1 Minute</button>
<button id="fourButton" class="button durationButton" onclick="timeClick (this.id, 'two')">2 Minutes</button>
<button id="sixButton" class="button durationButton" onclick="timeClick (this.id, 'three')">3 Minutes</button>
<hr>
<button id="startGame" class="button" onclick="startClick();">Start Game</button>
<hr>
<p id="signature">Created by Victoria Daphnée Jeffrey</p>
</div>
<!-- Game over popup, to display points summary -->
<div id="gameOverPopup">
<h1>Game Over!</h1>
<hr>
<div id="gameSummary">
<h2>You Scored</h2>
<h1 id="pointsSummary">0</h1>
<h2>Points</h2>
</div>
<hr>
<p id="signature">Victoria Daphnée Jeffrey</p>
</div>
<!-- Stats -->
<div id ="stats">
<div id="lives">Lives: 7</div>
<div id="timer">2:00</div>
<div id="points">Points: 0</div>
</div>
<script src="js/resources.js"></script>
<script src="js/app.js"></script>
<script src="js/engine.js"></script>
<div id="dificultyText">Dificulty: Easy</div>
<button id="resetButton" class="button" onclick="history.go(0)">Reset</button>
</body>
</html>