shaswatkr · shaswatkr · Sep 6, 2022 · Sep 6, 2022 · Sep 6, 2022 · Sep 6, 2022
diff --git a/Space-Invaders Game/index.css b/Space-Invaders Game/index.css
@@ -0,0 +1,31 @@
+.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;
+}
+
+.laser {
+    background-color: yellow;
+}
+
+.boom {
+    background-color: gray;
+    border-radius: 0;
+}
diff --git a/Space-Invaders Game/index.html b/Space-Invaders Game/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title> Space Invaders - Game </title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+    <h1> Score: <span id="score"></span> </h1>
+
+    <div class="grid"></div>
+
+    <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/Space-Invaders Game/index.js b/Space-Invaders Game/index.js
@@ -0,0 +1,150 @@
+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 destroyedSpaceInvadersArray = [];
+
+let score = 0;
+let direction = 1;
+let gameOverFlag = false;
+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"));
+}
+
+function deleteSpaceInvaders() {
+    spaceInvadersArray.forEach(each => squaresDiv[each].classList.remove("invader"));
+}
+
+function leftBorderReached(element) {
+    return element % WIDTH === 0;
+}
+
+function rightBorderReached(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 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")) {
+            scoreSpan.innerText = ++score;
+            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": {
+            leftBorderReached(currentPlayerShooterPosition) ? null : currentPlayerShooterPosition--;
+            break;
+        }
+        case "ArrowRight": {
+            rightBorderReached(currentPlayerShooterPosition) ? null : currentPlayerShooterPosition++;
+            break;
+        }
+    }
+    squaresDiv[currentPlayerShooterPosition].classList.add("playerShooter");
+}
+
+function moveSpaceInvaders() {
+    if (destroyedSpaceInvadersArray.length === spaceInvadersArrayLength) {
+        gameOverFlag = true;
+        clearInterval(moveSpaceInvadersTimer);
+        document.querySelector("h1").innerText = `YOU WON!! Score = ${score}`;
+        document.removeEventListener("keydown", movePlayerShooter);
+        document.removeEventListener("keydown", shoot);
+    }
+
+    deleteSpaceInvaders();
+
+    spaceInvadersArray.forEach(each => {
+        if (each === currentPlayerShooterPosition) {
+            gameOverFlag = true;
+            clearInterval(moveSpaceInvadersTimer);
+            document.querySelector("h1").innerText = "GAME OVER!";
+            document.removeEventListener("keydown", movePlayerShooter);
+            document.removeEventListener("keydown", shoot);
+        }
+    });
+
+    if (!gameOverFlag) {
+        const leftReached = leftBorderReached(spaceInvadersArray[0]);
+        const rightReached = rightBorderReached(spaceInvadersArray[spaceInvadersArray.length - 1]);
+
+        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);