Javascript &引用;西蒙说;计算机随机选择未正确显示

Javascript &引用;西蒙说;计算机随机选择未正确显示,javascript,jquery,css,Javascript,Jquery,Css,我正在为FreecodeCamp编写一个“Simon Says”项目,该项目跟踪计算机的随机颜色选择和用户单击响应以跟踪亮起的颜色模式 然而,我遇到了一个问题。当计算机随机运行选项时,“我的颜色”不会将其不透明度更改回不透明 我尝试将setTimeout更改为更快和更慢的时间(例如,10或1000毫秒),以将颜色重置为不透明,但没有成功 这是我当前的代码: $(文档).ready(函数(){ 变量颜色=[“.red”、“.blue”、“.yellow”、“.green”]; var class

我正在为FreecodeCamp编写一个“Simon Says”项目,该项目跟踪计算机的随机颜色选择和用户单击响应以跟踪亮起的颜色模式

然而,我遇到了一个问题。当计算机随机运行选项时,“我的颜色”不会将其不透明度更改回不透明

我尝试将
setTimeout
更改为更快和更慢的时间(例如,10或1000毫秒),以将颜色重置为不透明,但没有成功

这是我当前的代码:

$(文档).ready(函数(){
变量颜色=[“.red”、“.blue”、“.yellow”、“.green”];
var classVariable=[];
$(“.grass”)。单击(函数(){
$(this.toggleClass(“.grass”).css(“不透明度”,0.23);
如果($(this).is('.red')){
var myAudio=new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
myAudio.play();
}如果($(this).is('.blue'),则为else{
var myAudio=new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
myAudio.play();
}else if($(this).is('.yellow')){
var myAudio=new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
myAudio.play();
}如果($(this).is('.green'),则为else{
var myAudio=new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
myAudio.play();
}
setTimeout(函数(){
$(“.grass”).css(“不透明度”,1);
}, 100);
});
功能计算机显示器(){
对于(var i=0;i
div{
保证金:0自动;
}
瑞德先生{
宽度:100px;
高度:100px;
背景色:红色;
}
蓝先生{
宽度:100px;
高度:100px;
背景颜色:蓝色;
}
格林先生{
宽度:100px;
高度:100px;
背景颜色:绿色;
}
黄先生{
宽度:100px;
高度:100px;
背景颜色:黄色;
}

开始

您的代码一直在迭代颜色,对于每种颜色,选择一种随机颜色并触发它,因此将立即触发1-4种随机选择的[不同的]颜色。相反,我认为每次单击
start
时,您都会将随机颜色推送到
classVariable
上,然后迭代这些颜色。但是,您不能只使用
for
循环来迭代它们,因为您希望在每个循环之间有一个延迟。因此,在下一次迭代中使用一个函数来设置超时

试试这个JavaScript:

$(document).ready(function(){
  var colors = ['.red','.blue','.yellow','.green'];
  var classVariable = [];

  $(".grass").click(function(){
    $(this).toggleClass(".grass").css("opacity",0.23);
    if($(this).is('.red'))
    {
      var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
      myAudio.play();  
    }
    else if($(this).is('.blue'))
    {
      var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
      myAudio.play();  
    }
    else if($(this).is('.yellow'))
    {
      var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
      myAudio.play(); 
    }
    else if($(this).is('.green'))
    {
      var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
      myAudio.play(); 
    }
    setTimeout(function(){
      $(".grass").css("opacity", 1);
    },100);
  });

  function doTheThing(index)
  {
    if(index < classVariable.length)
    {
      var target = $(classVariable[index]);
      var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');

      if(target.is('.red'))
      {
        myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
      }
      else if(target.is('.blue'))
      {
        myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
      }
      else if(target.is('.yellow'))
      {
        myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
      }
      else if(target.is('.green'))
      {
        myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
      }

      target.toggleClass(".grass").css("opacity",0.23);
      setTimeout(function(){
        myAudio.play();
      },250);
      setTimeout(function(){
        $(target).css("opacity",1);
        doTheThing(index + 1);
      },500);
    }
  }

  function computerDisplay()
  {
    classVariable.push(colors[Math.floor(Math.random() * colors.length)]);
    console.log(classVariable);

    doTheThing(0);
  }


  $(".start").click(function(){
    setTimeout(function(){
      computerDisplay();
    },1000);
  });
});
$(文档).ready(函数(){
变量颜色=['.red'、'.blue'、'.yellow'、'.green'];
var classVariable=[];
$(“.grass”)。单击(函数(){
$(this.toggleClass(“.grass”).css(“不透明度”,0.23);
如果($(this).is('.red'))
{
var myAudio=new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
myAudio.play();
}
如果($(this).is('.blue'),则为else
{
var myAudio=new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
myAudio.play();
}
else if($(this).is('.yellow'))
{
var myAudio=new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
myAudio.play();
}
如果($(this).is('.green'),则为else
{
var myAudio=new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
myAudio.play();
}
setTimeout(函数(){
$(“.grass”).css(“不透明度”,1);
},100);
});
函数设置(索引)
{
if(索引
您的代码一直在颜色中循环,