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。它也小得多，並且基本上不需要數學。