Stop countdown timer if user wins game

Question

I'm working on a kid's game that involves a countdown timer. If a user matches all elements before the timer runs out, a "You Won!" popup appears. If they do not match all elements before the timer hits zero, a "Sorry, You Lost" popup appears.

The issue I'm having is that the clock doesn't stop counting down after a user wins the game and the "You Won!" popup appears, so the "Sorry, You Lost" popup still appears once the timer reaches zero.

Here is my code:

$("#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);
    }
});

View my demo game here. (Click "Start the Clock" in the top right corner.) Any help is appreciated. Thanks!

Lauren

Answer 1

You need to call clearInterval() on the reference of 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);
       }
    });

Also add a call to clearInterval(timer) when the user wins the game, but first check if timer is defined.

Answer 2

I don't see the code for when the player wins, but you would need to explicitly stop the counter when the payer wins. An else if would work for that.

Answer 3

The easiest way to accomplish this is probably just to add a && to your second condition to check if the player has won the game. EDIT - also add an else to clear timer if player has won.

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

This way the 'sorry you lost' message will only appear if the timer runs out and they haven't yet won. If you're not already doing so, you could create a variable that changes if the player wins and check the value of that variable in the second half of the above condition.