-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (112 loc) · 7.67 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Invaders Game</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <style>
body {
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
height: 100vh;
}
.btn-light:hover {
background-color: grey;
color: lightcyan;
opacity: 0.5;
}
#blackBtn:hover, #indigoBtn:hover, #blueBtn:hover, #greyBtn:hover, #greenBtn:hover{
color: yellow;
}
</style>
</head>
<body>
<div style="position: relative;">
<p
style="position: absolute; z-index: 10; color: white; left: 1%;
top: 1%; margin: 0;"
><span>Score: </span><span id="scoreEl">0</span>
</p>
<p
style="position: absolute; z-index: 10; color: white; left: 1%;
top: 5%; margin: 0;"
><span>Level: </span><span id="levelEl">1</span>
</p>
<p
style="position: absolute; z-index: 10; color: white; left: 1%;
top: 9%; margin: 0;"
><span>Sound: </span><span id="soundEl">On</span>
</p>
<p
style="position: absolute; z-index: 10; color: white; right: 1%;
top: 1%; margin: 0;"
><span>Lives: </span><span id="livesEl">N/A</span>
</p>
<button style="position: absolute; z-index: 10; width: 4em; height: 2em; top: 5%; right: 1%" type="button" class="btn btn-outline-light d-flex justify-content-center
align-items-center" id="menuBtn">Menu</button>
<div class="d-flex flex-column position-absolute top-50 start-50 translate-middle w-75 h-50 align-items-center justify-content-center">
<h1 style="color: white;" class="d-none align-self-center" id="gameOver">Game Over</h1>
<h1 style="color: white;" class="d-none align-self-center" id="gameWon"><b>You Won!</b></h1>
<h2 style="color: white;" class="d-none align-self-center" id="chooseDiff"><b>Choose Difficulty:</b></h2>
<div class="d-none card text-bg-dark mb-3" id="helpCard">
<div class="card-body">
<h5 class="card-title text-center mb-4">Instructions:</h5>
<p class="card-text">- Press Left Arrow button to move left or Right Arrow button to move right. <br>
- To shoot at enemies, press Space. To shoot projectiles in a stream, press and hold Space button.<br>
- There are 12 levels in the game, each spawning new type of enemy ships that shoot at the player. Higher levels also bring faster and more numerous asteroids that can destroy the player. Planets however are not dangerous to the player.<br>
- Every 1 minute, the game proceeds to a new level. <br>
- At levels 6 and 12 bosses will spawn. When second and final boss is defeated, player wins the game.<br>
- If player loses all remaining lives before finishing the game, the game is over. <br>
- At the start of each game, player chooses difficulty to play at. At Easy difficulty, player will have 6 lives, at Medium 4 lives, and at Hard only 2 lives.<br>
- To choose spaceship design, background color, or switch sounds on/off, select Options from the Menu interface.</p>
</div>
</div>
<div class="d-none card text-bg-dark mb-3 overflow-y-scroll overflow-x-scroll w-25" id="scoresCard">
<div class="card-body">
<h5 class="card-title text-center mb-4">High Scores</h5>
<ol id="scoreList">
</ol>
</div>
</div>
<form class="d-none d-flex flex-column w-25 mb-4" id="usernameForm">
<div class="mb-3 d-flex flex-column">
<label for="usernameInput" class="form-label text-white align-self-center fs-5">Enter your username:</label>
<input type="text" class="form-control bg-dark text-white mb-2" id="usernameInput">
<div class="d-none text-warning text-center" id="missingName">Before starting, please enter your name above.</div>
</div>
</form>
<div class="d-block btn-group-vertical btn-group-lg w-25" role="group" aria-label="Large button group" id="menuUI">
<button type="button" class="d-block btn btn-outline-light" id="newGameBtn">New Game</button>
<button type="button" class="d-none btn btn-outline-light" id="continueBtn">Continue</button>
<button type="button" class="d-block btn btn-outline-light" id="optionsBtn">Options</button>
<button type="button" class="d-block btn btn-outline-light" id="helpBtn">Help</button>
<button type="button" class="d-none btn btn-outline-light" id="backgroundBtn">Background</button>
<button type="button" class="d-none btn btn-outline-light" id="soundBtn">Sound On/Off</button>
<button type="button" class="d-none btn btn-outline-light" id="spaceshipBtn">Spaceship Design</button>
<button type="button" class="d-block btn btn-outline-light" id="highScoresBtn">High Scores</button>
<button type="button" class="d-none btn btn-outline-light" id="quitBtn">Quit</button>
<button style="background-color: black;" type="button" class="d-none btn btn-outline-light" id="blackBtn">Black(default)</button>
<button style="background-color: #4B0082;" type="button" class="d-none btn btn-outline-light" id="indigoBtn">Indigo</button>
<button style="background-color: #191970;" type="button" class="d-none btn btn-outline-light" id="blueBtn">Midnight Blue</button>
<button style="background-color: #2F4F4F;" type="button" class="d-none btn btn-outline-light" id="greyBtn">Dark Slate Grey</button>
<button style="background-color: #006400;" type="button" class="d-none btn btn-outline-light" id="greenBtn">Dark Green</button>
<button type="button" class="d-none btn btn-outline-light" id="design1Btn"><img src="./spaceshipImages/spaceship1.png" width="50" height="50"></button>
<button type="button" class="d-none btn btn-outline-light" id="design2Btn"><img src="./spaceshipImages/spaceship2.png" width="50" height="50"></button>
<button type="button" class="d-none btn btn-outline-light" id="design3Btn"><img src="./spaceshipImages/spaceship3.png" width="50" height="50"></button>
<button type="button" class="d-none btn btn-outline-light" id="easyBtn">Easy</button>
<button type="button" class="d-none btn btn-outline-light" id="mediumBtn">Medium</button>
<button type="button" class="d-none btn btn-outline-light" id="hardBtn">Hard</button>
<button type="button" class="d-none btn btn-outline-light" id="backBtnMain">Back</button>
<button type="button" class="d-none btn btn-outline-light" id="backBtnOptions">Back</button>
</div>
</div>
<canvas></canvas>
</div>
<script src="script.js"></script>
</body>
</html>