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频道的视频链接 - 在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

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

1 个答案: