Javascript：計時器結束時，如何在 canvas 中顯示彈出框？

Question

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

Answer 1

您需要做的是在 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。這就是光柵和矢量之間的區別，其中光柵將替換視覺數據/元素和矢量圖層的視覺信息。

Answer 2

如果你想讓它非常簡單，你可以使用“ 警報”方法 go。 將它放在runTimer function 中：

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

我不知道是否可以從 canvas 中添加自定義彈出窗口 - 對於一個簡單的游戲來說，這可能有點矯枉過正？