javascript - 为 javascript 游戏创建计时器会产生不良结果

Question

我正在使用 Canvas/JavaScript 在 HTML5 中设计游戏。 我的目标是创建一个计时器，在您需要射击尽可能多的敌人时，它会从一定的分钟数倒计时到零。我一直忙于寻找有效的计时器，但一些实现导致浏览器崩溃(可能是无限循环)或 (timeInSeconds) 的倒计时变得很快。

这是我最近实现的代码，试图让它工作

function setTimerCountdown(){
timeInSeconds = timeInSeconds - 1;
    ctx.fillText(timeInSeconds, 200,180);
}

我已经有一个用于更新游戏的 setInterval 这是代码，这段代码位于 js 文件的底部

var main = function () {

var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
};

// Let's play this game!
reset();
var then = Date.now();
var fps = 60;
setInterval(main, 1000/fps); // Execute as fast as possible

然后我有额外的代码，例如渲染函数，它将图片和文本渲染到屏幕上，这里是代码

var render = function () {

returnKillsNeeded(stageNum);
            ctx.drawImage(startGameImg, 0,0);
            ctx.font = "24px Helvetica";
            ctx.textAlign = 'center';
            ctx.textBaseline = "top";
            ctx.fillText("press Enter to start", 250, 300);
            ctx.fill();
    if(gameStart){
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);


}
setInterval(setTimerCountdown, 1000);
setTimeOut(setTimerCountdown, 1000);
ctx.fillStyle="#522900";
ctx.fillRect(0,480,500,120);

这个想法是从 120 开始倒计时(我知道没有可用的捕捉来阻止时间进入负值，以及不必要的代码，即 currentTime 和 time. 如前所述，几次实现尝试都被证明是不成功的，

我的问题是，我应该在渲染方法中使用 setInterval 或 setTimeOut 或计时器的任何方面吗？上面引用的代码是否与我应该用来创建计时器的代码相同？我知道那里有很多示例，但我似乎无法深入了解如何将这些代码应用到我的代码中，而不会搞砸我迄今为止所做的所有工作。我附上了链接，我愿意用它来向你展示我的研究，但由于这个网站上的弹出窗口令人沮丧(修复你的代码结构)，我已经排除了来自名为 goTreeHouse 的 youtube channel 的视频链接 - 在 javascript 和几个堆栈中创建一个计时器已经问过的问题。

添加更多可能相关的信息。我没有使用任何 API(JQuery 等)。仅 HTML5、CSS、JavaScript(使用 Notepad++ )。

感谢您的帮助，同时指出您当前看到的代码中的任何错误。另外我想还有一个 div 标签，只有 1 个被使用是 Canvas 的 div 标签，所有文本、图像和音乐都是通过 js，再次没有额外的 API

编辑: 下面是编辑后的代码，还要注意渲染函数中的 if 语句 block ，这是为了阻止负数显示在屏幕上(但是它没有考虑到函数在后台仍在更新并且负值越来越大，我会研究解决这个问题。

//Thanks to GameAlchemist
function createCountDown(timeRemaining) {
    var startTime = Date.now();
    return function() {
    return timeRemaining - ( Date.now() - startTime );
    }
}
var currentCountDown = createCountDown(30000);

// Draw everything
var render = function () {



var countDownValue = currentCountDown();

returnKillsNeeded(stageNum);
            ctx.drawImage(startGameImg, 0,0);
            ctx.font = "24px Helvetica";
            ctx.textAlign = 'center';
            ctx.textBaseline = "top";
            ctx.fillStyle="#FF0000";
            ctx.fillText("press Enter to play", 250, 450);
            ctx.fill();
    if(gameStart){
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);


}

ctx.fillStyle="#522900";
ctx.fillRect(0,480,500,120);
ctx.drawImage(scoreImg, 22,522);
ctx.drawImage(livesImg, 360,522);

ctx.drawImage(progressImg, 200,492);
createProgressBar();
createProgressPercent();
ctx.fillText("progress", 170,492);
setEnemyHealthText();
drawPlayer();
if(countDownValue <=0){
    countDownValue = 0;
    }else{
ctx.fillText(countDownValue, 200,190);
}

Answer 1

使用闭包，几行代码就可以实现倒计时。
因为我猜你需要不止一个倒计时(每个阶段一个)，这里有一个返回倒计时函数的函数:

function createCountDown(timeRemaining) {
    var startTime = Date.now();
    return function() {
       return timeRemaining - ( Date.now() - startTime );
    }
}

就是这样!

现在要使用它，请执行以下操作:

// creating a coundown, at stage start
var currentCountDown = createCountDown(30000); // 30 seconds countdown

//... during the game, just use with :
var countDownValue = currentCountDown();     // in ms