如何使用 Javascript 在 HTML5 Canvas 中放置一个计时器？

Question

我已经开始了一个带有精灵角色的平台游戏。 我希望能够在左上角的某个地方设置一个计时器，每秒计数一次（00:00、00:01）。

我以前做过一个计时器，但它倒计时了，这是不同的，因为我在我的游戏循环中使用 requestAnimationframe。 将不胜感激有关如何完成此操作的一些提示。

我已经使用此代码制作了一个死亡计数器：

ctx.font = "20px Arial";
ctx.fillStyle = "white";
ctx.fillText("Deaths: " + deaths, 50, 50);

在一个重置玩家位置的函数中使用死亡++。 但是，我无法弄清楚如何继续。

这是我的游戏的 jsFiddle（你可能需要缩小，游戏是 1300x600。箭头键来控制角色。）：

https://jsfiddle.net/z3orewvb/

Answer 1

你应该能够做这样的事。在回调函数，我传回interval对象，因此，如果需要，您可以清除的时间间隔，因此不会继续在后台运行。（或者，如果你需要在某个点停止计数器).. 在这个演示中，我将计数器停止在 11..

 function counter(callback) { var i = 0; let interval = setInterval(function() { callback(i, interval); i++; }, 1000); } counter((currentTime, intervalObject) => { if (currentTime === 11) { clearInterval(intervalObject); } else { const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); const data = ` <svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'> <foreignObject width='100%' height='100%'> <div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'> <pre>${currentTime}</pre> </div> </foreignObject> </svg> `; const img = new Image(); const svg = new Blob([data], { type: "image/svg+xml;charset=utf-8" }); const url = URL.createObjectURL(svg); img.onload = function() { ctx.drawImage(img, 0, 0); URL.revokeObjectURL(url); }; img.src = url; } });

 <canvas id="canvas"></canvas>

Answer 2

严格地说你可以在你的loop()做计时器，所以它更多地与游戏逻辑和渲染耦合。 只需将开始时间存储在外面，每当您重绘时，计算差异：

 let start=Date.now(); function reset() { start=Date.now(); } let x=0,y=0,dx=0,dy=0; function loop() { let seconds=Math.floor((Date.now()-start)/1000); let minutes=Math.floor(seconds/60); seconds%=60; dx+=x<cnv.width/2?1:-1; dy+=y<cnv.height/2?1:-1; x+=dx; y+=dy; let ctx=cnv.getContext("2d"); ctx.fillStyle="#8080FF"; ctx.beginPath(); ctx.arc(x,y,10,0,Math.PI*2); ctx.fill(); ctx.stroke(); ctx.clearRect(0,0,30,15); ctx.strokeText(minutes.toString().padStart(2,"0")+":"+seconds.toString().padStart(2,"0"),0,10); requestAnimationFrame(loop); } loop();

 <button onclick="reset()">Reset</button><br> <canvas id="cnv"></canvas>

当然，还有一个通用的重复计时器setInterval() 。 但是，如果在同一位置上绘制了其他任何内容，则您可能会有工件：

 let x=0,y=0,dx=0,dy=0; function loop() { dx+=x<cnv.width/2?1:-1; dy+=y<cnv.height/2?1:-1; x+=dx; y+=dy; let ctx=cnv.getContext("2d"); ctx.fillStyle="#8080FF"; ctx.beginPath(); ctx.arc(x,y,10,0,Math.PI*2); ctx.fill(); ctx.stroke(); requestAnimationFrame(loop); } loop(); let start=Date.now(); let counter=0; function reset() { start=Date.now(); counter=0; } setInterval(()=>{ let ctx=cnv.getContext("2d"); ctx.clearRect(0,0,30,25); let seconds=Math.floor((Date.now()-start)/1000); let minutes=Math.floor(seconds/60); seconds%=60; ctx.strokeText(minutes.toString().padStart(2,"0")+":"+seconds.toString().padStart(2,"0"),0,10); counter++; minutes=Math.floor(counter/60); seconds=counter%60; ctx.strokeText(minutes.toString().padStart(2,"0")+":"+seconds.toString().padStart(2,"0"),0,20); },1000); function problem() { let wait=Date.now()+1500; while(Date.now()<wait); }

 <button onclick="reset()">Reset</button><button onclick="problem()">Problem</button><br> <canvas id="cnv"></canvas>

此外，还添加了一个“问题”按钮（按几次）： setInterval()已尽力而为，但它不是万无一失的，它不能补偿错过/跳过的计划，第二个根本没有发生在setInterval()基于计数器（较低的）。