Last active
June 12, 2024 20:14
-
-
Save Pro496951/a7537d2f313fbc6ebad1f74b83f84244 to your computer and use it in GitHub Desktop.
Basic Flappy bird game.this is not missing anything except the score counter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Flappy Bird</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet'> | |
| <link href='https://fonts.googleapis.com/css?family=Permanent Marker' rel='stylesheet'> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| </head> | |
| <style> | |
| #div1 { | |
| font-size:48px; } | |
| body { background-color: #721bc4 ; font-family: 'Pacifico'; } | |
| h1{ background-color: #a666e3 ; text-shadow:5px 5px 5px #dfd2ec ; text-align:center;} | |
| canvas{ animation: mymove 5s infinite; border: 5px solid #0a3cda ; border-style:dotted; border-radius: 15px 50px; } | |
| @keyframes mymove { | |
| 50% {box-shadow: 10px 20px 30px blue;} } | |
| h3{ font-family:'Permanent Marker'; } | |
| </style> | |
| <body> | |
| <h1><b>Flappy Bird !!! (game) <div id="div1" class="fa"></div> </b></h1> | |
| <h3><b>If you want to have a very high score. Think out of this game !! ~_^ <hr> and tell me your high score </b></h3> | |
| <canvas id="myCanvas" width=320 height=480 | |
| style="background:url('http://s2js.com/img/etc/flappyback.png'); background-size: 100%; height: 95% " | |
| </canvas> | |
| <h3> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i></h3> | |
| <script> | |
| function smile() { | |
| var a; | |
| a = document.getElementById("div1"); | |
| a.innerHTML = ""; | |
| setTimeout(function () { | |
| a.innerHTML = ""; | |
| }, 1000); | |
| setTimeout(function () { | |
| a.innerHTML = ""; | |
| }, 2000); | |
| setTimeout(function () { | |
| a.innerHTML = ""; | |
| }, 3000); | |
| } | |
| smile(); | |
| setInterval(smile, 4000); | |
| function myFunction(x) { | |
| x.classList.toggle("fa-thumbs-down"); | |
| } | |
| // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| // | |
| var ctx = myCanvas.getContext("2d"); | |
| var FPS = 40; | |
| var jump_amount = -10; | |
| var max_fall_speed= +10; | |
| var acceleration = 1; | |
| var pipe_speed = -2; | |
| var game_mode = 'prestart'; | |
| var time_game_last_running; | |
| var bottom_bar_offset = 0; | |
| var pipes = []; | |
| function MySprite (img_url) { | |
| this.x = 0; | |
| this.y = 0; | |
| this.visible= true; | |
| this.velocity_x = 0; | |
| this.velocity_y = 0; | |
| this.MyImg = new Image(); | |
| this.MyImg.src = img_url || ''; | |
| this.angle = 0; | |
| this.flipV = false; | |
| this.flipH = false; | |
| } | |
| MySprite.prototype.Do_Frame_Things = function() { | |
| ctx.save(); | |
| ctx.translate(this.x + this.MyImg.width/2, this.y + this.MyImg.height/2); | |
| ctx.rotate(this.angle * Math.PI / 180); | |
| if (this.flipV) ctx.scale(1,-1); | |
| if (this.flipH) ctx.scale(-1,1); | |
| if (this.visible) ctx.drawImage(this.MyImg, -this.MyImg.width/2, -this.MyImg.height/2); | |
| this.x = this.x + this.velocity_x; | |
| this.y = this.y + this.velocity_y; | |
| ctx.restore(); | |
| } | |
| function ImagesTouching(thing1, thing2) { | |
| if (!thing1.visible || !thing2.visible) return false; | |
| if (thing1.x >= thing2.x + thing2.MyImg.width || thing1.x + thing1.MyImg.width <= thing2.x) return false; | |
| if (thing1.y >= thing2.y + thing2.MyImg.height || thing1.y + thing1.MyImg.height <= thing2.y) return false; | |
| return true; | |
| } | |
| function Got_Player_Input(MyEvent) { | |
| switch (game_mode) { | |
| case 'prestart': { | |
| game_mode = 'running'; | |
| break; | |
| } | |
| case 'running': { | |
| bird.velocity_y = jump_amount; | |
| break; | |
| } | |
| case 'over': if (new Date() - time_game_last_running > 1000) { | |
| reset_game(); | |
| game_mode = 'running'; | |
| break; | |
| } | |
| } | |
| MyEvent.preventDefault(); | |
| } | |
| addEventListener("touchstart", Got_Player_Input); | |
| addEventListener("mousedown", Got_Player_Input); | |
| addEventListener("keydown", Got_Player_Input); | |
| function make_bird_slow_and_fall() { | |
| if (bird.velocity_y < max_fall_speed) { | |
| bird.velocity_y = bird.velocity_y + acceleration; | |
| } | |
| if (bird.y > myCanvas.height - bird.MyImg.height) { | |
| bird.velocity_y = 0; | |
| game_mode = 'over'; | |
| } | |
| } | |
| function add_pipe(x_pos, top_of_gap, gap_width) { | |
| var top_pipe = new MySprite(); | |
| top_pipe.MyImg = pipe_piece; | |
| top_pipe.x = x_pos; | |
| top_pipe.y = top_of_gap - pipe_piece.height; | |
| top_pipe.velocity_x = pipe_speed; | |
| pipes.push(top_pipe); | |
| var bottom_pipe = new MySprite(); | |
| bottom_pipe.MyImg = pipe_piece; | |
| bottom_pipe.flipV = true; | |
| bottom_pipe.x = x_pos; | |
| bottom_pipe.y = top_of_gap + gap_width; | |
| bottom_pipe.velocity_x = pipe_speed; | |
| pipes.push(bottom_pipe ); | |
| } | |
| function make_bird_tilt_appropriately() { | |
| if (bird.velocity_y < 0) { | |
| bird.angle= -15; | |
| } | |
| else if (bird.angle < 70) { | |
| bird.angle = bird.angle + 4; | |
| } | |
| } | |
| function show_the_pipes() { | |
| for (var i=0; i < pipes.length; i++) { | |
| pipes[i].Do_Frame_Things(); | |
| } | |
| } | |
| function check_for_end_game() { | |
| for (var i=0; i < pipes.length; i++) | |
| if (ImagesTouching(bird, pipes[i])) game_mode = "over"; | |
| } | |
| function display_intro_instructions () { | |
| ctx.font= "25px Arial"; | |
| ctx.fillStyle= "red"; | |
| ctx.textAlign="center"; | |
| ctx.fillText("Press, touch or click to start", myCanvas.width / 2, myCanvas.height / 4); | |
| } | |
| function display_game_over () { | |
| var score = 0; | |
| for (var i=0; i < pipes.length; i++) | |
| if (pipes[i].x < bird.x) score = score + 0.5; | |
| ctx.font= "30px Arial"; | |
| ctx.fillStyle= "red"; | |
| ctx.textAlign="center"; | |
| ctx.fillText("Game Over", myCanvas.width / 2, 100); | |
| ctx.fillText("Score: " + score, myCanvas.width / 2, 150); | |
| ctx.font= "20px Arial"; | |
| ctx.fillText("Click, touch, or press to play again", myCanvas.width / 2, 300); | |
| } | |
| function display_bar_running_along_bottom() { | |
| if (bottom_bar_offset < -23) bottom_bar_offset = 0; | |
| ctx.drawImage(bottom_bar, bottom_bar_offset, myCanvas.height - bottom_bar.height); | |
| } | |
| function reset_game() { | |
| bird.y = myCanvas.height / 2; | |
| bird.angle= 0; | |
| pipes=[]; // erase all the pipes from the array | |
| add_all_my_pipes(); // and load them back in their starting positions | |
| } | |
| function add_all_my_pipes() { | |
| add_pipe(500, 100, 140); | |
| add_pipe(800, 50, 140); | |
| add_pipe(1000, 250, 140); | |
| add_pipe(1200, 150, 120); | |
| add_pipe(1600, 100, 120); | |
| add_pipe(1800, 150, 120); | |
| add_pipe(2000, 200, 120); | |
| add_pipe(2200, 250, 120); | |
| add_pipe(2400, 30, 100); | |
| add_pipe(2700, 300, 100); | |
| add_pipe(3000, 100, 80); | |
| add_pipe(3300, 250, 80); | |
| add_pipe(3600, 50, 60); | |
| var finish_line = new MySprite("http://s2js.com/img/etc/flappyend.png"); | |
| finish_line.x = 3900; | |
| finish_line.velocity_x = pipe_speed; | |
| pipes.push(finish_line); | |
| } | |
| var pipe_piece = new Image(); | |
| pipe_piece.onload = add_all_my_pipes; | |
| pipe_piece.src = "http://s2js.com/img/etc/flappypipe.png" ; | |
| function Do_a_Frame () { | |
| ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); | |
| bird.Do_Frame_Things(); | |
| display_bar_running_along_bottom(); | |
| switch (game_mode) { | |
| case 'prestart': { | |
| display_intro_instructions(); | |
| break; | |
| } | |
| case 'running': { | |
| time_game_last_running = new Date(); | |
| bottom_bar_offset = bottom_bar_offset + pipe_speed; | |
| show_the_pipes(); | |
| make_bird_tilt_appropriately(); | |
| make_bird_slow_and_fall(); | |
| check_for_end_game(); | |
| break; | |
| } | |
| case 'over': { | |
| make_bird_slow_and_fall(); | |
| display_game_over(); | |
| break; | |
| } | |
| } | |
| } | |
| var bottom_bar = new Image(); | |
| bottom_bar.src = "http://s2js.com/img/etc/flappybottom.png" ; | |
| var bird = new MySprite("http://s2js.com/img/etc/flappybird.png"); | |
| bird.x = myCanvas.width / 3; | |
| bird.y = myCanvas.height / 2; | |
| setInterval(Do_a_Frame, 1000/FPS); | |
| </script> | |
| </body> | |
| </html> |
have this image links no copyright?
this is very cool
can i use it to make my game app?
sure you can
mobile style did not show the moving key ! how to fix it even I resized the frame ?
Hey @Pro496951 I added this code below to your make_bird_slow_and_fall() function to prevent players/the bird from going off the screen on the max/top height, so if they reach the top of the canvas that is also game over. Or else they can go over the pipes and "cheat" easily.
I hope you don't mind me using this code to further test and learn to create games! Thanks in advance.
if (bird.y < 0 - bird.MyImg.height) { bird.velocity_y = 0; game_mode = 'over'; }
Awesome, works great!
thx for making this I just started coding and its helped a lot
hey can you make a version where it is only flappy bird with out any extra words just the game if possiblie thank you
anybody have the code for unblocked minecraft
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
this is very cool
can i use it to make my game app?