Question

我正在制作一款简单的游戏。几乎完成它除了计时器有一个小故障，我无法弄清楚它是做什么的。当你按下一个按钮时，画布上的HTML5文本开始从35倒数到0.在第一次运行时没关系。但是，如果您选择再次播放而不刷新，则计时器开始倒计时更快。这是代码。

var timer = 35;

ctx.fillText("Countdown: " + timer, 320, 32);

function resetReggie(){
    reggie.x = canvasWidth / 2;
    reggie.y = canvasHeight / 2;
}

//Starts Timer for Timed Game
function timedMsg()
{
    resetReggie();
    ballsCaught = 0;
    timer = 35;
    alert('Pick up as many as you can in ' + timer + ' seconds');
    countDown();
        var t=setTimeout(function() {
        var again = confirm("TIMES UP! You Gathered " + ballsCaught + " Balls! Play Again?");
            if (again === true){ 
                timedMsg(); 
                resetReggie(); 
            }
                if (again === false){
                resetReggie();
                ballsCaught = 0;
                timer = 35;
                }
        }, timer * 1000);

}

function countDown() {
    if (timer != 0){
        timer-=1;
        setTimeout('countDown()', 1000);
    }
}

Answer 1

我认为问题在于

    }, timer * 1000);

在评估“计时器”时，您的值最多为34，以设置超时。因为你把它初始化为35但是然后调用countDown（）将它减少到34，那么你有一个确认（）的调用，它可能让'timer'减少更多。因此，对timedMsg（）的后续调用发生得太快，导致countDown（）被调用两次。尝试以下（我在节点中运行它），然后将4更改为6.

function countDown() {
    console.log("Countdown: " + timer, 320, 32);
    if (timer != 0) {
        timer -= 1;
        setTimeout(countDown, 1000);
    }
}
function timedMsg() {
    timer = 5;
    countDown();
    var t=setTimeout(function() {
        timedMsg();
    }, 4 * 1000);
}
timedMsg();

Answer 2

正如我的评论所述，每次开始新游戏时，您都会看到正在降低超时值。结果，这减少了每次的时间。

试试这个：

var timeout = currentTime = 5;
var int = setInterval(function() {
    console.log(currentTime);
    currentTime--;
    if(currentTime < 0) {
    var again = confirm('Play again?');
    if(again) {
        currentTime = timeout;
    }
    else {
        clearInterval(int);
    }
    }
}, 1000);

http://jsfiddle.net/gRoberts/CsyYx/

查看您的控制台（Chrome中的F12），或更新代码以写入浏览器以查看它是否正常工作;）

计时器在第二次运行时计数更快

2 个答案: