fix: add restart button after game over in Space Invaders

Games/Space_Invaders/index.html

@@ -15,6 +15,12 @@
         font-size: 30px;
         padding: 5px; "><a href="https://kunjgit.github.io/GameZone/"><i style="color:black;" class="fas fa-home home-icon"></i></a></div>
         <h1>Space Invaders</h1>
-        <canvas id="board"></canvas>
+        <div class="game-wrapper">
+            <canvas id="board"></canvas>
+            <div id="game-over-screen" class="hide">
+                <p id="final-score">Game Over</p>
+                <button type="button" id="restart-btn">Restart</button>
+            </div>
+        </div>
     </body>
 </html>

Games/Space_Invaders/space.css

@@ -5,4 +5,47 @@ body {
 
 #board {
     background-color: black;
+}
+
+.game-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+#game-over-screen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.75);
+    color: white;
+}
+
+#final-score {
+    font-size: 20px;
+    margin-bottom: 15px;
+}
+
+#restart-btn {
+    padding: 10px 20px;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: white;
+    color: black;
+    border: none;
+    border-radius: 4px;
+}
+
+#restart-btn:hover {
+    background-color: #dddddd;
+}
+
+.hide {
+    display: none;
 }

Games/Space_Invaders/space.js

@@ -44,12 +44,21 @@ let bulletVelocityY = -10; //bullet moving speed
 let score = 0;
 let gameOver = false;
 
+let gameOverScreen;
+let finalScoreElem;
+let restartBtn;
+
 window.onload = function() {
     board = document.getElementById("board");
     board.width = boardWidth;
     board.height = boardHeight;
     context = board.getContext("2d"); //used for drawing on the board
 
+    gameOverScreen = document.getElementById("game-over-screen");
+    finalScoreElem = document.getElementById("final-score");
+    restartBtn = document.getElementById("restart-btn");
+    restartBtn.addEventListener("click", restartGame);
+
     //draw initial ship
     // context.fillStyle="green";
     // context.fillRect(ship.x, ship.y, ship.width, ship.height);
@@ -70,6 +79,30 @@ window.onload = function() {
     document.addEventListener("keyup", shoot);
 }
 
+function endGame() {
+    gameOver = true;
+    finalScoreElem.textContent = "Game Over — Score: " + score;
+    gameOverScreen.classList.remove("hide");
+}
+
+function restartGame() {
+    gameOverScreen.classList.add("hide");
+
+    ship.x = shipX;
+    ship.y = shipY;
+
+    alienArray = [];
+    bulletArray = [];
+    alienColumns = 3;
+    alienRows = 2;
+    alienVelocityX = 1;
+
+    score = 0;
+    gameOver = false;
+
+    createAliens();
+}
+
 function update() {
     requestAnimationFrame(update);
 
@@ -101,7 +134,7 @@ function update() {
             context.drawImage(alienImg, alien.x, alien.y, alien.width, alien.height);
 
             if (alien.y >= ship.y) {
-                gameOver = true;
+                endGame();
             }
         }
     }