Skip to content

Instantly share code, notes, and snippets.

@Pro496951

Pro496951/Flappy Bird.html

Last active June 12, 2024 20:14
Show Gist options
  • Save Pro496951/a7537d2f313fbc6ebad1f74b83f84244 to your computer and use it in GitHub Desktop.
Save Pro496951/a7537d2f313fbc6ebad1f74b83f84244 to your computer and use it in GitHub Desktop.
Download ZIP
Basic Flappy bird game.this is not missing anything except the score counter
Raw
Flappy Bird.html
<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 = "&#xf118;";
setTimeout(function () {
a.innerHTML = "&#xf11a;";
}, 1000);
setTimeout(function () {
a.innerHTML = "&#xf119;";
}, 2000);
setTimeout(function () {
a.innerHTML = "&#xf11a;";
}, 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>
@Pro496951
Copy link
Author

I have an html file where I'm collecting html game files and linking them, this is really cool.

Thanks!

@Pro496951
Copy link
Author

is it possible to add this and a snake game to my website do you know how?

not sure but you can add this and add the snake game seperately

@Pro496951
Copy link
Author

4

not bad!

@Chrisbau-1
Copy link

Great Job

@Pro496951
Copy link
Author

Great Job

Thanks

@leejohn0038
Copy link

this is very cool
can i use it to make my game app?

@leejohn0038
Copy link

have this image links no copyright?

@Pro496951
Copy link
Author

this is very cool
can i use it to make my game app?

sure you can

@hbibrachel
Copy link

mobile style did not show the moving key ! how to fix it even I resized the frame ?

@Serginni
Copy link

Serginni commented Mar 26, 2021 •
edited
Loading

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'; }

@gaycoder
Copy link

Awesome, works great!

@B3AR22
Copy link

B3AR22 commented Mar 7, 2022

thx for making this I just started coding and its helped a lot

@max1444
Copy link

max1444 commented Mar 31, 2022

hey can you make a version where it is only flappy bird with out any extra words just the game if possiblie thank you

@thegamemaker2
Copy link

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