Javascript: How can i display a pop up box in the canvas when timer ends?-CodePudding

i am very new to javascript and i have been stuck with this issue for a while, where i want to display a pop up box with a message "Game Over, you ran out of time" so the player knows the game is finished.The game is simple, when the game starts a countdown will commence and the user has to answer as many questions correctly within the time limit, for each correct answer, a red ball will travel upwards and the score will increment.The seconds and run-timer function, is in example i modified it a bit, but now i am lost as i really don't know to go about it, i want to modify it further so when the timer reaches 0:00 a window should pop up.Here is my full code so far.

<!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 onl oad="startGame()">

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

<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let x = 450, y = 350;
let count = 0;

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


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

function checkSecond(sec) {
  if (sec < 10 && sec >= 0) {sec = "0"   sec};
  if (sec < 0) {sec = "59"};
  return sec;
}

function runTimer() {
  const presentTime = document.getElementById('timer').innerHTML;
  const timeArray = presentTime.split(/[:] /);
  let m = timeArray[0], s = checkSecond((timeArray[1] - 1));
  if ( s == 59 ){ m -= 1 }
  if ( m < 0 ) {
    return
  }
  
  document.getElementById('timer').innerHTML = m   ":"   s;
  
  
  
}
setInterval(runTimer, 1000);


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

  const answer2 = document.querySelector("#Q2").value 
  if (answer2 == 25) jump();
}

function jump() {
    count  = 1;
    //changing the y position
    y -= 6;
}

function draw() {
    //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';
    let theTime = document.getElementById('timer').textContent;
    context.fillText("Timer: "   theTime, 200, 30);
  
    window.requestAnimationFrame(draw);
}
draw();

</script>




</body>
</html>

CodePudding user response：

If you want to keep it very simple you could go with the "alert" method. Place it inside the runTimer function:

if (m < 0) { 
  alert("You ran out of time!");
  return;
}

I don't know if it's possible to add a custom popup from within the canvas - maybe this would be a little overkill for a simple game?

CodePudding user response：

What you would need to do is to create a "popup" within the canvas itself.

You can create an object with a white background color, the add a border and text within it. You'd probably also need to add a button to close the "popup".

Use resources like the below articles to help figure it out, but I'm pretty sure you can use HTML elements within the canvas tag to help create this modal box. It looks like you already know how to deal with text, so this shouldn't be difficult for you.

https://www.tutorialspoint.com/html5/html5_canvas.htm

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas

BTW, canvas objects are just like any other object in that you can keep track of them. With canvas, if you delete an object is covering another object, it reveals the covered object. This is the difference between raster and vector, where raster would replace the visual data/elements and vector layers the visual information.