-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
49 lines (46 loc) · 1.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alien Defender</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
</head>
<body>
<div class="game-container">
<header>
<h1>Alien Defender</h1>
<button id="modeToggle" aria-label="Toggle dark/light mode">
<i class="fas fa-moon"></i>
</button>
<button id="muteButton" aria-label="Mute/Unmute Sound">
<i class="fas fa-volume-up"></i>
</button>
</header>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div id="scoreboard">
Earth: <span id="player1Score">0</span> | Aliens:
<span id="player2Score">0</span>
<div id="ballSpeedInput">
Enter the speed of ball in x and y <input value="10" type="number" placeholder="x" id="speedInputInX"> <input value="4" type="number" placeholder="Y" id="speedInputInY">
</div>
</div>
<div>
<button id="startGame">Start Game</button>
<button id="resetGame">Reset Game</button>
<button id="pauseGame">Pause Game</button>
</div>
<div id="instruction">
Move your spaceship with the mouse or arrow keys and prevent the meteor from hitting
the ground!
</div>
</div>
<!-- Background sound -->
<audio id="backgroundSound" src="sound/sound.mp3" loop></audio>
<script src="game.js"></script>
</body>
</html>