は、私は私が得たすべてはやった</p> <p>サイモン（<a href="https://en.wikipedia.org/wiki/Simon_(game)" rel="nofollow">https://en.wikipedia.org/wiki/Simon_(game)</a>）と呼ばれる記憶ゲームを作成しようとしているループ

Question

内で、特定の時間の後に関数を呼び出します。唯一の問題は、完全なシーケンスを表示する必要がある場合（プレイヤーが間違ったボタンを押した場合、または新しいシーケンスが追加された場合）、すべてのサウンドが同時に再生され、ボタンがスプリットのみで点滅することです秒。 1つのボタンが最初に表示され、そのサウンドが再生され、次に次のボタンに進むようにするにはどうすればよいですか？ forループ内にsetTimeoutを設定しようとしましたが、 'btn'が定義されていないというエラーが表示されます。ここで

は私のコードです：

$(document).ready(function(){ 
var button = $(".buttons"); 
var redbtn = $("#red"); 
var bluebtn = $("#blue"); 
var greenbtn = $("#green"); 
var yellowbtn = $("#yellow"); 
var allButtons = [redbtn, bluebtn, greenbtn, yellowbtn]; 
var sequence, playerTurn, wins, strict, seqPosition; 

startGame(); 

function startGame() { 
    console.log("Starting game..."); 
    strict = confirm("Would you like to play the difficult mode?"); 
    sequence = []; 
    playerTurn = false; 
    wins = 0; 
    computerTurn(); 
} 

function computerTurn() { 
    seqPosition = 0; // position of player in sequence 
    $("#count").html(wins); 
    console.log("It's the computer's turn"); 
    if (wins === 20) { 
     alert("You win!"); 
     startGame(); 
    } else { 
     sequence.push(Math.floor(Math.random() * 4)); 
     console.log("Picked new button"); 
     playSequence(); 
    } 
} 

function playSequence() { 
    setTimeout(function(){ 
     console.log("Playing the sequence... " + sequence.toString()); 
     playSound(allButtons[sequence[0]]); 
     var progress = false; 
     for (var i = 1; i < sequence.length; i++){ 
      console.log(i); 
      playSound(allButtons[sequence[i]]) 
     } 
     playerTurn = true; 
    }, 1000) 
} 

function playSound(btn) { 
    btn.toggleClass("act"); 
    console.log("Playing the sound..."); 
    var link; 
    switch (parseInt(btn.attr("val"))) { 
      case 0: 
       link = "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"; 
       break; 
      case 1: 
       link = "https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"; 
       break; 
      case 2: 
       link = "https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"; 
       break; 
      case 3: 
       link = "https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"; 
       break; 
    } 
    var audio = new Audio(link); 
    audio.play(); 
    setTimeout(function(){ 
     btn.toggleClass("act") 
    }, 700); 
} 

button.on("click", function(){ 
    if (playerTurn) { 
     var btnVal = parseInt($(this).attr("val")); 
     if (btnVal === sequence[seqPosition]) { 

      console.log("Correct button pressed!"); 
      playSound(allButtons[sequence[seqPosition]]); 
      seqPosition++; 
      console.log("seq position is " + seqPosition); 
      setTimeout(function(){ 
       if (seqPosition === sequence.length) { 
        playerTurn = false; 
        wins++; 
        computerTurn(); 
       } 
      }, 1000); 

     } else { 
      playerTurn = false; 
      if (strict) { 
       alert("You lose!"); 
       startGame(); 
      } else { 
       console.log("Incorrect button pressed!"); 
       seqPosition = 0; 

       var audio = new Audio("horn.mp3"); 
       audio.play(); 
       playSequence(); 
      } 
     } 
    } 
}); 

}）;

フィドル：https://jsfiddle.net/otep6yx0/

Answer 1

私はあなたをお勧め：shuffleArray（ランダム）

• 遅延実行（ミリ秒間実行不能）
ループ ためで
• 生命維持（すぐ-呼び出される関数式）（詳細はclosure inside loopsまたはsettimeout in for loopを参照）

だからコードは次のとおりです。

$(document).ready(function() { 
 
    var button = $(".buttons"); 
 
    var redbtn = $("#red"); 
 
    var bluebtn = $("#blue"); 
 
    var greenbtn = $("#green"); 
 
    var yellowbtn = $("#yellow"); 
 
    var allButtons = [redbtn, bluebtn, greenbtn, yellowbtn]; 
 
    var sequence, playerTurn, wins, strict, seqPosition; 
 

 
    startGame(); 
 

 
    function startGame() { 
 
    console.log("Starting game..."); 
 
    strict = confirm("Would you like to play the difficult mode?"); 
 
    sequence = []; 
 
    playerTurn = false; 
 
    wins = 0; 
 
    computerTurn(); 
 
    } 
 

 
    function shuffleArray(array) { 
 
    for (var i = array.length - 1; i > 0; i--) { 
 
     var j = Math.floor(Math.random() * (i + 1)); 
 
     var temp = array[i]; 
 
     array[i] = array[j]; 
 
     array[j] = temp; 
 
    } 
 
    return array; 
 
    } 
 

 
    function sleep(milliseconds) { 
 
    var start = new Date().getTime(); 
 
    for (var i = 0; i < 1e7; i++) { 
 
     if ((new Date().getTime() - start) > milliseconds) { 
 
     break; 
 
     } 
 
    } 
 
    } 
 

 
    function computerTurn() { 
 
    seqPosition = 0; // position of player in sequence 
 
    $("#count").html(wins); 
 
    console.log("It's the computer's turn"); 
 
    if (wins === 20) { 
 
     alert("You win!"); 
 
     startGame(); 
 
    } else { 
 
     sequence = shuffleArray([0, 1, 2, 3]); 
 
     console.log("Picked new button"); 
 
     playSequence(); 
 
    } 
 
    } 
 

 
    function playSequence() { 
 
    for (var i = 0; i < sequence.length; i++) { 
 
     (function (i) { 
 
     setTimeout(function() { 
 
      console.log("Playing the sequence... " + sequence.toString()); 
 
      playSound(allButtons[sequence[0]]); 
 
      var progress = false; 
 
      console.log(i); 
 
      playSound(allButtons[sequence[i]]); 
 
      if ((i + 1) == sequence.length) { 
 
      setTimeout(function() { 
 
       $(".buttons.act").removeClass('act'); 
 
       playerTurn = true; 
 
      }, 1000); 
 
      } 
 
     }, i * 1000); 
 
     })(i); 
 
    } 
 
    } 
 

 
    function playSound(btn) { 
 
    $(".buttons.act").removeClass('act'); 
 
    btn.toggleClass("act").show(); 
 
    console.log("Playing the sound..."); 
 
    var link; 
 
    switch (parseInt(btn.attr("val"))) { 
 
     case 0: 
 
     link = "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"; 
 
     break; 
 
     case 1: 
 
     link = "https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"; 
 
     break; 
 
     case 2: 
 
     link = "https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"; 
 
     break; 
 
     case 3: 
 
     link = "https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"; 
 
     break; 
 
    } 
 
    var audio = new Audio(link); 
 
    audio.play(); 
 
    } 
 

 
    button.on("click", function (e) { 
 
    if (playerTurn) { 
 
     var btnVal = parseInt($(this).attr("val")); 
 
     if (btnVal === sequence[seqPosition]) { 
 
     console.log("Correct button pressed!"); 
 
     playSound(allButtons[sequence[seqPosition]]); 
 
     seqPosition++; 
 
     console.log("seq position is " + seqPosition); 
 
     if (seqPosition === sequence.length) { 
 
      playerTurn = false; 
 
      wins++; 
 
      computerTurn(); 
 
     } 
 
     } else { 
 
     playerTurn = false; 
 
     if (strict) { 
 
      alert("You lose!"); 
 
      startGame(); 
 
     } else { 
 
      console.log("Incorrect button pressed!"); 
 
      seqPosition = 0; 
 
      var audio = new Audio("horn.mp3"); 
 
      audio.play(); 
 
      playSequence(); 
 
     } 
 
     } 
 
    } 
 
    }); 
 
});

h1 { 
 
    font-size: 3em; 
 
} 
 

 
.buttons { 
 
    cursor: pointer; 
 
    height: 200px; 
 
    width: 200px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.act { 
 
    background-color: black !important; 
 
} 
 

 
#red { 
 
    background-color: red; 
 
} 
 

 
#red:active { 
 
    background-color: black; 
 
} 
 

 
#blue { 
 
    background-color: blue; 
 
} 
 

 
#blue:active { 
 
    background-color: black; 
 
} 
 

 
#green { 
 
    background-color: green; 
 
} 
 

 
#green:active { 
 
    background-color: black; 
 
} 
 

 
#yellow { 
 
    background-color: yellow; 
 
} 
 

 
#yellow:active { 
 
    background-color: black; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<div class="container-fluid"> 
 
    <h1>Simon Game</h1> 
 

 
    <div class="buttons" id="red" val="0"></div> 
 
    <div class="buttons" id="blue" val="1"></div> 
 
    <div class="buttons" id="green" val="2"></div> 
 
    <div class="buttons" id="yellow" val="3"></div> 
 

 
    <div class="row"> 
 
     <div class="col-md-5"></div> 
 
     <div class="col-md-1"><h4>Count: <span id="count">0</span></h4></div> 
 
    </div> 
 
</div>

Answer 2

setTimeoutを使用すると、forループ中断されません：ミリ秒単位の最後にforループがループを、関係なく、setTimeout。

1つの選択肢は、setTimeoutの内側に自分自身を呼び出す生命維持を使用している：ここでは

function playSequence() { 

     console.log("Playing the sequence... " + sequence.toString()); 
     playSound(allButtons[sequence[0]]); 

     var i = 0 
     var progress = false; 

     (function loop(){ 
      if(i++ == sequence.length) return; 

      setTimeout(function(){ 
       playSound(allButtons[sequence[i]]) 
       loop(); 
     },1000);  

     })(); 
     playerTurn = true; 

} 

は、あなたの更新フィドルです：https://jsfiddle.net/gerardofurtado/oz2gjved/