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() способом из мой таймер? Каждый раз, когда я пытаюсь запустить оба метода при нажатии «start», 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 и без 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) 

и, наконец,

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); 

Этот подход не влияет ни funkiness что SetTimeout может быть склонным к. Он также намного меньше и требует в основном математики.