クリックの順序が正しくないことを確認してください。

Question

JSのクリックを確認しようとしています（Simon Gameのように）。実際に私はこのゲームをやっているし、これに固執してしまった。それは懇願から凍る。
0から3までの値を持つ22個の乱数を生成します。 は[1、0、2、1、1、3、1、...]のようになります
そのユーザーがdiv算術進行の要素：
frist-div [1] 2つのdivs [1、0]をクリックして3つのdivs [1、0,2]などをクリックすると、function checkClickはユーザーがクリックしたかどうかをチェックします適切な数のdiv。
ここにコードがあります。ユーザーのクリックを理解している限り、それを待つことはありません。私は、任意のヒントをいただければ幸いです。

function getRandArray() { 
 
    var array = []; 
 
    for (var i = 0; i < 22; i++) { 
 
    array[i] = Math.floor(Math.random() * 4); 
 
    } 
 
    return array; 
 
} 
 
var elems = document.querySelectorAll('.bigButton'); 
 

 
function checkClick(array, level) { 
 
    var counter = 0; 
 
    var result; 
 
    for (var i = 0; i < elems.length; i++) { 
 
    elems[i].addEventListener("click", function(e) { 
 
     if (+this.dataset.sound === array[counter]) { 
 
     counter++; 
 
     if (level === counter) { 
 
      result = true; 
 
      console.log(' level passed'); 
 
     } 
 
     result = false; 
 
     } 
 
    }) 
 
    } 
 
    return result; 
 
} 
 

 
function playGame() { 
 
    var randIndexArr = getRandArray(); 
 
    document.getElementsByTagName('p')[0].innerHTML = randIndexArr; 
 
    console.log(randIndexArr); 
 
    for (var i = 0; i < 22; i++) { 
 
    for (var j = 0; j <= i; j++) { 
 
     if (j === i) { 
 
     if (!(checkClick(randIndexArr, i))) { 
 
      j = 0; //start over from the current level 
 
     } 
 
     } 
 
    } 
 
    } 
 
} 
 
playGame();

.bigButton { 
 
    height: 25px; 
 
    width: 35px; 
 
    border: 2px solid #464646; 
 
    margin: 1em; 
 
    text-align: center; 
 
    padding-top: 5px; 
 
    display: inline-block; 
 
}

<div class="bigButton" id="greenButton" data-sound="1">1 
 
</div> 
 
<div class="bigButton" id="redButton" data-sound="2">2 
 
</div> 
 
<div class="bigButton" id="yellowButton" data-sound="3">3 
 
</div> 
 
<div class="bigButton" id="blueButton" data-sound="4">4 
 
</div> 
 
<p></p>

Answer 1

あなたは、ドキュメントの負荷に一度だけのイベントリスナーを追加しthis.dataset.sound前+を削除し、アレイを横断する前にresult = false;を移動する必要があります。

編集：
これは作業コードです。これは、本体の最後に配置する必要があります。

var counter = 0; 
var array = []; 
var level = 1; 

function getRandArray() { 
    for (var i = 0; i < 22; i++) { 
     array[i] = 1 + Math.floor(Math.random() * 4); 
    } 
    return array; 
} 

function add_listeners(){ 
    var elems = document.querySelectorAll('.bigButton'); 
    console.log(elems.length); 
    console.log(elems); 
    for (var i = 0; i < elems.length; i++) { 
     elems[i].addEventListener("click", function(e) { 
      console.log('click'); 
      console.log(this.dataset.sound); 
      if (this.dataset.sound == array[counter]) { 
       counter++; 
       console.log(counter); 
       if (level == counter) { 
        console.log('level passed'); 
        level++; 
        counter = 0; 
       } 
      } 
      else { 
        console.log("Start the level again"); 
        counter = 0; 
      } 
     }) 
    } 
} 

document.onload = (function() { 
    var randIndexArr = getRandArray(); 
    document.getElementsByTagName('p')[0].innerHTML = randIndexArr; 
    console.log(randIndexArr); 
    add_listeners(); 
})()