为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开始倒计时(我知道没有可用的时间来阻止时间进入负值,以及不必要的代码,即当前时间和时间.如上所述,已经证明了几次实施尝试都没有成功,

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

要进一步添加可能的相关信息.我没有使用任何API(JQuery等).只是HTML5,CSS,JavaScript(使用记事本++).

感谢您的帮助,并指出您目前看到的代码中的任何错误.另外我想另外一个div标签,只有1个被用于画布的div标签,所有文本,图像和音乐都是通过js,再一次没有额外的API

编辑:下面是带编辑的代码,还要注意渲染功能中的if语句块,这是为了阻止减号显示在屏幕上(但是不考虑在后台功能仍在更新而负值越来越大,我将研究解决这个问题.

//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