From 5793d942ab45a039d86355421a6d7cad5e14da2a Mon Sep 17 00:00:00 2001 From: "shaswat.kumar" Date: Tue, 6 Sep 2022 23:43:09 +0530 Subject: [PATCH 1/8] Adding the HTML file --- Space-Invaders Game/index.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 Space-Invaders Game/index.html diff --git a/Space-Invaders Game/index.html b/Space-Invaders Game/index.html new file mode 100644 index 0000000..aec9537 --- /dev/null +++ b/Space-Invaders Game/index.html @@ -0,0 +1,20 @@ + + + + + Space Invaders - Game + + + + + + + +

Score:

+ +
+ + + + + \ No newline at end of file From 05772975ac8cb3cd4525337b2a8a38dc0cd125cf Mon Sep 17 00:00:00 2001 From: "shaswat.kumar" Date: Tue, 6 Sep 2022 23:43:16 +0530 Subject: [PATCH 2/8] Adding the CSS file --- Space-Invaders Game/index.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 Space-Invaders Game/index.css diff --git a/Space-Invaders Game/index.css b/Space-Invaders Game/index.css new file mode 100644 index 0000000..3e8be7a --- /dev/null +++ b/Space-Invaders Game/index.css @@ -0,0 +1,22 @@ +.grid { + display: flex; + flex-wrap: wrap; + height: 45em; + width: 45em; + border: 1px solid black; + margin-bottom: 10%; +} + +.square { + height: 3em; + width: 3em; +} + +.invader { + background-color: purple; + border-radius: 100%; +} + +.playerShooter { + background-color: coral; +} \ No newline at end of file From a4267d1030900ebf644329fbe3782de99e21ee56 Mon Sep 17 00:00:00 2001 From: "shaswat.kumar" Date: Tue, 6 Sep 2022 23:44:21 +0530 Subject: [PATCH 3/8] Adding the function to create Board, move Player's Shooter & Automatically move Space Invaders --- Space-Invaders Game/index.js | 90 ++++++++++++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 Space-Invaders Game/index.js diff --git a/Space-Invaders Game/index.js b/Space-Invaders Game/index.js new file mode 100644 index 0000000..552671a --- /dev/null +++ b/Space-Invaders Game/index.js @@ -0,0 +1,90 @@ +const WIDTH = 15; + +let spaceInvadersArray = [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, + 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, + 30, 31, 32, 33, 34, 35, 36, 37, 38, 39 +]; +const spaceInvadersArrayLength = spaceInvadersArray.length; + +let direction = 1; +let squaresDiv = null; +let moveSpaceInvadersTimer = null; + +let currentPlayerShooterPosition = 202; + +function drawSpaceInvaders() { + spaceInvadersArray.forEach(each => squaresDiv[each].classList.add("invader")); +} + +function deleteSpaceInvaders() { + spaceInvadersArray.forEach(each => squaresDiv[each].classList.remove("invader")); +} + +function leftBorderReachedFor(element) { + return element % WIDTH === 0; +} + +function rightBorderReachedFor(element) { + return element % WIDTH === WIDTH - 1; +} + +function drawBoard() { + const gridDiv = document.querySelector(".grid"); + + // ! - Create empty squares + for (let i = 0; i < 225; i++) { + const div = document.createElement("div"); + div.className = "square"; + gridDiv.appendChild(div); + } + squaresDiv = document.querySelectorAll(".square"); + + // ! - Create Invaders + drawSpaceInvaders(); + + // ! - Create Player's Shooter + squaresDiv[currentPlayerShooterPosition].classList.add("playerShooter"); + + // ! - Add Event Listener move Player's Shooter + document.addEventListener("keydown", movePlayerShooter); +} +drawBoard(); + +function movePlayerShooter(e) { + squaresDiv[currentPlayerShooterPosition].classList.remove("playerShooter"); + + switch (e.key) { + case "ArrowLeft": { + leftBorderReachedFor(currentPlayerShooterPosition) ? null : currentPlayerShooterPosition--; + break; + } + case "ArrowRight": { + rightBorderReachedFor(currentPlayerShooterPosition) ? null : currentPlayerShooterPosition++; + break; + } + } + squaresDiv[currentPlayerShooterPosition].classList.add("playerShooter"); +} + +function moveSpaceInvaders() { + const leftReached = leftBorderReachedFor(spaceInvadersArray[0]); + const rightReached = rightBorderReachedFor(spaceInvadersArray[spaceInvadersArrayLength - 1]); + + deleteSpaceInvaders(); + + if (rightReached && direction > 0) { + direction = -direction; + spaceInvadersArray = spaceInvadersArray.map(each => each + WIDTH); + } + else if (leftReached && direction < 0) { + direction = -direction; + spaceInvadersArray = spaceInvadersArray.map(each => each + WIDTH); + } + else { + spaceInvadersArray = spaceInvadersArray.map(each => each + direction); + } + + drawSpaceInvaders(); +} +moveSpaceInvadersTimer = setInterval(moveSpaceInvaders, 500); \ No newline at end of file From 9ab0765d3f310bcddef540b1eaa6cf5791f4467b Mon Sep 17 00:00:00 2001 From: "shaswat.kumar" Date: Tue, 6 Sep 2022 23:54:01 +0530 Subject: [PATCH 4/8] Stopping the Space Invader's movement once they hit Player's Shooter --- Space-Invaders Game/index.js | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/Space-Invaders Game/index.js b/Space-Invaders Game/index.js index 552671a..4914dae 100644 --- a/Space-Invaders Game/index.js +++ b/Space-Invaders Game/index.js @@ -8,6 +8,7 @@ let spaceInvadersArray = [ const spaceInvadersArrayLength = spaceInvadersArray.length; let direction = 1; +let gameLostFlag = false; let squaresDiv = null; let moveSpaceInvadersTimer = null; @@ -73,16 +74,25 @@ function moveSpaceInvaders() { deleteSpaceInvaders(); - if (rightReached && direction > 0) { - direction = -direction; - spaceInvadersArray = spaceInvadersArray.map(each => each + WIDTH); - } - else if (leftReached && direction < 0) { - direction = -direction; - spaceInvadersArray = spaceInvadersArray.map(each => each + WIDTH); + for (let i = 0; i < spaceInvadersArrayLength; i++) { + if (spaceInvadersArray[i] === currentPlayerShooterPosition) { + gameLostFlag = true; + clearInterval(moveSpaceInvadersTimer); + } } - else { - spaceInvadersArray = spaceInvadersArray.map(each => each + direction); + + if (!gameLostFlag) { + if (rightReached && direction > 0) { + direction = -direction; + spaceInvadersArray = spaceInvadersArray.map(each => each + WIDTH); + } + else if (leftReached && direction < 0) { + direction = -direction; + spaceInvadersArray = spaceInvadersArray.map(each => each + WIDTH); + } + else { + spaceInvadersArray = spaceInvadersArray.map(each => each + direction); + } } drawSpaceInvaders(); From cab3adf24f62828a38dc8ad8b09f1b39a619a4d0 Mon Sep 17 00:00:00 2001 From: "shaswat.kumar" Date: Thu, 8 Sep 2022 01:22:55 +0530 Subject: [PATCH 5/8] Adding the laser & boom styling --- Space-Invaders Game/index.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/Space-Invaders Game/index.css b/Space-Invaders Game/index.css index 3e8be7a..d0d38d4 100644 --- a/Space-Invaders Game/index.css +++ b/Space-Invaders Game/index.css @@ -19,4 +19,13 @@ .playerShooter { background-color: coral; +} + +.laser { + background-color: red; +} + +.boom { + background-color: gray; + border-radius: 0; } \ No newline at end of file From 10cb9ef8c981d5029e8fd87cc0627a69c6c13cd4 Mon Sep 17 00:00:00 2001 From: "shaswat.kumar" Date: Thu, 8 Sep 2022 01:24:44 +0530 Subject: [PATCH 6/8] Adding Game Lost & Game Won logic, drawLaser function to activate on ArrowUp & make Space Invaders disappear when hit with a boom --- Space-Invaders Game/index.js | 72 +++++++++++++++++++++++++++++------- 1 file changed, 58 insertions(+), 14 deletions(-) diff --git a/Space-Invaders Game/index.js b/Space-Invaders Game/index.js index 4914dae..cc66152 100644 --- a/Space-Invaders Game/index.js +++ b/Space-Invaders Game/index.js @@ -7,26 +7,28 @@ let spaceInvadersArray = [ ]; const spaceInvadersArrayLength = spaceInvadersArray.length; +let destroyedSpaceInvadersArray = []; + let direction = 1; -let gameLostFlag = false; +let gameOverFlag = false; let squaresDiv = null; let moveSpaceInvadersTimer = null; let currentPlayerShooterPosition = 202; function drawSpaceInvaders() { - spaceInvadersArray.forEach(each => squaresDiv[each].classList.add("invader")); + spaceInvadersArray.forEach((each, index) => destroyedSpaceInvadersArray.includes(index) ? null : squaresDiv[each].classList.add("invader")); } function deleteSpaceInvaders() { spaceInvadersArray.forEach(each => squaresDiv[each].classList.remove("invader")); } -function leftBorderReachedFor(element) { +function leftBorderReached(element) { return element % WIDTH === 0; } -function rightBorderReachedFor(element) { +function rightBorderReached(element) { return element % WIDTH === WIDTH - 1; } @@ -52,16 +54,49 @@ function drawBoard() { } drawBoard(); +function shoot(e) { + let drawLaserTimer = null; + let currentLaserPosition = null; + + function drawLaser() { + squaresDiv[currentLaserPosition].classList.remove("laser"); + currentLaserPosition -= WIDTH; + + if (currentLaserPosition <= 0) { + clearInterval(drawLaserTimer); + } + else if (squaresDiv[currentLaserPosition].classList.contains("invader")) { + destroyedSpaceInvadersArray.push(spaceInvadersArray.indexOf(currentLaserPosition)); + + squaresDiv[currentLaserPosition].classList.remove("invader"); + squaresDiv[currentLaserPosition].classList.add("boom"); + + setTimeout(() => squaresDiv[currentLaserPosition].classList.remove("boom"), 200); + clearInterval(drawLaserTimer); + } + else { + squaresDiv[currentLaserPosition].classList.add("laser"); + } + } + + if (e.key === "ArrowUp") { + currentLaserPosition = currentPlayerShooterPosition; + drawLaserTimer = setInterval(drawLaser, 30); + } + +} +document.addEventListener("keydown", shoot); + function movePlayerShooter(e) { squaresDiv[currentPlayerShooterPosition].classList.remove("playerShooter"); switch (e.key) { case "ArrowLeft": { - leftBorderReachedFor(currentPlayerShooterPosition) ? null : currentPlayerShooterPosition--; + leftBorderReached(currentPlayerShooterPosition) ? null : currentPlayerShooterPosition--; break; } case "ArrowRight": { - rightBorderReachedFor(currentPlayerShooterPosition) ? null : currentPlayerShooterPosition++; + rightBorderReached(currentPlayerShooterPosition) ? null : currentPlayerShooterPosition++; break; } } @@ -69,19 +104,28 @@ function movePlayerShooter(e) { } function moveSpaceInvaders() { - const leftReached = leftBorderReachedFor(spaceInvadersArray[0]); - const rightReached = rightBorderReachedFor(spaceInvadersArray[spaceInvadersArrayLength - 1]); + if (destroyedSpaceInvadersArray.length === spaceInvadersArrayLength) { + gameOverFlag = true; + clearInterval(moveSpaceInvadersTimer); + document.querySelector("h1").innerText = "YOU WON!!"; + document.removeEventListener("keydown", movePlayerShooter); + } deleteSpaceInvaders(); - for (let i = 0; i < spaceInvadersArrayLength; i++) { - if (spaceInvadersArray[i] === currentPlayerShooterPosition) { - gameLostFlag = true; + spaceInvadersArray.forEach(each => { + if (each === currentPlayerShooterPosition) { + gameOverFlag = true; clearInterval(moveSpaceInvadersTimer); + document.querySelector("h1").innerText = "GAME OVER!"; + document.removeEventListener("keydown", movePlayerShooter); } - } + }); + + if (!gameOverFlag) { + const leftReached = leftBorderReached(spaceInvadersArray[0]); + const rightReached = rightBorderReached(spaceInvadersArray[spaceInvadersArray.length - 1]); - if (!gameLostFlag) { if (rightReached && direction > 0) { direction = -direction; spaceInvadersArray = spaceInvadersArray.map(each => each + WIDTH); @@ -97,4 +141,4 @@ function moveSpaceInvaders() { drawSpaceInvaders(); } -moveSpaceInvadersTimer = setInterval(moveSpaceInvaders, 500); \ No newline at end of file +moveSpaceInvadersTimer = setInterval(moveSpaceInvaders, 500); From 9830cda6bda74ea52d372b33b1d1e3768f7f1285 Mon Sep 17 00:00:00 2001 From: "shaswat.kumar" Date: Thu, 8 Sep 2022 01:35:05 +0530 Subject: [PATCH 7/8] Updating laser color to yellow --- Space-Invaders Game/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Space-Invaders Game/index.css b/Space-Invaders Game/index.css index d0d38d4..01ceab2 100644 --- a/Space-Invaders Game/index.css +++ b/Space-Invaders Game/index.css @@ -22,7 +22,7 @@ } .laser { - background-color: red; + background-color: yellow; } .boom { From 3247eede478f7896b5e5096f4884a8e0fef7de0b Mon Sep 17 00:00:00 2001 From: "shaswat.kumar" Date: Thu, 8 Sep 2022 01:35:26 +0530 Subject: [PATCH 8/8] Adding scoring functionality into the game --- Space-Invaders Game/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/Space-Invaders Game/index.js b/Space-Invaders Game/index.js index cc66152..15529b0 100644 --- a/Space-Invaders Game/index.js +++ b/Space-Invaders Game/index.js @@ -9,13 +9,16 @@ const spaceInvadersArrayLength = spaceInvadersArray.length; let destroyedSpaceInvadersArray = []; +let score = 0; let direction = 1; let gameOverFlag = false; -let squaresDiv = null; let moveSpaceInvadersTimer = null; let currentPlayerShooterPosition = 202; +let squaresDiv = null; +const scoreSpan = document.getElementById("score"); + function drawSpaceInvaders() { spaceInvadersArray.forEach((each, index) => destroyedSpaceInvadersArray.includes(index) ? null : squaresDiv[each].classList.add("invader")); } @@ -66,6 +69,7 @@ function shoot(e) { clearInterval(drawLaserTimer); } else if (squaresDiv[currentLaserPosition].classList.contains("invader")) { + scoreSpan.innerText = ++score; destroyedSpaceInvadersArray.push(spaceInvadersArray.indexOf(currentLaserPosition)); squaresDiv[currentLaserPosition].classList.remove("invader"); @@ -107,8 +111,9 @@ function moveSpaceInvaders() { if (destroyedSpaceInvadersArray.length === spaceInvadersArrayLength) { gameOverFlag = true; clearInterval(moveSpaceInvadersTimer); - document.querySelector("h1").innerText = "YOU WON!!"; + document.querySelector("h1").innerText = `YOU WON!! Score = ${score}`; document.removeEventListener("keydown", movePlayerShooter); + document.removeEventListener("keydown", shoot); } deleteSpaceInvaders(); @@ -119,6 +124,7 @@ function moveSpaceInvaders() { clearInterval(moveSpaceInvadersTimer); document.querySelector("h1").innerText = "GAME OVER!"; document.removeEventListener("keydown", movePlayerShooter); + document.removeEventListener("keydown", shoot); } });