flappy drawing test - JSFiddle - JSFiddle

Make your own flappy

by soggydoughnut54

HTML

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
<h2>See if you can put your own images in here!</h2>
<a href="https://imgur.com/a/KY630uO" target="0">imgur/</a>

JavaScript

/*********************
Make the Flappy Birds
*********************/
//game variables
//BIRD VARIABLES
var birdAnimationRate = 5; //animation speed for bird
//////////////////////////
//change to your images vvvv
//////////////////////////
var birdImage = "https://imgur.com/X5K3YJ6.png";
var backgroundImage = "https://imgur.com/lhzGtTR.png";

/**
Define the bird
**/
function Bird() {
    this.size = 64;
    //middle of the screen
    this.x = 250 - this.size / 2;
    this.y = 250 - this.size / 2;
    //assign initial frame for animation
    this.frame = 0;
    //cliping the image
    this.xClip = 0;
}
/**
Animate bird
**/
Bird.prototype.update = function () {
   //insert your code here vvv
    //increase the frame
    this.frame++;
    //is it time yet to switch to next image?
    if(this.frame % birdAnimationRate === 0){
     	//only do this stuff every 10 game frames
        //increase the xClip value
        this.xClip += 64;
        //this.Xclip = this.xClip + 64
        //is it too big of a number?
        if(this.xClip > 64){
            //make it 0
            this.xClip = 0;
        }
    }
};
/**
draw the bird
**/
Bird.prototype.draw = function () {
    //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    context.drawImage(bImg, this.xClip, 0, 64, 64, this.x, this.y, this.size, this.size);
};
/***********
Game Methods
***********/
/***********
Initialize game and reset all variables
************/
function init() {
    //remove the thread before resetting--just in case
    clearInterval(thread);
    //initialize bird
    bird = new Bird();
    //initiate the procedure!!!
    thread = setInterval(draw, frameRate);
}
/********
draw the game
********/
function draw() {
    //clear the screen
    context.clearRect(0, 0, 500, 500);
    //draw the bg
    context.drawImage(bgImg, 0, 0, 500, 500);
    //draw the bird
    bird.draw();
    //update the bird
    bird.update();
}
/**
Variables and such
**/
//initialized in init() method
var canvas;
var...