Как получить случайно сгенерированный массив для сброса в простой игре памяти с jQuery

Question

Извините, если раньше об этом спрашивали,
Я искал через Stackoverflow, но не смог найти ничего, что ответило бы на мою проблему.

Я создаю простую игру памяти, онлайн-версию Simon, когда вы нажимаете кнопку «Пуск», она запускает приведенный ниже код для создания случайного массива (длиной 4) из четырех цветных кнопок. .
Но когда вы снова нажимаете «Пуск» для следующего раунда, он не очищает массив, а вместо этого создает второй, а затем проверяет ваш ввод на предмет того, что вы оба и правы, и правы, или правы. и вправо (в зависимости от случайного массива, созданного из кнопок).

Я пробовал buttonsToClick = [] в разделе else, но он не сбрасывается.
Я не знаю, что мне не хватает, я только изучаю JavaScript / jQuery в течение месяца, но я хотел проверить свои знания.

Отрезанный код:

var score = 0;

$("#score").html(`${score}`);

$("#button5").on("click", function() {
    var buttons = document.getElementsByClassName("js-button");
    var buttonsToClick = chooseRandomButtons(buttons);
    currentButtons = buttonsToClick;
    flashButtons(buttonsToClick, 0);

  var currentOrder = 0;
  $(".js-button").on("click", function() {
    var selectedButton = $(this)[0];
    var button = currentButtons[0];
    if (selectedButton === button) {
        currentButtons.splice(button,1);
        /*alert("Correct");*/
        score += 1;
        $("#score").html(`${score}`);
    } else {
        currentButtons = buttonsToClick;
        alert("Wrong. Click 'Start' to try again");
        score = 0;
        $("#score").html(`${score}`);
    }
  });
})

function chooseRandomButtons(buttons) {
    var buttonsToClick = [];
    var maxRandomNumber = buttons.length - 1;
    for (var i = 0; i < 4; i++) {
        buttonsToClick.push(buttons[randomIntFromInterval(0, maxRandomNumber)]);
    }

    return buttonsToClick;
}

function randomIntFromInterval(min, max) { // min and max included 
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function flashButtons(buttonsToClick, index) {
    setTimeout(function() {
        $(buttonsToClick[index]).fadeOut(500).fadeIn(500);
        if (index === buttonsToClick.length - 1) {
            return;
        }
        flashButtons(buttonsToClick, index = index + 1);
    }, 1000);
}

Answer 1

добро пожаловать в SO.

В общем, вы все делаете правильно с вашими массивами.
Проблема в вашем обработчике событий.

Каждый раз, когда вы нажимаете #button5, который, как мне кажется, является кнопкой запуска, вы регистрируетесь на всех ваших .js-button новых слушателях. Поскольку вы не отменяете привязку старых прослушивателей событий, они все еще активны.
Поскольку старые прослушиватели событий имеют ссылку на ваш старый массив, вы в основном проверяете кнопку против старой и новой игр.

Ваше решение состояло бы в том, чтобы отменить регистрацию старого, прежде чем зарегистрировать новый.
Это можно сделать, например, методом .off.
Ваш код должен выглядеть следующим образом:

var currentOrder = 0;
  $(".js-button").off("click").on("click", function() {
    var selectedButton = $(this)[0];
    var button = currentButtons[0];
    if (selectedButton === button) {
        currentButtons.splice(button,1);
        /*alert("Correct");*/
        score += 1;
        $("#score").html(`${score}`);
    } else {
        currentButtons = buttonsToClick;
        alert("Wrong. Click 'Start' to try again");
        score = 0;
        $("#score").html(`${score}`);
    }
  });

Обратите внимание на .off() там.
Документацию о методе можно найти здесь: https://api.jquery.com/off/

Answer 2

Вы можете начать каждую новую игру с пустого массива, а затем добавить в него sh случайную последовательность цветов. Добавляя еще один цвет каждый раунд, чтобы увеличить сложность.

Когда вы начинаете новую игру, просто начните с нового пустого массива.