main.js

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



let birdWidth = 34;
let birdHeight = 24;
let birdX = boardWidth/8;
let birdY = boardHeight/2;


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

let pipeArray = [];
let pipeWidth = 64;
let pipeHeight = 512;
let pipeX = boardWidth;
let pipeY = 0;

let topPipeImg;
let bottomPipeImg;


let velocityX = -2;
let velocityY = 0;
let gravity = 0.4;

let gameOver = false;
let score = 0;

window.onload = function (){

    board = document.getElementById("board");
    board.height = boardHeight;
    board.width = boardWidth;
    context = board.getContext("2d");


    birdImg = new Image();
    birdImg.src = "./bird.png";

    birdImg.onload = function (){

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

    }

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

    bottomPipeImg = new Image();
    bottomPipeImg.src = "./bottompipe.png";
    
    
    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 += gravity;
    bird.y = Math.max(bird.y + velocityY,0);
    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

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

        context.drawImage(pipe.img, pipe.x, pipe.y,pipe.width,pipe.height)

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

    }

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



    context.fillStyle = "white";
    context.font = "45px sans-serif";
    context.fillText(score,5,45)

    if (gameOver){

        context.fillText("Game Over",5,90)
    }
}


function placePipes() {

    if(gameOver){
        return;
    }

    let randomPipeY = pipeY - pipeHeight/4  -  Math.random() * (pipeHeight/2);
    let openingspace = pipeHeight/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 = -6;
        if (gameOver){
            bird.y = birdY;
            pipeArray = [];
            score = 0;
            gameOver = false;

        }
    }


}

function detectCollison (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;

}