Остановить таймер обратного отсчета, если пользователь выиграл игру

Я работаю над детской игрой с таймером обратного отсчета. Если пользователь сопоставляет все элементы до истечения времени таймера, выдается сообщение «Вы выиграли!» появляется всплывающее окно. Если они не совпадают со всеми элементами до того, как таймер достигнет нуля, появится всплывающее окно «Извините, вы потеряли».

Проблема, с которой я столкнулся, заключается в том, что часы не прекращают обратный отсчет после того, как пользователь выиграл игру, а сообщение «You Won!» появляется всплывающее окно, поэтому всплывающее окно «Извините, вы потеряли» все еще появляется, когда таймер достигает нуля.

Вот мой код:

$("#startClock").click( function(){
   var timer;
   var counter = 4;
   var winner = 0;
   var done = true;

   $("#boat").draggable({
    revert: "invalid", containment: "#wrapper",
    start: function(event, ui){
        if(!done) return false;
    },
    stop: function(event, ui){
        if($(".correct").length == $(".drop").length){
            setTimeout(function(){
                $("<div title='You did it!'>You won!</div>").dialog();
            },500);
            var winner = 1;
        }
    }
    });

    if(!timer){
      timer = setInterval(function() {
         counter--;
         if (counter >= 0) {
           span = document.getElementById("count");
           span.innerHTML = counter;
         }
         if (counter === 0 && winner === 0) {
           $("<div title='Game Over'>Sorry, game over!</div>").dialog();
           clearInterval(counter);
         }
       }, 1000);
    }
});

Просмотреть мою демо-игру здесь (Нажмите "Запустить часы" в правом верхнем углу.) Любая помощь ценится. Спасибо!

Лорен


javascript timer jquery countdown
person Lauren    schedule 03.03.2014    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вам нужно вызвать clearInterval() по ссылке setTimeout.

var timer;
    $("#startClock").click( function(){
       var counter = 60;
       if(!timer){
          timer = setInterval(function() {
         counter--;
          if (counter >= 0) {
             span = document.getElementById("count");
             span.innerHTML = counter;
          }
          if (counter === 0) {
             $("Sorry, you lost!").dialog();
             clearInterval(timer);
           }
         }, 1000);
       }
    });

Также добавьте вызов clearInterval(timer), когда пользователь выигрывает игру, но сначала проверьте, определен ли таймер.

person Eduardo Quintana    schedule 03.03.2014
comment
Я ценю помощь! Я только что обновил свой код в своем первоначальном посте, а также код в демо-игре, которую я разместил. У меня все еще есть проблема с остановкой часов, когда пользователь выигрывает игру. Я новичок в этом, и я уверен, что упускаю что-то очевидное, но любая дальнейшая помощь приветствуется. Спасибо! - person Lauren; 05.03.2014
comment
Вам нужно вызвать clearInterval со ссылкой на таймер clearInterval(timer). - person Eduardo Quintana; 05.03.2014
comment
Привет, @Lauren, я попробовал страницу, и таймер останавливается, когда ты выигрываешь, и когда ты выигрываешь, все в порядке, о.о. - person Eduardo Quintana; 05.03.2014

arrow_upward
0
arrow_downward

Я не вижу кода, когда игрок выигрывает, но вам нужно явно остановить счетчик, когда плательщик выиграет. А еще, если бы работало на это.

person Souleythemane    schedule 03.03.2014

arrow_upward
0
arrow_downward

Самый простой способ сделать это, вероятно, просто добавить && ко второму условию, чтобы проверить, выиграл ли игрок игру. РЕДАКТИРОВАТЬ - также добавить еще, чтобы очистить таймер, если игрок выиграл.

if (counter === 0 && /*check if player has not won*/) {
  $("Sorry, you lost!").dialog();
  clearInterval(counter);
}
else if (/*if player has won*/) {
  clearInterval(counter);

Таким образом, сообщение «Извините, что вы проиграли» будет появляться только в том случае, если таймер истек, а они еще не выиграли. Если вы еще этого не сделали, вы можете создать переменную, которая будет меняться, если игрок выиграет, и проверить значение этой переменной во второй половине приведенного выше условия.

person cerpintaxt    schedule 03.03.2014
comment
Я попытался реализовать следующее, но это просто предотвращает появление потерянного всплывающего окна. Есть идеи? if (counter === 0 && document.getElementByID("goodJob").css("display","block")) - person Lauren; 04.03.2014
comment
Да, извините, я думал, что основной целью было предотвратить всплывающие окна, но если вы также добавите условие else, вы можете остановить таймер, когда кто-то выиграет. Я отредактирую приведенный выше код, чтобы показать. У Эдуардо тоже есть идея написать выше. - person cerpintaxt; 04.03.2014
comment
О, вы тоже хотите знать, как проверить, выиграл ли игрок. Если вы разместите код, который показывает, как ваш код отображает текст «вы выиграли», я могу помочь вам понять это. Но в основном вы хотите установить переменную playerWon в 0, а затем изменить ее на 1, если игрок выиграет. Тогда приведенное выше условие будет просто if(counter ===0 && playerWon === 0). Есть смысл? - person cerpintaxt; 04.03.2014
comment
Я попытался реализовать код, который вы указали, но у меня возникла проблема с тем, что всплывающее окно «Вы теряете» вообще не отображается. Вы можете попробовать нажать «Запустить часы» в правом верхнем углу этой демонстрационной страницы: spanishforkidsbykids.com/playa/demo Есть идеи? Я ценю вашу помощь! - person Lauren; 04.03.2014
comment
Привет @Lauren, можете ли вы показать нам код, который вы используете для отображения всплывающего окна «Вы проиграли» в консоли, появляется сообщение об ошибке переключения. - person Eduardo Quintana; 04.03.2014
comment
Привет @Eduardo-Quintana Я указал код всплывающего окна You Lose в своем первоначальном сообщении. Я также отредактировал свое первоначальное сообщение, включив в него код You Win. Я использую диалоговые окна для отображения этой информации. Спасибо! - person Lauren; 05.03.2014