Timer Stops after I drop the first item
Im trying to do a drag and drop game..but when the user drops the first item correctly, the timer stops even though the other items aren't finished yet.
here is the code
- $(window).load(function(){
- var timer;
- var done = true;
- var winner = 0;
- $("#startClock").click( function(){
- var counter = 60;
- $("#1, #2, #3, #4, #5, #6, #7, #8, #9, #10").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 id='goodJob' title='Excellent!'><a class='btn button' href='sample.html'>Next Level</a></div>").dialog();
- },500);
- winner = 1;
- clearInterval(timer);
- $('#win')[0].play();
- }
- }
- });
- if(!timer){
- timer = setInterval(function() {
- counter--;
- if (counter >= 0) {
- $("#count").text(counter);
- }
- if (counter === 0 && winner === 0) {
- $("<div title='You lose!'><a class='btn button' href='sample.html'>Next Level</a></div></div>").dialog();
- clearInterval(timer);
- $('#fail')[0].play();
- }
- }, 1000);
- }
- });
-
- $("#1Drop").droppable({
- accept: "#1", tolerance: "fit",
- drop: function(event, ui) {
- if(ui.draggable.is("#1")){
- $(this).addClass("correct").find("p").html("correct!");
- done = false;
- ui.draggable.fadeOut(500);
- $(this).fadeOut(500,function(){
- done = true;
- });
- }
- }
- });
- $("#2Drop").droppable({
- accept: "#2", tolerance: "fit",
- drop: function(event, ui) {
- if(ui.draggable.is("#2")){
- $(this).addClass("correct").find("p").html("correct!");
- done = false;
- ui.draggable.fadeOut(500);
- $(this).fadeOut(500,function(){
- done = true;
- });
- }
- }
- });
- $("#3Drop").droppable({
- accept: "#3", tolerance: "fit",
- drop: function(event, ui) {
- if(ui.draggable.is("#3")){
- $(this).addClass("correct").find("p").html("correct!");
- done = false;
- ui.draggable.fadeOut(500);
- $(this).fadeOut(500,function(){
- done = true;
- });
- }
- }
- });