检查点击次序不起作用

Question

我试图让JS检查点击顺序（比如Simon Game）。实际上我正在做这个游戏并且陷入困境。它冻结了乞讨  该代码在数组中生成22个随机数，其值从0到3。 比如[1,0,2,1,1,3,1，......] 之后，用户必须在算术级数中单击div元素：
frist - div [1]然后点击两个div [1,0]然后用户点击三个div [1,0,2]等等 - 并且 function checkClick 检查用户是否点击了div适当的数字。
这是代码，根据我的理解，它不会等待用户点击。如有任何提示，我将不胜感激：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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