Skip to content

Commit 6f1aac2

Browse files
Nivedita-coderNivedita-coder
authored
Merge pull request Nivedita-coder#53 from DhruvMehta-code/main
add space invaders with basic javascript
2 parents 1768e88 + 7cc9f20 commit 6f1aac2

5 files changed

Lines changed: 402 additions & 0 deletions

File tree

‎Space_Invaders/Picture/alien-monster.png‎

3.71 KB
Loading

‎Space_Invaders/Picture/rocket.png‎

6.83 KB
Loading

‎Space_Invaders/app.js‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
document.addEventListener("DOMContentLoaded", () => {
2+
const squares = document.querySelectorAll(".grid div");
3+
const resultDisplay = document.querySelector("#result");
4+
let width = 15;
5+
let currentShooterIndex = 202;
6+
let currentInvaderIndex = 0;
7+
let alienInvadersTakenDown = [];
8+
let result = 0;
9+
let direction = 1;
10+
let invaderId;
11+
12+
const alienInvaders = [
13+
0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
14+
15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
15+
30, 31, 32, 33, 34, 35, 36, 37, 38, 39
16+
17+
];
18+
alienInvaders.forEach((invader) =>
19+
squares[currentInvaderIndex + invader].classList.add("invader")
20+
);
21+
squares[currentShooterIndex].classList.add("shooter");
22+
23+
function moveShooter(e) {
24+
squares[currentShooterIndex].classList.remove("shooter");
25+
switch (e.keyCode) {
26+
case 37:
27+
if (currentShooterIndex % width !== 0) {
28+
currentShooterIndex -= 1;
29+
}
30+
break;
31+
case 65:
32+
if (currentShooterIndex % width !== 0) {
33+
currentShooterIndex -= 1;
34+
}
35+
break;
36+
case 39:
37+
if (currentShooterIndex % width < width - 1) {
38+
currentShooterIndex += 1;
39+
}
40+
break;
41+
case 68:
42+
if (currentShooterIndex % width < width - 1) {
43+
currentShooterIndex += 1;
44+
}
45+
break;
46+
}
47+
squares[currentShooterIndex].classList.add("shooter");
48+
}
49+
document.addEventListener("keydown", moveShooter);
50+
51+
function moveInvader() {
52+
const leftEdge = alienInvaders[0] % width === 0
53+
const rightEdge = alienInvaders[alienInvaders.length - 1] % width === width - 1;
54+
55+
if ((leftEdge && direction === -1) || (rightEdge && direction === 1)) {
56+
direction = width;
57+
}
58+
else if (direction === width) {
59+
if (leftEdge) direction = 1;
60+
else direction = -1;
61+
}
62+
for (let i = 0; i <= alienInvaders.length - 1; i++) {
63+
squares[alienInvaders[i]].classList.remove("invader")
64+
}
65+
for (let i = 0; i <= alienInvaders.length - 1; i++) {
66+
alienInvaders[i] += direction;
67+
}
68+
for (let i = 0; i <= alienInvaders.length - 1; i++) {
69+
if (!alienInvadersTakenDown.includes(i)) {
70+
squares[alienInvaders[i]].classList.add("invader")
71+
}
72+
}
73+
74+
if (squares[currentShooterIndex].classList.contains("invader", "shooter")) {
75+
resultDisplay.textContent = "Game-Over"
76+
squares[currentShooterIndex].classList.add("boom")
77+
clearInterval(invaderId)
78+
}
79+
for (let i = 0; i <= alienInvaders.length - 1; i++) {
80+
if (alienInvaders[i] > (squares.length - (width - 1))) {
81+
resultDisplay.textContent = "Game-Over";
82+
clearInterval(invaderId)
83+
}
84+
}
85+
if (alienInvadersTakenDown.length === alienInvaders.length) {
86+
resultDisplay.textContent = "Winner"
87+
clearInterval(invaderId)
88+
}
89+
}
90+
invaderId = setInterval(moveInvader, 500)
91+
92+
function shoot(e) {
93+
let laserId
94+
let currentLaserIndex = currentShooterIndex
95+
96+
function moveLaser() {
97+
squares[currentLaserIndex].classList.remove("laser")
98+
currentLaserIndex -= width;
99+
squares[currentLaserIndex].classList.add('laser')
100+
if (squares[currentLaserIndex].classList.contains("invader")) {
101+
squares[currentLaserIndex].classList.remove('laser')
102+
squares[currentLaserIndex].classList.remove('invader')
103+
squares[currentLaserIndex].classList.add('boom')
104+
105+
setTimeout(() => squares[currentLaserIndex].classList.remove('boom'), 250)
106+
clearInterval(laserId)
107+
108+
const alienTakenDown = alienInvaders.indexOf(currentLaserIndex)
109+
alienInvadersTakenDown.push(alienTakenDown)
110+
result++
111+
resultDisplay.textContent = result
112+
}
113+
if (currentLaserIndex < width) {
114+
clearInterval(laserId)
115+
setTimeout(() => squares[currentLaserIndex].classList.remove('laser'), 100)
116+
}
117+
}
118+
// document.addEventListener("Keyup", e => {
119+
// if (e.keyCode === 32) {
120+
// laserId = setInterval(moveLaser, 100)
121+
// }
122+
// })
123+
switch (e.keyCode) {
124+
case 32:
125+
laserId = setInterval(moveLaser, 100)
126+
break;
127+
}
128+
}
129+
document.addEventListener("keyup", shoot)
130+
131+
132+
133+
134+
135+
136+
});

‎Space_Invaders/game.html‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link href="style.css" rel="stylesheet" type="text/css" />
7+
<script src="app.js"></script>
8+
<title>Space-Invaders</title>
9+
</head>
10+
<body>
11+
<h3>Score:<span id="result"></span></h3>
12+
<div class="grid">
13+
<div></div>
14+
<div></div>
15+
<div></div>
16+
<div></div>
17+
<div></div>
18+
<div></div>
19+
<div></div>
20+
<div></div>
21+
<div></div>
22+
<div></div>
23+
<div></div>
24+
<div></div>
25+
<div></div>
26+
<div></div>
27+
<div></div>
28+
<div></div>
29+
<div></div>
30+
<div></div>
31+
<div></div>
32+
<div></div>
33+
<div></div>
34+
<div></div>
35+
<div></div>
36+
<div></div>
37+
<div></div>
38+
<div></div>
39+
<div></div>
40+
<div></div>
41+
<div></div>
42+
<div></div>
43+
<div></div>
44+
<div></div>
45+
<div></div>
46+
<div></div>
47+
<div></div>
48+
<div></div>
49+
<div></div>
50+
<div></div>
51+
<div></div>
52+
<div></div>
53+
<div></div>
54+
<div></div>
55+
<div></div>
56+
<div></div>
57+
<div></div>
58+
<div></div>
59+
<div></div>
60+
<div></div>
61+
<div></div>
62+
<div></div>
63+
<div></div>
64+
<div></div>
65+
<div></div>
66+
<div></div>
67+
<div></div>
68+
<div></div>
69+
<div></div>
70+
<div></div>
71+
<div></div>
72+
<div></div>
73+
<div></div>
74+
<div></div>
75+
<div></div>
76+
<div></div>
77+
<div></div>
78+
<div></div>
79+
<div></div>
80+
<div></div>
81+
<div></div>
82+
<div></div>
83+
<div></div>
84+
<div></div>
85+
<div></div>
86+
<div></div>
87+
<div></div>
88+
<div></div>
89+
<div></div>
90+
<div></div>
91+
<div></div>
92+
<div></div>
93+
<div></div>
94+
<div></div>
95+
<div></div>
96+
<div></div>
97+
<div></div>
98+
<div></div>
99+
<div></div>
100+
<div></div>
101+
<div></div>
102+
<div></div>
103+
<div></div>
104+
<div></div>
105+
<div></div>
106+
<div></div>
107+
<div></div>
108+
<div></div>
109+
<div></div>
110+
<div></div>
111+
<div></div>
112+
<div></div>
113+
<div></div>
114+
<div></div>
115+
<div></div>
116+
<div></div>
117+
<div></div>
118+
<div></div>
119+
<div></div>
120+
<div></div>
121+
<div></div>
122+
<div></div>
123+
<div></div>
124+
<div></div>
125+
<div></div>
126+
<div></div>
127+
<div></div>
128+
<div></div>
129+
<div></div>
130+
<div></div>
131+
<div></div>
132+
<div></div>
133+
<div></div>
134+
<div></div>
135+
<div></div>
136+
<div></div>
137+
<div></div>
138+
<div></div>
139+
<div></div>
140+
<div></div>
141+
<div></div>
142+
<div></div>
143+
<div></div>
144+
<div></div>
145+
<div></div>
146+
<div></div>
147+
<div></div>
148+
<div></div>
149+
<div></div>
150+
<div></div>
151+
<div></div>
152+
<div></div>
153+
<div></div>
154+
<div></div>
155+
<div></div>
156+
<div></div>
157+
<div></div>
158+
<div></div>
159+
<div></div>
160+
<div></div>
161+
<div></div>
162+
<div></div>
163+
<div></div>
164+
<div></div>
165+
<div></div>
166+
<div></div>
167+
<div></div>
168+
<div></div>
169+
<div></div>
170+
<div></div>
171+
<div></div>
172+
<div></div>
173+
<div></div>
174+
<div></div>
175+
<div></div>
176+
<div></div>
177+
<div></div>
178+
<div></div>
179+
<div></div>
180+
<div></div>
181+
<div></div>
182+
<div></div>
183+
<div></div>
184+
<div></div>
185+
<div></div>
186+
<div></div>
187+
<div></div>
188+
<div></div>
189+
<div></div>
190+
<div></div>
191+
<div></div>
192+
<div></div>
193+
<div></div>
194+
<div></div>
195+
<div></div>
196+
<div></div>
197+
<div></div>
198+
<div></div>
199+
<div></div>
200+
<div></div>
201+
<div></div>
202+
<div></div>
203+
<div></div>
204+
<div></div>
205+
<div></div>
206+
<div></div>
207+
<div></div>
208+
<div></div>
209+
<div></div>
210+
<div></div>
211+
<div></div>
212+
<div></div>
213+
<div></div>
214+
<div></div>
215+
<div></div>
216+
<div></div>
217+
<div></div>
218+
<div></div>
219+
<div></div>
220+
<div></div>
221+
<div></div>
222+
<div></div>
223+
<div></div>
224+
<div></div>
225+
<div></div>
226+
<div></div>
227+
<div></div>
228+
<div></div>
229+
<div></div>
230+
<div></div>
231+
<div></div>
232+
<div></div>
233+
<div></div>
234+
<div></div>
235+
<div></div>
236+
<div></div>
237+
<div></div>
238+
</div>
239+
</body>
240+
</html>

0 commit comments

Comments
 (0)