javascript - Simon游戏javascript，如何同步按钮的灯不与animation()和delay()JQUERY相互踩？

Question

我正在做一个 Simon 游戏，每次出现序列时，我都会将不透明度从 1 设置为 0.3，然后再设置为 1。它几乎可以工作但是出现问题的情况是在序列中我连续有相同的颜色。例如，GREEN、G​​REEN、RED、BLUE 仅显示一次绿色按压、一次红色按压和一次蓝色按压。这是时间问题导致逻辑工作正常。这是我的代码

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

这是代码笔。您必须按开始才能开始游戏，随着序列的增长并显示在板上，出现之前评论的问题，可能会发生什么？。谢谢!

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

Answer 1

您一次在同一个元素上设置了多个延迟，最新的一个只是替换了现有的。

不要使用延迟，而是将 complete 函数与您的动画一起传递，并为其提供整个剩余序列。为了说明，将您当前的 displaySequenceOnBoard() 替换为这两个函数:

  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)

  }

这里是插入你的 CodePen 和 working .