diff --git a/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-I.png b/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-I.png new file mode 100644 index 00000000..e66aee40 Binary files /dev/null and b/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-I.png differ diff --git a/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-II.png b/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-II.png new file mode 100644 index 00000000..491ee83c Binary files /dev/null and b/SinglePlayer - Games/Flappy_Bird_Game/images/Bird-II.png differ diff --git a/SinglePlayer - Games/Flappy_Bird_Game/images/background-img.png b/SinglePlayer - Games/Flappy_Bird_Game/images/background-img.png new file mode 100644 index 00000000..18ca4803 Binary files /dev/null and b/SinglePlayer - Games/Flappy_Bird_Game/images/background-img.png differ diff --git a/SinglePlayer - Games/Flappy_Bird_Game/index.html b/SinglePlayer - Games/Flappy_Bird_Game/index.html new file mode 100644 index 00000000..ba4d0812 --- /dev/null +++ b/SinglePlayer - Games/Flappy_Bird_Game/index.html @@ -0,0 +1,24 @@ + + + + + + + + Flappy Bird Game + + + + +
+ bird-img +
+ Enter To Start Game

↑ ArrowUp to Control

+
+
+ + +
+ + + \ No newline at end of file diff --git a/SinglePlayer - Games/Flappy_Bird_Game/script.js b/SinglePlayer - Games/Flappy_Bird_Game/script.js new file mode 100644 index 00000000..a70fdcc2 --- /dev/null +++ b/SinglePlayer - Games/Flappy_Bird_Game/script.js @@ -0,0 +1,121 @@ +let move_speed = 3, grativy = 0.5; +let bird = document.querySelector('.bird'); +let img = document.getElementById('bird-1'); +let bird_props = bird.getBoundingClientRect(); +let background = document.querySelector('.background').getBoundingClientRect(); + +let score_val = document.querySelector('.score_val'); +let message = document.querySelector('.message'); +let score_title = document.querySelector('.score_title'); + +let game_state = 'Start'; +img.style.display = 'none'; +message.classList.add('messageStyle'); + +document.addEventListener('keydown', (e) => { + + if(e.key == 'Enter' && game_state != 'Play'){ + document.querySelectorAll('.pipe_sprite').forEach((e) => { + e.remove(); + }); + img.style.display = 'block'; + bird.style.top = '100vh'; + game_state = 'Play'; + message.innerHTML = ''; + score_title.innerHTML = 'Score : '; + score_val.innerHTML = '0'; + message.classList.remove('messageStyle'); + play(); + } +}); + +function play(){ + function move(){ + if(game_state != 'Play') return; + + let pipe_sprite = document.querySelectorAll('.pipe_sprite'); + pipe_sprite.forEach((element) => { + let pipe_sprite_props = element.getBoundingClientRect(); + bird_props = bird.getBoundingClientRect(); + + if(pipe_sprite_props.right <= 0){ + element.remove(); + }else{ + if(bird_props.left < pipe_sprite_props.left + pipe_sprite_props.width && bird_props.left + bird_props.width > pipe_sprite_props.left && bird_props.top < pipe_sprite_props.top + pipe_sprite_props.height && bird_props.top + bird_props.height > pipe_sprite_props.top){ + game_state = 'End'; + message.innerHTML = 'Game Over'.fontcolor('red') + '
Press Enter To Restart'; + message.classList.add('messageStyle'); + img.style.display = 'none'; + return; + }else{ + if(pipe_sprite_props.right < bird_props.left && pipe_sprite_props.right + move_speed >= bird_props.left && element.increase_score == '1'){ + score_val.innerHTML =+ score_val.innerHTML + 1; + } + element.style.left = pipe_sprite_props.left - move_speed + 'px'; + } + } + }); + requestAnimationFrame(move); + } + requestAnimationFrame(move); + + let bird_dy = 0; + function apply_gravity(){ + if(game_state != 'Play') return; + bird_dy = bird_dy + grativy; + document.addEventListener('keydown', (e) => { + if(e.key == 'ArrowUp' || e.key == ' '){ + img.src = 'images/Bird-II.png'; + bird_dy = -7.6; + } + }); + + document.addEventListener('keyup', (e) => { + if(e.key == 'ArrowUp' || e.key == ' '){ + img.src = 'images/Bird-I.png'; + } + }); + + if(bird_props.top <= 0 || bird_props.bottom >= background.bottom){ + game_state = 'End'; + message.style.left = '28vw'; + window.location.reload(); + message.classList.remove('messageStyle'); + return; + } + bird.style.top = bird_props.top + bird_dy + 'px'; + bird_props = bird.getBoundingClientRect(); + requestAnimationFrame(apply_gravity); + } + requestAnimationFrame(apply_gravity); + + let pipe_seperation = 0; + + let pipe_gap = 40; + + function create_pipe(){ + if(game_state != 'Play') return; + + if(pipe_seperation > 115){ + pipe_seperation = 0; + + let pipe_posi = Math.floor(Math.random() * 43) + 8; + let pipe_sprite_inv = document.createElement('div'); + pipe_sprite_inv.className = 'pipe_sprite'; + pipe_sprite_inv.style.top = pipe_posi - 70 + 'vh'; + pipe_sprite_inv.style.left = '100vw'; + + document.body.appendChild(pipe_sprite_inv); + let pipe_sprite = document.createElement('div'); + pipe_sprite.className = 'pipe_sprite'; + pipe_sprite.style.top = pipe_posi + pipe_gap + 'vh'; + pipe_sprite.style.left = '100vw'; + pipe_sprite.increase_score = '1'; + + document.body.appendChild(pipe_sprite); + } + pipe_seperation++; + requestAnimationFrame(create_pipe); + } + requestAnimationFrame(create_pipe); +} \ No newline at end of file diff --git a/SinglePlayer - Games/Flappy_Bird_Game/style.css b/SinglePlayer - Games/Flappy_Bird_Game/style.css new file mode 100644 index 00000000..c3d260ba --- /dev/null +++ b/SinglePlayer - Games/Flappy_Bird_Game/style.css @@ -0,0 +1,87 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; +} +body{ + height: 700px; + width: 700px +} +.background { + height: 100vh; + width: 100vw; + background: url('images/background-img.png') no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} +.bird { + height: 100px; + width: 130px; + position: fixed; + top: 40vh; + left: 30vw; + z-index: 100; +} +.pipe_sprite { + position: fixed; + top: 40vh; + left: 100vw; + height: 70vh; + width: 6vw; + background:radial-gradient(rgb(177, 140, 5) 50%, rgb(210, 165, 4)); + border: 3px solid black; +} +.message { + position: absolute; + z-index: 10; + color: black; + top: 50%; + left: 50%; + font-size: 5em; + transform: translate(-50%, -50%); + text-align: center; +} +.messageStyle{ + background: white; + padding: 30px; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; + border-radius: 4.5%; +} +.score { + position: fixed; + z-index: 10; + height: 10vh; + font-size: 10vh; + font-weight: 100; + color: white; + -webkit-text-stroke-width: 2px; + -webkit-text-stroke-color: black; + top: 0; + left: 0; + margin: 10px; + font-family: Arial, Helvetica, sans-serif; +} +.score_val { + color: gold; + font-weight: bold; +} +@media only screen and (max-width: 1080px) { + .message{ + font-size: 50px; + top: 50%; + white-space: nowrap; + } + .score{ + font-size: 8vh; + } + .bird{ + width: 120px; + height: 90px; + } + .pipe_sprite{ + width: 14vw; + } +} \ No newline at end of file diff --git a/additionalpage/game.html b/additionalpage/game.html index f1c614de..921e5de7 100644 --- a/additionalpage/game.html +++ b/additionalpage/game.html @@ -9067,7 +9067,58 @@

Castle_Escape_Game

+ + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Flappy Bird Game

+

Flappy Bird is an endless game that involves a bird that the player can control. The player has to save the bird from colliding with the hurdles like pipes. Each time the bird passes through the pipes, the score gets incremented by one...

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

21.05.2024

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ diff --git a/assets/images/flappy.png b/assets/images/flappy.png new file mode 100644 index 00000000..0b38128c Binary files /dev/null and b/assets/images/flappy.png differ