堆栈内存溢出
  繁体   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

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

问题描述

我是 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>

2 条回复

1楼
 computercarguy  1  2023-01-23 16:59:43

您需要做的是在 canvas 本身中创建一个“弹出窗口”。

您可以创建一个背景为白色的 object，然后在其中添加边框和文本。 您可能还需要添加一个按钮来关闭“弹出窗口”。

使用以下文章等资源来帮助解决问题，但我很确定您可以使用canvas标签中的 HTML 元素来帮助创建此模式框。 看起来您已经知道如何处理文本，所以这对您来说应该不难。

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

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

顺便说一句，canvas 对象与任何其他object对象一样，您可以跟踪它们。 对于canvas ，如果您删除一个 object 覆盖另一个 object，它会显示被覆盖的 object。这就是光栅和矢量之间的区别，其中光栅将替换视觉数据/元素和矢量图层的视觉信息。

2楼
 IDMatt  0  2023-01-23 16:28:57

如果你想让它非常简单，你可以使用“ 警报”方法 go。 将它放在runTimer function 中：

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

我不知道是否可以从 canvas 中添加自定义弹出窗口 - 对于一个简单的游戏来说，这可能有点矫枉过正？

问题未解决？试试本站强大的搜索功能，搜索： Javascript：计时器结束时，如何在 canvas 中显示弹出框？。
JAVASCRIPT弹出框显示

[英]JAVASCRIPT pop up box display

这是我的html： 这是我的js： 当我单击图像时，弹出窗口显示如下： 无论我是否单击第二把剑，弹出框仍将显示在第一把剑上，其id 。 如何解决这个问题？ ...

Javascript-弹出框运行计时器

[英]Javascript - Pop up box running off timer

我是Java的新手，我想创建一个简单的弹出框，该框在计数器运行时的特定时间显示（即，当计数器有10分钟的路程时，显示文本） 我从W3摘录了这段代码... 我以为这是超级容易的事，我事先道歉，我已经在网上搜寻...。 提前致谢 ...

如果测验在时间结束之前结束，我如何停止计时器 function？ Javascript

[英]How can I stop my timer function if the quiz ends before time is up? Javascript

我有一切正常工作，除了我尝试了一百万种不同的事情并且如果测验在 60 秒结束之前结束，则无法让计时器 function 停止倒计时。 这是 HTML 我不禁觉得答案就在我面前，但此时我已经盯着它看了好几个小时。 ...

如何获得此弹出框以显示单击的div的值？

[英]How can I get this pop up box to display the value of the div clicked?

我有一个搜索框，您输入一个名称，然后使用ajax列出匹配名称。 我还有一个div ，该div随名称的弹出而弹出，另一个div弹出，显示该div与之匹配的人的名字。 这是我的代码： PHP： 所有这些都有效，它将获取所有名称并将其列出。 林设置输入值等于名字和姓氏，所以我可 ...

如何使用 Javascript 弹出打印对话框？

[英]How can I pop-up a print dialog box using Javascript?

我有一个带有“打印”链接的页面，该链接将用户带到对打印机友好的页面。 客户希望在用户到达打印友好页面时自动出现一个打印对话框。 如何使用 javascript 做到这一点？ ...

将鼠标悬停在链接上时如何防止弹出框？

[英]How can I prevent pop up box when hovering over link?

我正在尝试修复我的网页。 我有一个小问题。 当我将鼠标悬停在我的链接上时，此弹出框会覆盖文本。 解决此问题的最佳方法是什么？ 感谢您的任何提示 我在下面添加了一个 img 以便更好地理解。 http://imgur.com/a/Nwqv4 。文本 ...

JavaScript弹出框

[英]Javascript pop up box

我在网站上创建了一个弹出框。 我将弹出框添加到3个单独的按钮中，由于某种原因，该弹出窗口仅适用于第一个按钮。 我在第一个按钮上删除了id标签：id =“ myBtn”，然后弹出窗口在第二个按钮上起作用，但在第三个按钮上仍然不起作用 在弹出框上，我还希望有一个链接将用户定向到联系 ...

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 JAVASCRIPT弹出框显示 Javascript-弹出框运行计时器 如果测验在时间结束之前结束，我如何停止计时器 function？ Javascript 如何获得此弹出框以显示单击的div的值？ 如何使用 Javascript 弹出打印对话框？ 如何在画布圆上附加jQuery Click事件处理程序以显示弹出框 将鼠标悬停在链接上时如何防止弹出框？ JavaScript弹出框 如何在每次访问时显示一次JavaScript弹出窗口？ 当我单击带有此代码的按钮时，如何显示弹出窗口：？
相关标签
 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM