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

Question

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.

 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();

 canvas { width: 100%; background-color: black; }

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1?0" /> </head> <h1 align="center"></h1>my jumper game </h1> <p align="center"> </p>A Fun flappy-bird like game</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()" id="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> </body> </html>

Answer 1

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

Answer 2

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?