Untitled

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    width: 100%;
    background-color: black;
} 
</style>
</head>

<h1 align="center"></h1>my jumper game </h1>
<p align="center"> </p>A Fun flappy-bird like game</p><//p>



<canvas id="canvas" width="900" height="400">
  Your browser does not support the HTML5 canvas tag.
  
</canvas>
<br> </br>
<button id="jump">Jump</button>
<body onload="startGame()">
<script>

window.onload = function() {
  let btn = document.getElementById("jump");
  btn.onclick = jump;
};

let count = 0;

function jump() {
    count += 1;
    //changing the y position
    y -= 25;
    //clearing the canvas
    context.clearRect(0, 0, 600, 400);
     
    //redrawing the circle   
    context.beginPath();
    context.arc(x, y, 50, 0, 2 * Math.PI);
    context.fillStyle="red";
    context.fill();

    //drawing the count value
    context.font = '25px Arial';
    context.fillStyle = 'white';
    
  context.fillText("Count: " + count, 20, 30);
if (y <= 0) {
            y = 350  ;
        }
        window.requestAnimationFrame(draw);


}

    


var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var x = 450;
    var y = 350;

    



    





</script>

</body>
</html>
Editor is loading...