Skip to content

Instantly share code, notes, and snippets.

@Pro496951
Last active March 9, 2023 16:14
Embed
What would you like to do?
Basic Flappy bird game.this is not missing anything except the score counter
<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>
@Hongchul2
Copy link

Wow, that's amazing.
Can I attach it to my website?

@Pro496951
Copy link
Author

Wow, that's amazing.
Can I attach it to my website?

Yeah You Can. also this code is free to be used anywhere.no need to ask permission before using it.

@yeti0904
Copy link

I like it

@Pro496951
Copy link
Author

I like it

Would you mind leaving a star

@has34212
Copy link

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

@Humphrey2016
Copy link

4

@NuMetalKid
Copy link

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

@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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment