-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (98 loc) · 4.04 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>WDI Project 1 --- Space Invaders</title>
<link rel="stylesheet" href="styles/main.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
<script src="scripts/app.js"></script>
</head>
<body>
<audio src="#" id="laser-blast"></audio>
<audio src="#" id="bomb-drop"></audio>
<audio src="#" id="bomb-explosion"></audio>
<audio src="#" id="alien-kill"></audio>
<audio src="#" id="main-theme" loop></audio>
<div class="title-screen">
<img src="assets/star-wars-logo.png" alt="star wars logo">
<a href="#" id='title-screen-start'>Start</a>
</div>
<header>
<img src="assets/star-wars-logo.png" alt="star wars logo">
</header>
<main>
<div class="container">
<div id="home" class="game-board">
<h2>Home</h2>
<form>
<p>Choose Difficulty:</p>
<select class="diff-selector">
<option value="1">Wookie</option>
<option value="2">Padawan</option>
<option value="3">Jedi Master</option>
</select>
</form>
<a href="#" id="play">Play</a>
<p>High Score: <span class="high-score"></span></p>
<a href="#" id="stats">Stats</a>
<a href="#" id="go-explainer">How to Play</a>
</div>
<div id="game-over" class="game-board">
<h2>Game Over</h2>
<pre id="game-result"></pre>
<p>Score: <span id="final-score"></span></p>
<p>Game Time: <span id="game-time"></span>s</p>
<p>High Score: <span class="high-score"></span></p>
<a href="#" id="play-again">Play Again</a>
<a href="#" class="go-home">Home</a>
</div>
<div id="player-stats" class="game-board">
<h2>Player Stats</h2>
<p>Games Played: <span class='game-stat'></span></p>
<p>Total Wins: <span class='game-stat'></span></p>
<p>Total Losses: <span class='game-stat'></span></p>
<p>High Score: <span class='game-stat'></span></p>
<p>Total Score: <span class='game-stat'></span></p>
<p>Total Alien Kills: <span class='game-stat'></span></p>
<p>Total Mothership Kills: <span class='game-stat'></span></p>
<p>Total Waves Fought: <span class='game-stat'></span></p>
<p>Total Ammo Used: <span class='game-stat'></span></p>
<p>Total Lives Lost: <span class='game-stat'></span></p>
<p>Total Population Loss: <span class='game-stat'></span></p>
<p>Time spent playing game: <span class='game-stat'></span>s</p>
<a href="#" class="go-home">Home</a>
</div>
<div id="game-explainer" class="game-board">
<h2>How to Play</h2>
<h3>Gamplay</h3>
<p>
Move side-to-side with the left and right arrow keys.
Press the spacebar to fire your gun.
</p>
<h3>Difficulty Levels</h3>
<p>🔹Wookie - A complete beginner</p>
<p>🔹Padawan - Untrained but strong with the force</p>
<p>🔹Jedi Master - Worthy of the Skywalker name</p>
<h3>Mission</h3>
<p>
Elimate all stormtroopers before they destroy the planet.
Each bomb they drop will kill thousands of people
and if you get hit you'll lose a life!
Your mission is to protect the Republic at all costs!!!
</p>
<a href="#" class="go-home">Home</a>
</div>
</div>
<div id="score-board" class="game-board">
<h2>Score</h2>
<p>Score: <span id="current-score"></span></p>
<p>Timer: <span id="game-timer"></span>s</p>
<p>Lives remaining: <span id="life-count"></span></p>
<p id="ammo-count"></p>
<p>Population: <span id="population-count"></span></p>
<p id="wave-count"></p>
<a href="#" id="quit-game">Quit Game</a>
</div>
</main>
</body>
</html>