forked from YadavAkhileshh/Alien-Invasion-Defense
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (127 loc) · 5.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Akhilesh Yadav">
<title>Alien Invasion Defense</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<link rel="stylesheet" href="Alien.css">
<audio id="backgroundMusic" src="background-music.wav" loop></audio>
<audio id="hitSound" src="hit-sound.wav"></audio>
<!-- New audio elements for power-up sounds -->
<audio id="healthBoostSound" src="health-boost-sound.m4a"></audio>
<audio id="speedBoostSound" src="speed-boost.m4a"></audio>
<audio id="shieldSound" src="shield.m4a"></audio>
</head>
<body>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<!-- Add the logo image -->
<img src="a.png" class="logo">
</a>
</nav>
</header>
<canvas id="gameCanvas"></canvas>
<div id="header">
<div id="gameInfo">
<i class="fas fa-star"></i> <span id="score">0</span> |
<i class="fas fa-level-up-alt"></i> <span id="level">1</span> |
<i class="fas fa-heart"></i> <span id="lives">3</span>
<!-- New span elements to display power-up timers -->
<span id="healthBoostTimer"></span>
<span id="speedBoostTimer"></span>
<span id="shieldTimer"></span>
</div>
<div id="instructions">
<div>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
<div class="slider"></div>
</label>
<span id="mode-label">Light Mode</span>
</div>
<div id="volumeControl">
<label for="volumeSlider"><i class="fas fa-volume-up"></i> Music Volume:</label>
<input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="0.5">
</div>
</div>
<h3 id="instructionsTitle">> How to Play:</h3>
<div id="instructionsList">
<p><i class="fas fa-arrow-left"></i> Use Left / Right Arrow keys or swipe to move</p>
<p><i class="fas fa-bolt"></i> Tap or press Spacebar to shoot</p>
<p><i class="fas fa-fighter-jet"></i> Destroy red alien ships</p>
<p><i class="fas fa-shield-alt"></i> Avoid aliens reaching the bottom</p>
<p><i class="fas fa-clock"></i> Survive as long as possible!</p>
<!-- New instructions for power-ups -->
<p><i class="fas fa-plus-circle"></i> Collect Health Boost power-ups to increase lives</p>
<p><i class="fas fa-tachometer-alt"></i> Collect Speed Boost power-ups to increase movement speed</p>
<p><i class="fas fa-shield-alt"></i> Collect Shield power-ups to become invincible</p>
</div>
</div>
</div>
<button id="startButton"><i class="fas fa-play"></i> Start Game</button>
<button id="pauseButton" style="display: none"><i class="fas fa-play"></i> Game paused</button>
<button id="restartButton" style="display: none"><i class="fas fa-redo"></i> Restart Game</button>
<div id="gameOver">
<i class="fas fa-exclamation-circle"></i> Game Over<br /><span id="finalScore"></span>
</div>
<div id="highScore">
High Score: <span id="highScoreValue">0</span>
</div>
<div id="highScore">High Score: <span id="highScoreValue">0</span></div>
<script src="Alien.js"></script>
<script src="darkMode.js"></script>
</body>
</html>