Make timer stop when user wins game
Hi,
I'm making a drag-and-drop kids game that includes a timer countdown.
If a user matches all items in time, a "You win!" dialog box pops up. If a user fails to match all items before the clock reaches 0, a "Game over" dialog box pops up.
You can view a demo of the game here (be sure to click "Start the Clock" first):
http://spanishforkidsbykids.com/playa/demo/
The issue I'm having is that the clock doesn't stop when a user wins the game, so the "Game Over" popup still appears behind the "You Win" popup.
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);
}
});
As you can see, I tried creating a variable called "winner" that changes from 0 to 1 when a user wins. Then I tried making the "Game Over" popup only appear if timer equals 0 and winner equals 0 (so the popup won't appear if a user won), but this isn't working.
Any help is appreciated. Thank you!
Lauren