From be7ba1f5bc7961d0efa1d4df6e756641311bd104 Mon Sep 17 00:00:00 2001 From: Manideep kakkerla Date: Wed, 4 Oct 2023 11:53:30 +0530 Subject: [PATCH] Added a instuctions modal --- Flappy_Bird/app.js | 83 +++++++++++++++++++++++++++++++++++------- Flappy_Bird/index.html | 9 +++++ Flappy_Bird/style.css | 67 +++++++++++++++++++++++++++++++--- 3 files changed, 140 insertions(+), 19 deletions(-) diff --git a/Flappy_Bird/app.js b/Flappy_Bird/app.js index 31a7cde..cf5d155 100644 --- 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 index e2ee32f..f100ece 100644 --- a/Flappy_Bird/index.html +++ b/Flappy_Bird/index.html @@ -8,6 +8,15 @@ + +
diff --git a/Flappy_Bird/style.css b/Flappy_Bird/style.css index 68cf372..2239dc6 100644 --- 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; -} \ No newline at end of file + font-size: 16px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; + } + #startGameBtn:hover { + background-color: #005F7F; + } \ No newline at end of file