Javascript game with timer

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('Decrement()',1000);

时，我应该一直在使用setTimeout(Decrement,1000);

拆除单引号和括号后的“减量”解决我的问题。

Answer 2

除非你的游戏中使用某种形式的忙循环的，即是这样的：

while (1) { 
    // process next event 
} 

...那么你应该不需要担心。您的JavaScript引擎会自动将用户事件与计时器事件交织在一起，因此计时器不应该饿死。

Answer 3

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

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

只要不使用一个繁忙的循环

Answer 4

一种方法：使用

var S_LEFT = 180; 
function myTicker(){ 
    console.log('tick'); 
    S_LEFT -= 1; 
    if(S_LEFT === 0) doSomething(); 
    $('#seconds').html(S_LEFT); 
}; 

$('#start').on('click', function(){ 
    window.setInterval(myTicker, 1000); 
}); 

@Juan门德斯的方式setTimeout and no Jquery：

var S_LEFT = 180; 
function tick(){ 
    console.log('tick'); 
    S_LEFT -= 1; 
    if(S_LEFT === 0){ 
    alert('Boom'); 
    } else { 
    document.body.innerHTML = S_LEFT; 
    window.setTimeout(tick, 1000); 
    } 
}; 
//document.addEventListener('DOMContentLoaded',tick,false); 
tick(); 

Answer 5

所有这些答案对我来说似乎太复杂。

为什么就不能在第一次开始使用

var beginTimestamp = Math.floor(Date.now()/1000) 

计时器在数秒时间戳然后，让你的最终

var endTimestamp = beginTimestamp + (3*60) 

然后在更新，得到的秒数与

剩余

var numSecondsRemaining = endTimestamp - Math.floor(Date.now()/1000) 

and finally

if(numSecondsRemaining <= 0) { /* end game */ } 

格式化，只是做

var date = new Date(numSecondsRemaining*1000); 
var minutes = "0" + date.getMinutes(); 
var seconds = "0" + date.getSeconds(); 
var formattedTime = minutes.substr(-2) + ':' + seconds.substr(-2); 

这种方法不受该setTimeout的可能容易受到任何funkiness。它也小得多，并且基本上不需要数学。