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>

<div>
<p>What is 10 times 4 ? <input type ="number" id="Q1"></p>
<p>What is 5 * 5 ? <input type ="number" id="Q2"></p>
<p>What is 5 * 3 ? <input type ="number" id="Q3"></p>
<button onclick="submitAnswers()">Submit</button>

</div>

<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;
};


function submitAnswers(){


  let score = 0;

  const answer1 = document.querySelector("#Q1").value 
  if (answer1 == 40)
  ++score;

  const answer2 = document.querySelector("#Q2").value 
  if (answer2 == 25)
  ++score;
  console.log("Score: " + score);


}




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...