if condition java script

I am unable to solve this problem I think if conditions are not satisfied(to update the score and to reload the page). Demo of this programme. When I run the programme the score variable is not updating when pipes x cordinate crosses the agents x coordinate and also page should reload as agent and pipes coordinate interfere with each other at any time. I am posting javascript part here. The repository can be found on github.

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

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

// load images

var agent = new Image();
var fg = new Image();
var pipeSouth = new Image();
var cloud = new Image();

agent.src = "images/rick.png";
fg.src = "images/track.png";
pipeSouth.src = "images/pipeSouth.png";
cloud.src = "images/cloud.png"



// some variables
var constant;

var bX = 100;
var bY = 130;
var base = bY;
var score = 0;

document.addEventListener("keydown",moveUp);

function moveUp(){
    bY -= 100;
    setTimeout(land,500);
}

function land() {
    bY = base;
}


function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

// pipe coordinates

constant = 150;

var pipe = [];
var cld = [];

pipe[0] = {
    px : cvs.width,
    py : constant
};


cld[0] = {
    cx : cvs.width,
    cy : 0
};

function draw(){

    ctx.fillStyle = "#5c94fa";
    ctx.fillRect(0, 0, cvs.width, cvs.height);

    for (var j = 0; j < cld.length; j++) {

            ctx.drawImage(cloud,cld[j].cx,cld[j].cy,80,80);
            cld[j].cx-=1;

            if( cld[j].cx == 100 ){
                cld.push({
                    cx : cvs.width,
                    cy : getRandomArbitrary(cvs.height/3,cvs.height/2)
                }); 

        }
        }

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


        ctx.drawImage(pipeSouth,pipe[i].px,pipe[i].py);
        ctx.drawImage(fg,pipe[i].px,cvs.height-fg.height/2,fg.width,fg.height/2);

        pipe[i].px-=10;  // this should be such that if condition for equality should be
        //satisfied with cvs.weidth (canvas width) 

        if( pipe[i].px == 200 ){
            pipe.push({
                px : cvs.width,
                py : getRandomArbitrary(cvs.height/3,cvs.height-fg.height)
                /*py : Math.floor(Math.random()*cvs.height/2)*/
            }); 
        }

        if(pipe[i].x < bX){
            score+=1;
        }    

        // detect collision

        if( pipe[i].x < bX + 50 || pipe[i].y > bY +100){
            location.reload(); // reload the page
        }

    }

    ctx.drawImage(agent,bX,bY,50,100);

    ctx.fillStyle = "#000";
    ctx.font = "20px Verdana";
    ctx.fillText("Score : "+score,10,20);

    requestAnimationFrame(draw);
}

draw();