Added Game Over Box, its Styles & Design Preview #Day38

VertikaJain · VertikaJain · commit c021ff26e7ba · 2020-07-26T18:54:08.000+05:30
diff --git a/flappy-birds-game/README.md b/flappy-birds-game/README.md
@@ -5,7 +5,8 @@
 1. Use <canvas> tags to create a canvas for the game.
 2. Inline CSS used to align the canvas & heading to the center of the page.
 3. Use onload property in <body> that enables the execution of draw() once the page's elements finish loading.
-4. Bind game.js file using <script> tags.
+4. Add div for game-over, including the score heading & Restart button.
+5. Bind game.js file using <script> tags.
 
 ## JavaScript Code
 
@@ -17,10 +18,13 @@
 6. Create an array of pipes[], to draw multiple pipes on the canvas, by updating the x & y coordinates using Math.random().
 7. Use coordinates of the bird and pipes to check for collision of these elements.
     1. If the bird's position on x-axis is equivant to the position of pipe or in-between the width of pipe, and
-    2. if the bird's position on y-axis is greater than or equal to the position of North pipe, OR if it is less than or equal to the position of South pipe
-    3. Check if the bird reaches the foreGround.
+    2. If the bird's position on y-axis is greater than or equal to the position of North pipe, OR if it is less than or equal to the position of South pipe
+    3. If the bird reaches the foreGround.
+    4. If the bird crosses/reaches the top of canvas box.
 8. Increase score once the pipe crosses the bird without collision.
 9. Display the updated score using fillText() on the canvas.
+10. Add Score Over pop-in box, using a game-wrapper in HTML, and display it at the time of collision, with a button to restart the game.
+11. Neccessary to use return statement on collision to stop the game loop.
 
 
 ## Credits
diff --git a/flappy-birds-game/Web Design Preview/FlappyBird - Google Chrome 2020-07-26 18-49-12_Trim.mp4 b/flappy-birds-game/Web Design Preview/FlappyBird - Google Chrome 2020-07-26 18-49-12_Trim.mp4
diff --git a/flappy-birds-game/game.js b/flappy-birds-game/game.js
@@ -50,8 +50,11 @@ let draw = () => {
         // check collision of elements
         if (birdState.x + bird.width >= pipe.x && birdState.x <= pipe.x + pipeNorth.width
             && (birdState.y <= pipe.y + pipeNorth.height || birdState.y + bird.height >= pipe.y + gap)
-            || birdState.y + bird.height >= canvasContainer.height - foreGround.height) {
-            location.reload();
+            || birdState.y + bird.height >= canvasContainer.height - foreGround.height
+            || birdState.y + bird.height <= 0) {
+            document.querySelector(".game-over").style.display = "block";
+            document.getElementById("scores").textContent += score;
+            return;
         }
         // increase score when pipe crosses the position of bird
         if (pipe.x === 5) {
diff --git a/flappy-birds-game/index.html b/flappy-birds-game/index.html
@@ -5,11 +5,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FlappyBird</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
 
 <body style="display: grid; justify-content: center; align-items: center; color: green;" onload="draw()">
     <h3 style="text-align: center;">Play Flappy Bird Game Here</h3>
-    <canvas id="myCanvas" width="288" height="512">Your browser doesn't include support for the canvas element.</canvas>
+    <div class="game-wrapper">
+        <canvas id="myCanvas" width="288" height="512">Your browser doesn't include support for the canvas
+            element.</canvas>
+        <div class="game-over">
+            <h2>GAME OVER</h2>
+            <h3 id="scores">Score: </h3>
+            <button class="btn" onclick="window.location.reload()">restart</button>
+        </div>
+    </div>
     <script src="game.js"></script>
 </body>
 
diff --git a/flappy-birds-game/styles.css b/flappy-birds-game/styles.css
@@ -0,0 +1,53 @@
+.game-wrapper {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgb(22, 22, 22);
+  }
+
+.game-over {
+    display: none;
+    position: absolute;
+    background: yellowgreen;
+    color: red;
+    padding: 20px 50px;
+    box-shadow: 0 2px 10px rgba(235, 89, 5, 0.2);
+    border-radius: 10px;
+    text-align: center;
+    animation: pop-in 1s;
+    font-family: Verdana;
+  }
+  
+.btn {
+    border: 2px solid #ee9e26;
+    border-radius: 3px;
+    box-shadow: 0 2px rgba(0, 0, 0, 0.15);
+    background: linear-gradient(
+      to bottom,
+      #fff 0%,
+      #fff 49%,
+      #f5f5f5 50%,
+      #eee 100%
+    );
+    padding: 10px 40px;
+    font-family: 14px Verdana;
+    text-transform: capitalize;
+  }
+
+@keyframes pop-in {
+    0% {
+      opacity: 0;
+      transform: translate(0, -50px);
+    }
+    10% {
+      opacity: 1;
+    }
+    50% {
+      transform: translate(0, 50px);
+    }
+    100% {
+      transform: translate(0, 0);
+    }
+  }
+  
