我是javascript的新手，我已经被这个问题困扰了一段时间，我想显示一个弹出框，上面有一条消息“游戏结束，你没时间了”，这样玩家就知道游戏结束了。游戏很简单，当游戏开始时倒计时将开始，用户必须在时限内正确回答尽可能多的问题，对于每个正确的答案，一个红色的球将向上旅行和得分将增加。秒和运行计时器功能，是在例子中我修改了一点，但现在我迷路了，因为我真的不知道去它，我想进一步修改它，所以当计时器达到0：00一个窗口应该弹出。这里是我的完整代码到目前为止。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
width: 100%;
background-color: black;
}
</style>
</head>
<h1 align="center"></h1>my jumper game </h1>
<p align="center"> </p>A Fun flappy-bird like game</p><//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()">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>
<script>
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();
</script>
</body>
</html>
2条答案
按热度按时间sczxawaw1#
您需要做的是在画布本身中创建一个“弹出窗口”。
你可以创建一个白色背景的对象，然后在其中添加边框和文本。你可能还需要添加一个按钮来关闭“弹出窗口”。
使用下面文章中的资源来帮助解决这个问题，但是我确信您可以使用
canvas标记中的HTML元素来帮助创建这个模态框，看起来您已经知道如何处理文本，所以这对您来说应该不难。https://www.tutorialspoint.com/html5/html5_canvas.htm
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas
顺便说一句，画布对象就像任何其他的
object一样，你可以跟踪它们。与canvas，如果你删除一个对象覆盖另一个对象，它揭示了覆盖的对象。这是光栅和矢量之间的区别，光栅将取代视觉数据/元素和矢量层的视觉信息。t2a7ltrp2#
如果你想让它变得非常简单，你可以使用“alert“方法，把它放在
runTimer函数中：我不知道是否有可能添加一个自定义弹出从画布内-也许这将是一个简单的游戏有点矫枉过正？