game.js

let board;
let boardWidth= 360;
let boardHeight = 640;
let context;

let birdWidth = 34;
let birdHeight = 24;

let birdX = boardWidth/8;
let birdY = boardHeight/2;
let birdImg;

let bird = {
    x: birdX,
    y: birdY,
    width: birdWidth,
    height: birdHeight
}

//pipes 

let pipeArray = [];

let pipeWidth = 64;
let pipeHeight = 512;

let pipeX = boardWidth;
let pipeY = 0;

let topPipeImg;
let bottomPipeImg;



//Physics stuff

let velocityX =-2;
let velocityY = 0;

let g =0.1;

let gameOver=true;
let score = 0;


window.onload = function(){

    board = document.getElementById("board");

    board.height=boardHeight;
    board.width = boardWidth;

    context = board.getContext("2d");

    


    //Drawing Bird
    birdImg = new Image();
    birdImg.src= "resources/flappybird.png";
    birdImg.onload = function(){
    context.drawImage(birdImg,bird.x,bird.y,bird.width,bird.height);
    }

   

    topPipeImg=new Image();
    topPipeImg.src = "resources/toppipe.png";

    bottomPipeImg=new Image();
    bottomPipeImg.src = "resources/bottompipe.png";

    if(gameOver){
        context.font="30px sans-sherif";
        context.fillText("Press X or Space to start",40,200)
    }

    requestAnimationFrame(update);

    setInterval(placePipes,1500);

    

    document.addEventListener("keydown",moveBird);
}


function update(){
    requestAnimationFrame(update);
    if(gameOver){
        return;
    }
    context.clearRect(0,0,board.width,board.height);


    velocityY+=g;
    bird.y=Math.max(bird.y+velocityY,0);

    if(bird.y<0){
        bird.style.transform = "rotate(180 deg)"
    }

    context.drawImage(birdImg,bird.x,bird.y,bird.width,bird.height);

    if(bird.y>board.height){
        gameOver=true;
    }
    
    for(let i=0;i<pipeArray.length;i++){
        let pipe = pipeArray[i];
        pipe.x+=velocityX;
        context.drawImage(pipe.img,pipe.x,pipe.y,pipe.width,pipe.height);

        if(!pipe.passed && bird.x>pipe.x+pipe.width){
            score+=0.5;
            pipe.passed = true;
        }

        if(detectCollision(bird,pipe)){
            gameOver=true;
        }
    }

    while(pipeArray.length>0 && pipeArray[0].x < -pipeWidth){
        pipeArray.shift();
    }

    context.fillStyle = "White";
    context.font="50px sans-sherif";
    context.fillText(score,5,45);

    if(gameOver){
        context.font="50px sans-sherif";
        context.fillText("Game Over",60,100);

        context.font="20px sans-sherif"
        context.fillStyle = "black"
        context.fillText("Press X or Space to start",75,200)
    }
}


function placePipes(){

    if(gameOver){
        return;
    }
    let randomPipeY= pipeY - pipeHeight/4 - Math.random() * (pipeHeight/2);
    let openingSpace = board.height/4;

    let topPipe={
        img : topPipeImg,
        x : pipeX,
        y : randomPipeY,
        width : pipeWidth,
        height : pipeHeight,
        passed : false
    }

    pipeArray.push(topPipe);

    let bottomPipe={
        img : bottomPipeImg,
        x : pipeX,
        y : randomPipeY + pipeHeight + openingSpace,
        width : pipeWidth,
        height : pipeHeight,
        passed : false
    }

    pipeArray.push(bottomPipe);
}

function moveBird(e){

    if(e.code=="Space"|| e.code == "ArrowUp" || e.code == "KeyX"){
        velocityY=-3;

        if(gameOver){
            
            bird.y=birdY;
            pipeArray=[];
            score=0;
            gameOver=false;
        }
    }

}

function detectCollision(a,b){
    return a.x<b.x+b.width &&
           a.x+a.width>b.x &&
           a.y<b.y+b.height&&
           a.y+a.height>b.y;  
}