Question

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

然而，我遇到了一个问题。。。当计算机随机运行选择时，我的颜色不会将其不透明度改回非透明状态。

我尝试将setTimeout更改为更快更慢的时间（例如10或1000毫秒），以将颜色重置为不透明，但这样做无效。

这是我目前的代码：

$(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 computerDisplay(){
for(var i = 0;i< colors.length;i++){
	let ranSelect = colors[Math.floor(Math.random() * 4 /*colors.length*/)];console.log(ranSelect);
    classVariable.push(ranSelect);console.log(classVariable);
	$(ranSelect).toggleClass(".grass").css("opacity",0.23);
	if($(ranSelect).is('.red')){
    setTimeout(function(){
var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
                myAudio.play();
      },1000);
	}else if($(ranSelect).is('.blue')){
    setTimeout(function(){
	var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
                myAudio.play(); 
      },1000);
  }else if($(ranSelect).is('.yellow')){
    setTimeout(function(){
	 var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
                myAudio.play();
      },1000);
  }else if($(ranSelect).is('.green')){
    setTimeout(function(){
	 var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
                myAudio.play(); 
        },1000);
  }
 var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
                myAudio.play();
setTimeout(function(){
    $(ranSelect).css("opacity", 1);
},500);
}
}


$(".start").click(function(){
setTimeout(function(){
	computerDisplay();
},1000);
});

});

div{
  margin:0 auto;
}

.red{
	width:100px;
	height:100px;
	background-color:red;
}


.blue{
	width:100px;
	height:100px;
	background-color:blue;
}

.green{
	width:100px;
	height:100px;
	background-color:green;
}

.yellow{
	width:100px;
	height:100px;
	background-color:yellow;
}

<html>
  <head>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="fsp.css" type="text/css" />
    <script src="fsp.js"></script>
  <body>
  <div class="container text-center">
  <div class="row">
  <div class="red col-xs-6 grass"></div>
  <div class="blue col-xs-6 grass"></div>
  </div>
  <div class="row">
  <div class="green col-xs-6 grass"></div>
  <div class="yellow col-xs-6 grass"></div>
  </div>
  </div>
  <div class="start">
  <button>start</button>
  </div>
  </body>
  </head>
</html>

Answer 1

您的代码一直在迭代颜色，并且每个颜色都选择一个随机颜色并触发它，因此将立即触发随机选择的1-4 [不同]。相反，我认为每次点击start，您都会将随机颜色推送到classVariable，然后重复这些颜色。但是，您不能只使用for循环迭代它们，因为您希望每个循环之间有延迟。因此，您可以使用随后setTimeout自身的函数进行下一次迭代。

尝试使用此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);
  });
});

“西蒙说”计算机随机选择无法正确显示

1 个答案: