1
私はコンピュータのランダムな色の選択とユーザーのクリックの反応を追跡するFreecodeCamp用の "Simon Says"プロジェクトをコーディングしています。"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')){
\t var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
myAudio.play();
}else if($(this).is('.blue')){
\t var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
myAudio.play();
}else if($(this).is('.yellow')){
\t var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
myAudio.play();
}else if($(this).is('.green')){
\t 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++){
\t let ranSelect = colors[Math.floor(Math.random() * 4 /*colors.length*/)];console.log(ranSelect);
classVariable.push(ranSelect);console.log(classVariable);
\t $(ranSelect).toggleClass(".grass").css("opacity",0.23);
\t if($(ranSelect).is('.red')){
setTimeout(function(){
var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
myAudio.play();
},1000);
\t }else if($(ranSelect).is('.blue')){
setTimeout(function(){
\t var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
myAudio.play();
},1000);
}else if($(ranSelect).is('.yellow')){
setTimeout(function(){
\t var myAudio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
myAudio.play();
},1000);
}else if($(ranSelect).is('.green')){
setTimeout(function(){
\t 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(){
\t computerDisplay();
},1000);
});
});div{
margin:0 auto;
}
.red{
\t width:100px;
\t height:100px;
\t background-color:red;
}
.blue{
\t width:100px;
\t height:100px;
\t background-color:blue;
}
.green{
\t width:100px;
\t height:100px;
\t background-color:green;
}
.yellow{
\t width:100px;
\t height:100px;
\t 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>
をあなたが問題を明確にもらえますか？ 「開始」をクリックすると、ランダムに四角形を選択してサウンドを再生し、四角形が短く透明になり、次に不透明に戻ります。期待される行動や発散する場所を説明できますか？ – ryachza
コンピュータによってランダムな四角形が選択されている場合、サウンドファイルの再生以上の問題が発生しています。色は一度に1つずつ点灯しません。代わりに3色または2色が一度に点灯します。返信ありがとうございます。 – AJAX101
その動作を複製できません。私は 'classVariable'が一度だけ追加されているので、複数の正方形のライトが見えることはありません。繰り返しはありません。質問のコードは最新のものですか？ 'classVariable'を反復して一度に1つずつ点灯させたい場合は、タイムアウト後に後続の各インデックスを処理する必要があります。 – ryachza