繁体   English   中英

Javascript:计时器结束时,如何在 canvas 中显示弹出框?

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

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

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

您需要做的是在 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。这就是光栅和矢量之间的区别,其中光栅将替换视觉数据/元素和矢量图层的视觉信息。

如果你想让它非常简单,你可以使用“ 警报”方法 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.

 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM