Simon Spiel Javascript, wie synchronisiere ich die Lichter der Tasten nicht aufeinander mit Animation() und Verzögerung() JQUERY?

Question

Ich mache ein Simon-Spiel und ich nehme die Deckkraft von 1 bis 0,3 und zurück zu 1 jedes Mal, wenn eine Sequenz stattfindet. Es funktioniert fast, aber der Fall, der Probleme verursacht, ist, wenn ich in der Sequenz die gleiche Farbe hintereinander habe. GRÜN, GRÜN, ROT, BLAU zeigt beispielsweise nur einen grünen und einen roten und einen blauen Druck an. Es ist ein Problem mit dem Timing, weil die Logik gut funktioniert. Hier ist mein Code

$(document).ready(function(){ 


let simon={ 
     colors:["green","red","yellow","blue"], 
     sequence:[], 
     userSequence:[], 
     strict:false, 
     buttonSounds : {}, 
     init: function(){ 
     let objectContext=this; 


     $("#start").on("click",function(){ 

      objectContext.setSounds(); 


      //executes for the first time 
    objectContext.emptyAllSequences(); 
      //I generate the first of the sequence 
     objectContext.generateAndAddRandomColor(); 
      //I display the sequence on the board 
     objectContext.displaySequenceOnBoard(); 


      }); 

      $("#title").addClass('tada animated'); 

      $("#strict").on("click",function(){ 
      $(this).toggleClass("active"); 

      if($(this).hasClass("active")){ 
       objectContext.strict=true; 
      }else{ 
       objectContext.strict=false; 
      } 

      }); 

     $(".button").on("click",function(){ 
      const color=$(this).attr("data-color"); 
      objectContext.lightButton(color,0); 
      objectContext.userSequence.push(color); 


      let isSequenceCorrect=objectContext.checkUserSequence(); 

     /* console.log("sequenceCorrect "+isSequenceCorrect); 
     console.log("sequence "+objectContext.sequence); 
     console.log("user sequence "+objectContext.userSequence); 
     console.log("user sec length "+objectContext.userSequence.length); 
     console.log("sec length "+objectContext.sequence.length);*/ 
      if(objectContext.userSequence.length===objectContext.sequence.length || !isSequenceCorrect){ 

       if(isSequenceCorrect){ 
     setTimeout(function(){objectContext.generateAndAddRandomColor(); 
        objectContext.displaySequenceOnBoard(); 
        //reset the userSequence to check the whole sequence again 
        objectContext.emptyUserSequence(); }, 1500);    
       }else{ 

        //if strict mode is on 
        if(strict){ 
        //user looses 
        $("#count").html("Lost"); 
        //wipe sequence array 
        objectContext.emptyAllSequences(); 
        $("#start").removeClass("active"); 
        }else{ 

        setTimeout(function(){ 
       //change this to generate another sequence instead of displaying the existent  
        objectContext.displaySequenceOnBoard(); 
        //reset the userSequence to check the whole sequence again 
        objectContext.emptyUserSequence(); }, 1500);   



        } 
       } 
      } 
    }); 

    }, 
     setSounds:function(){ 

     this.buttonSounds["green"] = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"); 
     this.buttonSounds["red"] = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"); 
     this.buttonSounds["yellow"] = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"); 
     this.buttonSounds["blue"] = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"); 

     }, 

     emptyUserSequence: function(){ 
      this.userSequence.length=0; 
     }, 

     emptyAISequence: function(){ 
       this.sequence.length=0; 
     }, 

     emptyAllSequences:function(){ 
     this.emptyUserSequence(); 
     this.emptyAISequence(); 
     }, 
     updateCount: function(){ 
     $("#count").html(this.sequence.length); 

     }, 

     checkUserSequence:function(){ 

     for(let i=0,len=this.userSequence.length;i<len;i++){ 

      if(this.userSequence[i]!== this.sequence[i]){ 
      return false; 
      } 

     } 


     return true;  
     }, 

     generateAndAddRandomColor:function(){ 

     const randColorIndex=Math.floor(Math.random()*4); 


     const randColor=this.colors[randColorIndex]; 
     this.sequence.push(randColor); 
     this.updateCount(); 

     }, 

     displaySequenceOnBoard: function(){ 

     for(let i=0,len=this.sequence.length;i<len;i++){ 

      // this.buttonSounds[this.sequence[i]].play(); 
      this.lightButton(this.sequence[i],i); 


     }//end for 
     }, 
     lightButton: function(color,i){ 

     var objectContext=this; 

        $("#"+color).delay(400*i) 
     .animate({opacity : 0.3}, 300,function(){ 

       objectContext.buttonSounds[color].play(); 
        $("#"+color).animate({opacity : 1}, 150); 


       }); 


     } 
    } 
simon.init(); 
}); 

Hier ist der Codepen. Sie müssen Start drücken, um das Spiel zu starten, und wenn die Reihenfolge wächst und auf dem Brett angezeigt wird, taucht das Problem auf, das zuvor kommentiert wurde, was könnte passieren ?. Vielen Dank!

http://codepen.io/juanf03/pen/jrEdWz?editors=1111

Answer 1

Sie Einstellung auf einmal mehrere Verzögerungen auf dem gleichen Element, und das neueste ersetzt nur die vorhandenen.

Anstatt Verzögerungen zu verwenden, übergeben Sie eine complete Funktion mit Ihrer Animation und geben Sie die gesamte verbleibende Sequenz. Zur Veranschaulichung, ersetzen Sie die aktuellen displaySequenceOnBoard() mit diesen beiden Funktionen:

displaySequenceOnBoard: function(){ 
    $(".button").removeClass("enabled"); 
    this.lightButtonsInSequence(this.sequence); 

    }, 

    lightButtonsInSequence: function(sequence) { 
    var color = sequence[0] 
    var remainingSequence = sequence.slice(1) 
    var lightNextButtonFunction = remainingSequence.length > 0 ? jQuery.proxy(function(){ 
       this.lightButtonsInSequence(sequence.slice(1)); 
       }, this) : null; 
    console.log("Lighting color: " + color); 
    $("#"+color).animate({opacity : .3}, 300).animate({opacity : 1}, 150, lightNextButtonFunction) 

    } 

Hier ist es eingesteckt in die CodePen und working.