带计时器的 JavaScript 游戏

Question

我正在修改一个 Javascript 游戏，需要在游戏板顶部添加一个倒计时器(从 3:00 分钟到 0 秒)。我已经编写了游戏和计时器，当用户单击游戏的“开始”按钮时计时器将启动。 (即比赛计时3分钟后结束)

我的问题是，由于 JavaScript 不是多线程的，当用户同时玩我的游戏时，我的游戏倒计时器将不允许运行(滴答)。这是正确的吗？

在我看来，除了使用新的多线程 JavaScript 库之外，还有一些方法可以让它发挥作用。

这是我的计时器:

<script type="text/javascript">
// set minutes
var mins = 3;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;

function countdown() {
    setTimeout('Decrement()',1000);
}

function Decrement() {
    if (document.getElementById) {
        minutes = document.getElementById("minutes");
        seconds = document.getElementById("seconds");
        // if less than a minute remaining
        if (seconds < 59) {
            seconds.value = secs;
        } else {
            minutes.value = getminutes();
            seconds.value = getseconds();
        }
        secs--;
        setTimeout('Decrement()',1000);
    }
}

function getminutes() {
    // minutes is seconds divided by 60, rounded down
    mins = Math.floor(secs / 60);
    return mins;
}

function getseconds() {
    // take mins remaining (as seconds) away from total seconds remaining
    return secs-Math.round(mins *60);
}
</script>

<script>
countdown();
</script>


<div id="timer">
    <input id="minutes" value="3" type="text" style="width: 14px; border: none; background-color:none; font-size: 16px; font-weight: bold;">:<input id="seconds" value="00" type="text" style="width: 26px; border: none; background-color:none; font-size: 16px; font-weight: bold;"> remaining
</div>

这是我的游戏中启动一切的部分:

<script>
$(function(){
    $("#button-start").click(game.start);
});
</script>

如何运行计时器中的 game.start 方法以及 countdown() 方法？每次我尝试在单击“开始”时运行这两种方法时，JavaScript 根本不运行。没有任何效果，它卡住了，我假设有两种方法试图同时运行？

Answer 1

你应该只使用setTimeout，那么它就不会阻塞

var initialTime = new Date();
function updateTimer() {
    if (new Date() - initialTime > (1000 * 1000 * 60 * 3) ) {
         document.getElementById('clock').innerHTML = formatTime();
         setTimeout(updateTimer, 1000);    
    }
}
updateTimer();

只是不要使用繁忙循环