var cvs = document.getElementById("canvas");

var ctx = cvs.getContext("2d");

// load images

var superwoman = new Image();

var bg = new Image();

var fg = new Image();

var pipeNorth = new Image();

var tree = new Image();

superwoman.src = "images/superwoman.png";

bg.src = "images/bg.png";

fg.src = "images/fg.png";

pipeNorth.src = "images/pipeWithSmoke.png";

tree.src = "images/tree.png";

// some variables

var gap = 85;

var constant;

var bX = 10;

var bY = 150;

var gravity = 1.5;

var score = 0;

// audio files

var fly = new Audio();

var scor = new Audio();

fly.src = "sounds/fly.mp3";

scor.src = "sounds/score.mp3";

// on key down

document.addEventListener("keydown",moveUp);

function moveUp(){

bY -= 25;

fly.play();

}

// pipe coordinates

var pipe = [];

pipe[0] = {

x : cvs.width,

y : 0

};

var Y=250; // randomize north pipe height

// draw images

function draw(){

ctx.drawImage(bg,0,0);

for(var i = 0; i < pipe.length; i++){

constant = pipeNorth.height+gap;

ctx.drawImage(pipeNorth,pipe[i].x,pipe[i].y);

ctx.drawImage(tree,pipe[i].x,pipe[i].y+constant);

pipe[i].x--;

if( pipe[i].x == 125 ){

randNorthPipePosY(i);

pipe.push({

x : cvs.width,

y : Y

});

}

// detect collision

if( bX + superwoman.width >= pipe[i].x && bX <= pipe[i].x + pipeNorth.width && (bY <= pipe[i].y + pipeNorth.height || bY+superwoman.height >= pipe[i].y+constant) || bY + superwoman.height >= cvs.height - fg.height){

location.reload(); // reload the page

}

if(pipe[i].x == 5){

score++;

scor.play();

}

}

ctx.drawImage(fg,0,cvs.height - fg.height);

ctx.drawImage(superwoman,bX,bY);

bY += gravity;

ctx.fillStyle = "#000";

ctx.font = "20px Verdana";

ctx.fillText("Score : "+score,10,cvs.height-20);

requestAnimationFrame(draw);

}

//randomize the next north pipe height

function randNorthPipePosY(i){

Y=250;

while(Y>(pipe[i].y+55) || Y<(pipe[i].y-75)) //make sure the next pipe is not too high or too low, player can fly through

Y=Math.floor(Math.random()*pipeNorth.height)-pipeNorth.height;

return Y;

}

draw();