简体繁体 English

Javascript：计时器结束时，如何在 canvas 中显示弹出框？

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

user3569752 2023-01-23 15:50:00 40 2 javascript/ html/ canvas/ game-development

提示:本站为国内最大中英文翻译问答网站，提供中英文对照查看，鼠标放在中文字句上可显示英文原文。

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.我是 javascript 的新手，我已经被这个问题困扰了一段时间，我想在其中显示一个弹出框，其中包含一条消息“游戏结束，你的时间用完了”，这样玩家就知道游戏已经结束了。游戏很简单，当游戏开始时会开始倒计时，用户必须在限定时间内正确回答尽可能多的问题，对于每一个正确的答案，一个红色的球会向上移动并且分数会增加。秒数和运行计时器function，在示例中我对其进行了一些修改，但现在我迷路了，因为我真的不知道 go 关于它，我想进一步修改它，所以当计时器到达 0:00 时，应该弹出 window。这是到目前为止我的完整代码。

 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>

What you would need to do is to create a "popup" within the canvas itself.您需要做的是在 canvas 本身中创建一个“弹出窗口”。

You can create an object with a white background color, then add a border and text within it.您可以创建一个背景为白色的 object，然后在其中添加边框和文本。 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.使用以下文章等资源来帮助解决问题，但我很确定您可以使用canvas标签中的 HTML 元素来帮助创建此模式框。 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://www.tutorialspoint.com/html5/html5_canvas.htm

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

BTW, canvas objects are just like any other object in that you can keep track of them.顺便说一句，canvas 对象与任何其他object对象一样，您可以跟踪它们。 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.对于canvas ，如果您删除一个 object 覆盖另一个 object，它会显示被覆盖的 object。这就是光栅和矢量之间的区别，其中光栅将替换视觉数据/元素和矢量图层的视觉信息。

If you want to keep it very simple you could go with the " alert " method.如果你想让它非常简单，你可以使用“ 警报”方法 go。 Place it inside the runTimer function:将它放在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?我不知道是否可以从 canvas 中添加自定义弹出窗口 - 对于一个简单的游戏来说，这可能有点矫枉过正？

问题未解决？试试搜索： Javascript：计时器结束时，如何在 canvas 中显示弹出框？。