檢查點擊次序不工作

Question

我想讓JS檢查點擊次序（就像在Simon Game中一樣）。其實我正在做這個遊戲，並被困在這個。它從乞討中凍結。
該代碼生成22個數組中的隨機數，其值爲0至3. 類似於[1,0,0,1,1,3,1，...]
之後，用戶必須點擊div算術級數中的元素：
frist - div [1]然後點擊兩個div [1,0]，然後用戶點擊三個div [1,0,2]等等 - 和函數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(); 
})()