Untitled

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <canvas  style="border: 1px solid black" id="canvas"><
<style type="text/css">
  body{
    padding:0;
    margin: 0;
  }
</style>
<script type="text/javascript">
    var cvs = document.getElementById("canvas");
    var ctx = cvs.getContext("2d");
  cvs.width = window.innerWidth;
  cvs.height = window.innerHeight;
    var x = 0;
    var y = cvs.height/1.5;
    var bird = new Image();
    var yPos = y-26;
    var vPos = 5;
    var g = 0.4;
    var xPos = 20
    var grd = ctx.createLinearGradient(0, 0, cvs.width, cvs.height);
    bird.src = "flappy_bird_bird.png";
    var rep = new Image();
    rep.src = "reeat.png"
    var score = 0;
    var enemy = [];
    var yR = 0;
    enemy[0] = {
        x:cvs.width,
        y: cvs.height/1.5-50

    }
  console.log('Рекорд',cvs.height);
    function yourscore(){
        ctx.font = "50px Verdana";
        ctx.fillText("Счет: "+score,500,50);
    }
    function Enemes(){
        for (var i = 0; i < enemy.length; i++){
            ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.fillRect(enemy[i].x, enemy[i].y-100, 50, 150)
        enemy[i].x--;
        yR = Math.random()*623;
        if (enemy[i].x == 125) {
            enemy.push({
                x : cvs.width,
                y : yR
            })}
            if(enemy[i].x==5){
             score++;
            }

            else if (xPos+bird.width>=enemy[i].x
                && xPos<= enemy[i].x +50
                && yPos + bird.height >= enemy[i].y-100
                && yPos <= enemy[i].y +150
                ){
              ctx.font = "50px Verdana"
              ctx.fillText("game over", 200,200)
              repeat()

              /*document.location.reload()*/
            }

        }


        }
        function zxc(){
            Enemes()
            Enemes()
            Enemes()
            Enemes()
            Enemes()


            Enemes()
            Enemes()
            Enemes()
            Enemes()
            Enemes()

            Enemes()
            Enemes()
            Enemes()
            Enemes()
            Enemes()
            Enemes()

          requestAnimationFrame(zxc)
      }

        requestAnimationFrame(zxc   )


        /*if (20 + bird.width >= enemy[i].x
            && yPos + bird.height >= enemy[i].y){
            location.reload()
        }*/
function repeat(){
ctx.drawImage(rep, 10,10,100,100)

}

    function drawBird(){
        ctx.clearRect(0, 0, cvs.width, cvs.height)
        drawG();

        ctx.drawImage(bird, xPos, yPos);
        draww();
        yourscore()
// function moveUp(){
//         vPos = 10;
//         vPos = -vPos;
//     }

        yPos=yPos+vPos;
        vPos=vPos+g;


        if (yPos+bird.height < 0){
            vPos=5;
        }

        if (yPos+bird.height > y) {
            yPos = y-bird.height
        }
        /*
        else if(yPos-bird.height-50 <y-76){
            yPos+2
        }
    */

    }
    function drawG(){
        grd.addColorStop(0, "purple")
        grd.addColorStop(1, "pink")
        ctx.fillStyle = grd;
        ctx.fillRect(0, 0, cvs.width, cvs.height)
    }
    function draww(){
        ctx.beginPath();
        ctx.fillStyle = "black"
        ctx.fillRect(0,y, cvs.width, 20)
    }
    document.addEventListener("keypress", moveUp)
     //   document.addEventListener("keyup", moveDown)
    function moveUp(){
        vPos = 10;
        vPos = -vPos;
    }

  //  function moveDown(){
  //    yPos+=50;
   // }
    setInterval(drawBird, 10);

</script>
</body>
</html>