flappy 1.0 - JSFiddle

Make your own flappy

by soggydoughnut54

HTML

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>

JavaScript

/*********************
Make the Flappy Birds
*********************/
//game variables
//BIRD VARIABLES
var maxVel = 2; //bird max falling velocity
var vel = 1; //bird initial falling velocity--should be less than or equal to maxVel
var velInc = 0.5; //change in bird velocity--should be less than maxVel, probably less than 1
var flyingVel = 1; //distance bird will move up when it flaps wings
var birdSize = 64; //size of bird
var birdX = 0; //bird x location
var birdY = 0; //bird starting y location
var birdAnimationRate = 10; //animation speed for bird
//obstacle VARIABLES
var spd = 0.4; //obstacle speed
var pipeWidth = 64; //width of pipe
var pipeDistance = 1; //distance between pipes
var pipeGap = 1; //minimum gap between set of pipes
var numobstacles = 10; //number of sets of different obstacles in game
var pipeYLocations = []; //set the y location of gaps in sets of pipes
//SCORE VARAIBLES
var scoreSize = 10; //font size for score
var scoreX = 0; //x position of score
var scoreY = 0; //y position of score
var scoreColor = ""; //color of score
//FRAME RATE
var frameRate = 30;
//ARE YOU PLAYING ON A PHONE?
var mobile = false;
//////////////////////////
//change to your images vvvv
//////////////////////////
var birdImage = "https://i.postimg.cc/xCRr6kRG/bird.png"; //the bird
var pipeImage = "https://i.postimg.cc/L5CcMrGn/pipes.png"; //the pipes
var backgroundImage = "https://i.postimg.cc/7YbvNZT7/image.png"; //the background

/***********
Game Methods
***********/
/********
draw the game
********/
function draw() {
  //clear the screen
  context.clearRect(0, 0, 500, 500);
  //draw the bg
  //vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
 
  //draw bird here
  //vvvvvvvvvvvvvvvvvvvvvvvvvvv
  
  //move and redraw if playing game
  //all the obstacles in the array should draw
  obstacles.forEach(function(obstacle) {
    //draw obstacle here
    //vvvvvvvvvvvvvvvvvvvvvvvvvvvv
    
  });
  //score
 drawScore();
}
/**
key controls
**/
document.onkeydown = function(e) {
 ...