"Simon Says"计算机随机选择未正确显示

我正在编码一个" simon say say" freecodecamp的项目，该项目可以跟踪计算机的随机颜色选择和用户点击响应，以遵循点亮的颜色模式。

但是，我遇到了一个问题。。。当计算机随机运行选择时，我的颜色不会将其不透明度重新变回非透明度。

我尝试将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>

您的代码一直在颜色中迭代，每个选择随机颜色并触发它，因此，将立即触发1-4 [不同]随机选择的1-4 [不同]。相反，我认为每次单击start时，您都会将随机颜色推向classVariable，然后迭代这些颜色。但是，您不能仅用for循环迭代它们，因为您想要每个循环之间的延迟。因此，您将随后将setTimeout S本身本身用于下一个迭代的函数。

尝试一下：

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

相关内容

最新更新

热门标签：