Added a instuctions modal (#274)

I have added a instructions modal, which includes all the instructions and it can be called whenever in game by pressing i,the game gets paused while on the instructions modal. I also changed gravity so that it can be playable ![image](https://github.com/Git21221/JS-beginner-projects/assets/125902846/56502e6d-ea44-40f8-8d26-bc2a4c475bae)
Git21221 · Oct 4, 2023 · c2f45c5 · c2f45c5
2 parents 9dc9345 + 593f730
commit c2f45c5
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 19 deletions.
diff --git a/Flappy_Bird/app.js b/Flappy_Bird/app.js
@@ -4,7 +4,7 @@ let board;
 let boardWidth=360;
 let boardHeight=640;
 let context;
-
+let isGamePaused = true;
 //==================bird=======================
 let birdWidth=32;// width/height=60/45=4/3
 let birdHeight=24;
@@ -32,8 +32,8 @@ let bottomPipeImg;
 
 //=========physics=========
 let velocityX= -2; //pipes moving left direction
-let velocityY = 0;
-let gravity = 0.4;
+let velocityY = -4;
+let gravity = 0.2;
 
 let gameOver = false;
 let score=0;
@@ -66,11 +66,60 @@ window.onload= function(){
     requestAnimationFrame(update);
     setInterval(placePipes,1500);// every 1.5s the pipe will be placed
     document.addEventListener("keydown",moveBird);
+    showInstructions();
 }
-
+document.addEventListener('keydown', function (e) {
+    if (e.code === 'KeyI') {
+      showInstructions();
+    }
+  });
+  // Function to show the instructions modal
+function showInstructions() {
+    // Show the instructions modal
+    isGamePaused = true;
+    const instructionsModal = document.getElementById('instructionsModal');
+    instructionsModal.style.display = 'block';
+
+    // Hide the canvas while showing the instructions
+    board.style.display = 'none';
+
+    // Event listener to start the game when the "Start Game" button is clicked
+    const startGameBtn = document.getElementById('startGameBtn');
+    startGameBtn.addEventListener('click', closeInstructions);
+  }
+
+  // Function to close the instructions modal and start the game
+  function closeInstructions() {
+    // Close the instructions modal
+    const instructionsModal = document.getElementById('instructionsModal');
+    instructionsModal.style.display = 'none';
+
+    // Show the canvas and start the game
+    board.style.display = 'block';
+    isGamePaused = false;
+    // Start the game
+    startGame();
+  }
+  // Function to start the game
+function startGame() {
+    // Add your game initialization logic here
+    // For example, you can start your game loop or set game variables.
+
+    // Example:
+    // Initialize game variables
+    gameOver = false;
+    score = 0;
+    bird.y = birdY;
+    pipeArray = [];
+
+    // Start your game loop or any necessary game logic here
+    requestAnimationFrame(update);
+  }
 function update(){
     requestAnimationFrame(update);
-
+    if (isGamePaused) { // Check if the game is paused
+        return;
+      }
     if(gameOver){  
         return;
     }
@@ -154,17 +203,25 @@ function placePipes(){
 
     pipeArray.push(bottomPipe);
 }
-
+// Function to start the game
+function startGame() {
+    gameOver = false;
+    score = 0;
+    bird.y = birdY;
+    pipeArray = [];
+  }
 function moveBird(e){
     if(e.code=="Space" || e.code=="ArrowUp" || e.code=="KeyX"){
-        //jump
-        velocityY=-6;   
-
+        if (!isGamePaused) { // Check if the game is not paused
+      // Jump
+      velocityY = -6; // Adjust jump strength as needed
+    }
+    else if (e.code == "KeyI") {
+        // Toggle game pause on 'I' key press
+        isGamePaused = !isGamePaused;
+      }
         if(gameOver){
-            bird.y=birdY;
-            pipeArray=[];
-            score=0;
-            gameOver=false;
+           startGame();
         }
 
     }

diff --git a/Flappy_Bird/index.html b/Flappy_Bird/index.html
@@ -8,6 +8,15 @@
   <script src="app.js"></script>
 </head>
 <body>
+   <!-- Instructions Modal -->
+   <div id="instructionsModal" class="modal">
+    <div class="modal-content">
+      <h2>Instructions</h2>
+      <p>Press the "Space" key or "Arrow Up" key or "KeyX" to make the bird jump.</p>
+      <p>Press 'I' to view instructions again.</p>
+      <button id="startGameBtn">Start Game</button>
+    </div>
+  </div>
   <!-- this is canvas -->
   <canvas id="board"></canvas>
   <div id="ground"></div>

diff --git a/Flappy_Bird/style.css b/Flappy_Bird/style.css
@@ -1,16 +1,71 @@
-body{
+body {
     text-align: center;
-}
-
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    overflow: hidden; /* Prevent scrollbar */
+  }
 #board{
-    position: absolute;
+    position: relative;
     background-image: url("./images/fb-game-background.png");
+    margin: 0 auto;
+    display: block;
 }
 #ground{
     position: relative;
     background-image: url("./images/bottom-background.png");
     width: 360px;
     height: 50px;
+    margin: 0 auto;
+}
+/* Instructions Modal */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 1;
+    overflow: auto;
+  }
+  .modal-content {
+    background-color: #fff;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 60%;
+    max-width: 400px;
+    border-radius: 5px;
+    text-align: center;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  }
+
+  .modal h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+
+  .modal p {
+    font-size: 16px;
+    margin-bottom: 20px;
+  }
+
+  #startGameBtn {
+    background-color: #008CBA;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
     display: inline-block;
-    bottom: -635px;
-}
+    font-size: 16px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  #startGameBtn:hover {
+    background-color: #005F7F;
+  }