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>


<body onload="startGame()">

<div>Time left = <span id="timer"></span>
<script>

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


document.getElementById('timer').innerHTML =
  01 + ":" + 11;
startTimer();


function startTimer() {
  var presentTime = document.getElementById('timer').innerHTML;
  var timeArray = presentTime.split(/[:]+/);
  var m = timeArray[0];
  var s = checkSecond((timeArray[1] - 1));
  if(s==59){m=m-1}
  if(m<0){
    return
  }
  
  document.getElementById('timer').innerHTML =
    m + ":" + s;
  console.log(m)
  setTimeout(startTimer, 1000);
  
}

function checkSecond(sec) {
  if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
  if (sec < 0) {sec = "59"};
  return sec;
}

function submitAnswers(){




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

  const answer2 = document.querySelector("#Q2").value 
  if (answer2 == 25)
  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);
  
  context.font = '25px Arial';
    context.fillStyle = 'white';
    
  context.fillText("Timer: " + timer, 200, 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;
Editor is loading...