A simple game (flappy bird ) using html and javascript on html canvas

bird.html

<canvas id="gc" height="600" width="600"></canvas>
<h1 id="scor"></h1>
<p id="hint"></p>
<script>
  window.onload = function(){
    canv = document.getElementById("gc");
    ctx = canv.getContext("2d");
    scor = document.getElementById("scor");
    hint = document.getElementById("hint");
    document.addEventListener("keydown", keyPush);
    setInterval(game, 1000/20);
  }
// column position of bar
  bc = 25;
  score = 0;
  a = 9.8; // acceleration
  xv = 0; //x- velocity
  px=10;//x-position
  py=10;//y-position
  bv=0.25;//velocity of bar
  yv=0.5;//y-velocity
  gs=20;//grid size
  tc=30;//tile count
  hs=7;//size of hole on bar

  incScore = true;
  over = false;
  hp = Math.floor(Math.random() * (tc-hs)); //new position of the hole

  function game(){
    bc = over ? bc : bc - 0.25 - (score * 0.05); //create new bar untill game over
    px+=xv;
    py+=yv;
    yv = over ? 0 : yv + 0.5 * 1000 * Math.pow(15/1000, 2);//update y velocity untill game over
    
    if(bc < px && incScore){ // increase score
      score++;
      incScore = false;
    }
    
    if(bc+2<0){  //create new bar after one disappears
      bc = tc -1;
      hp = Math.floor(Math.random() *(tc-hs))-2;
      incScore = true;
    }


    if((px>=bc && px<=bc+1) && !(py>=hp && py<(hp+hs)) ){ //for game over
      over = true;
    }
    
    //// test for game over
    if(py<1){
      over = true;
      yv = 0;
    }
    if(py>=tc-1){
      over = true;
      yv =0;
    }
    
    
    // fill screen for different items on the screen
    ctx.fillStyle ="black";
    ctx.fillRect(0,0,canv.width,canv.height);


    ctx.fillStyle = "blue"
    for(var i = 0; i<30; i++){
      bx = (bc*gs);
      by = (i*gs);
      ctx.fillRect(bx,by , gs+18, gs-2);
    }



    ctx.fillStyle = "black"
    for(var i = hp; i<hp+hs; i++){
      bx = (bc*gs);
      by = (i*gs);
      ctx.fillRect(bx,by , gs+18, gs-2);
    }

    ctx.fillStyle = "red"
    for(var i = 0; i<30; i++){
      bx = i*gs;
      by = 0
      ctx.fillRect(bx,by , gs-2, gs-2);
      bx = i*gs;
      by = 29*gs;
      ctx.fillRect(bx,by , gs-2, gs-2);
    }



    ctx.fillStyle = "orange"
    ctx.fillRect(px*gs, py*gs, gs-2, gs-2);
    text = over ? `GAME-OVER score: ${score}` : `SCORE : ${score}`;
    scor.innerHTML = text;
    if(over){
      hint.innerHTML = 'Reload to play again';
    }

  }
  
  //update the position based on the key press events
  function keyPush(evt){
    switch(evt.keyCode) {
      case 37:
          px--;
        break;
      case 38:
          py--;
          yv = -0.75;
        break;
      case 39:
          px++;
        break;
      case 40:
            py++;
        break;
    }
  }
</script>