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>
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 中添加自定義彈出窗口 - 對於一個簡單的游戲來說，這可能有點矯枉過正？
問題未解決？試試以下方法：
如果測驗在時間結束之前結束，我如何停止計時器 function？ Javascript
[英]How can I stop my timer function if the quiz ends before time is up? Javascript
如何在畫布圓上附加jQuery Click事件處理程序以顯示彈出框
[英]How to attach jquery click event handler on canvas circle to display pop up box
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.