Simon game javascript，我如何使用animation（）和delay（）JQUERY同步按钮的灯光，使其不相互碰撞？

我正在做一个Simon游戏，每次序列有位置时，我都会将不透明度从1取到0.3，再返回到1。它几乎可以工作，但问题是在序列中，我的颜色是相同的。例如，绿色、绿色、红色、蓝色仅显示一个绿色按键和一个红色和一个蓝色按键。这是一个时间问题，因为逻辑工作正常。这是我的密码

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

$（文档）.ready（函数（）{
让西蒙={
颜色：[“绿色”、“红色”、“黄色”、“蓝色”]，
顺序：[]，
用户序列：[]，
严格：错，
按钮声音：{}，
init:function（）{
让objectContext=this；
$（“#开始”）。在（“单击”，函数（）上）{
objectContext.setSounds（）；
//第一次执行
objectContext.emptyAllSequences（）；
//我生成序列的第一个
objectContext.GenerateAndAndAndomColor（）；
//我在黑板上显示序列
displaySequenceOnBoard（）；
}); 
$（“#title”）.addClass（'tada animated'）；
$（“#严格”）。在（“单击”，函数（）{
$（此）.toggleClass（“活动”）；
if（$（this）.hasClass（“活动”））{
objectContext.strict=true；
}否则{
objectContext.strict=false；
}
});
$（“.button”）。在（“单击”，函数（）{
常量颜色=$（this.attr（“数据颜色”）；
objectContext.lightButton（颜色，0）；
objectContext.userSequence.push（颜色）；
让isSequenceCorrect=objectContext.checkUserSequence（）；
/*console.log（“sequenceCorrect”+isSequenceCorrect）；
log（“sequence”+objectContext.sequence）；
log（“用户序列”+objectContext.userSequence）；
log（“用户秒长度”+objectContext.userSequence.length）；
log（“sec length”+objectContext.sequence.length）*/
if（objectContext.userSequence.length==objectContext.sequence.length | | |！isSequenceCorrect）{
如果（是否顺序正确）{
setTimeout（函数（）{objectContext.GenerateAndAndAndomColor（）；
displaySequenceOnBoard（）；
//重置userSequence以再次检查整个序列
objectContext.emptyUserSequence（）；}，1500）；
}否则{
//如果“严格模式”处于启用状态
如果（严格）{
//用户松动
$（“#计数”）.html（“丢失”）；
//擦除序列阵列
objectContext.emptyAllSequences（）；
$（“#开始”）.removeClass（“活动”）；
}否则{
setTimeout（函数（）{
//更改此选项以生成另一个序列，而不是显示现有序列
displaySequenceOnBoard（）；
//重置userSequence以再次检查整个序列
objectContext.emptyUserSequence（）；}，1500）；
}
}
}
});
},
setSounds:function（）{
此.buttonSounds[“绿色”]=新音频（“https://s3.amazonaws.com/freecodecamp/simonSound1.mp3");
此.buttonSounds[“red”]=新音频（“https://s3.amazonaws.com/freecodecamp/simonSound2.mp3");
此.buttonSounds[“黄色”]=新音频（“https://s3.amazonaws.com/freecodecamp/simonSound3.mp3");
此.buttonSounds[“blue”]=新音频（“https://s3.amazonaws.com/freecodecamp/simonSound4.mp3");
},
emptyUserSequence:函数（）{
this.userSequence.length=0；
},
EmptyIsequence:function（）{
这个.sequence.length=0；
},
emptyAllSequences:function（）{
这个.emptyUserSequence（）；
this.emptyAISequence（）；
},
updateCount:function（）{
$（“#count”）.html（this.sequence.length）；
},
checkUserSequence:函数（）{
对于（设i=0，len=this.userSequence.length；i您一次在同一个元素上设置了多个延迟，而最新的延迟只是替换现有的延迟

不要使用延迟，而是将
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)

  }

在这里，它被插入到您的代码笔中。
答案很好，但您能解释一下为什么我“同时在同一个元素上设置多个延迟”？…我不明白为什么…@Juan每次调用lightButton（）时，它都会在具有命名颜色的元素上设置$（）.delay（）。第一次调用lightButton（“绿色”）它在
#green
上设置一个延迟。然后第二次调用它（for循环中的下一次迭代）它在
#green
上设置了另一个更长的延迟。但是由于一个元素只能有一个延迟，第二个延迟取代了第一个延迟。清澈如水…非常感谢…我的最后一个代码笔是它工作得很好，声音不工作，但我将它添加到了你的函数中。现在我遇到了一个问题，当相同的颜色在同一行中时第二个声音不响……例如，红色只响第一个红色……会发生什么？我在第160行添加了声音，我已经通过降低时间解决了问题。文件来自amazon s3，因此如果你将超时设置得很低，第二次就不会响了……再次感谢！！效果非常好！