Создайте случайный массив для сравнения между массивом пользователей и вспышками на Simon, говорит игра

Question

Я создаю симонную игру как проект студенческой работы в школе. я запугиваю "карточную игру" Динамически, вводя ячейки в таблицу в чистом js, теперь я хотел бы сделать "карточную игру" равной sh в случайной последовательности, чтобы я создал случайную переменную и добавил classList вывести случайно, но вот проблема

1) я хотел бы создать случайный массив для сравнения между массивом пользователей во время игры, и кажется, что я не могу сделать classLiss.add()

2) я бы хотел "fla sh" в "карточную игру", которая раз за разом будет разгораться sh один раз, а НЕ одновременно (а также при первом повороте он будет мигать один раз и во втором повороте) он будет всплывать sh Дважды {не в то же время.exc}) я использовал функцию setTimeout для удаления classList

Вот код для "отображения карты" и случайной функции:

function cards(user) {
    userchioce = parseInt(user.value);

    if (userchioce == 4) {
        var table = document.getElementById("mytable");
        document.getElementById("mytable").innerHTML = "";
        for (var i = 0; i < 2; i++) {
            var row = table.insertRow(0);
            for (var j = 0; j < 2; j++) {
                var cell = row.insertCell(-1);
            }
        }

        var t = document.getElementById("mytable");
        var idnum = 0;
        counter = 0;
        for (var r = 0; r < t.rows.length; r++) { //luop at length of rows 
            for (var c = 0; c < t.rows[r].cells.length; c++) { //luop at length of rows and cells 
                t.rows[r].cells[c].style.backgroundColor = colorarry[counter];
                t.rows[r].cells[c].innerHTML = colorarry1[counter];
                t.rows[r].cells[c].setAttribute("class", "td1");
                t.rows[r].cells[c].setAttribute("id", "tdd" + idnum++);
                counter++;

            }
        }
    }
    counter = 0;//end of if 4

        function getrandom(rnd) {
    rnd = Math.floor(Math.random() * userchioce);
    var id = "tdd";
    var fullid = id + rnd;
    var dispaly = document.getElementById(fullid);

    dispaly.classList.add("flash");
    {
        setTimeout(function () {
            dispaly.classList.remove("flash");

        }, 850);
    }
}

Answer 1

Хорошо, давайте сначала немного почистим. Вы создаете цикл для создания ячеек, затем повторяете цикл для их изменения, вы должны просто изменить их сразу.

if (userchioce == 4) {
    var table = document.getElementById("mytable");
    document.getElementById("mytable").innerHTML = "";
    var idnum = 0;
    for (var i = 0; i < 2; i++) {
        var row = table.insertRow(0);
        for (var j = 0; j < 2; j++) {
            var cell = row.insertCell(-1);
            cell.style.backgroundColor = colorarry[idnum];
            cell.innerHTML = colorarry1[idnum];
            cell.setAttribute("class", "td1");
            cell.setAttribute("id", "tdd" + idnum++);
        }
    }
}

Я также удалил переменную counter в пользу idnum переменная. Они оба были определены в 0 в одном и том же месте, а также увеличивались с одинаковой скоростью ...

Вы не можете отображать огни один за другим, потому что вы делаете это только один раз. Там должно быть место, где вы будете отслеживать предыдущие рандомы.

var moves = [];
function newTurn() {
    var rnd = Math.floor(Math.random() * userchioce);
    // Add the new random to the moves history.
    moves.push(rnd);
    //create a copy, we'll be playing with it.
    var movesToShow = moves.slice();
    showMove();
}

function showMove(moveList){
    //Remove first value of the list of moves and use it to show.
    var move = moveList.shift();
    var id = "tdd";
    var fullid = id + move;
    var display= document.getElementById(fullid);
    display.classList.add("flash");
    //Wait a little before removing the hightlight.
    setTimeout(function () {
        display.classList.remove("flash");
        if(moveList.length>0){
            //There are more moves, wait just a little
            setTimeout(function(){
               //Display a new move.
               showMove(moveList);
            },100);
        }
    }, 850);
}

// call this to start a new turn.
newTurn();

Также я хотел бы призвать вас исправить все опечатки в вашем скрипте. «dispaly», «userchioce», это усложнит вам задачу.