Не получается вернутся в начало цикла, что я делаю не так?

Question

Есть код https://codepen.io/nepo92/pen/WNrVJMQ :

let level = [],
player = [],
game = [],
start = document.querySelector('button'),
blocks = Array.from(document.querySelectorAll('.elem')),
round = document.querySelector('.round__count');

/* Начало игры */

start.addEventListener('click', () => {
  start.innerHTML = 'Stop';
  round.innerHTML = `${level.length + 1}`

  let random = setInterval( function () {
  let choose = Math.floor(Math.random() * Math.floor(blocks.length));
  
    blocks[choose].addEventListener('click', () => {
      let items = blocks[choose].parentNode.childNodes;
  
      for (let i = 0; i < items.length; i++) {
        if( i % 2 == 1) {
          setTimeout( () => {
            items[i].classList.remove('active');
          }, 800)
        }         
      }
      blocks[choose].classList.add('active');
      })
  
      blocks[choose].click();
  
      level.push(choose);
  
      for (let i = 0; i < level.length; i++) {
        if (i = level.length) {
          clearInterval(random);
  
          /* Проверка массивов */
          for (let i = 0; i < blocks.length; i++) {
            
            /* Нажатие на кнопку */
            
            blocks[i].addEventListener('click', () => {
              let items = blocks[i].parentNode.childNodes;
        
              for (let i = 0; i < items.length; i++) {
                if( i % 2 == 1) {
                  setTimeout( () => {
                    items[i].classList.remove('active');
                  }, 800)
                }         
              }
              blocks[i].classList.add('active');
              let index = blocks.indexOf(blocks[i]);
              player.push(index);
    
              for (let i = 0; i < level.length; i++) {
                if (level[i] == player[i]) {
                  console.log('уровень пройден');
                  break;
                } else {
                  console.log('проигрыш');
                  setTimeout( function() {
                  location.reload();
                 }, 800)
                  }
                }
                console.log('новый уровень');
                /* Вот тут не получается вернутся */
              }) 
          }
          /* /Проверка массивов */
          }
        }
    }, 1800);

  /* Конец игры */

  start.addEventListener('click', () => {
    location.reload();
  })
})

HTML разметка:

<ul class="elem__box">
<li class="elem">elem_1</li>
<li class="elem">elem_2</li>
<li class="elem">elem_3</li>
<li class="elem">elem_4</li>
<button id="button">Start</button>
<span class="round">Round:  <span class="round__count">0</span></span>

CSS стили:

.active {
  color: red;
}

.elem__box {
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0;
}

.elem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 20px 40px;
  background-color: darksalmon;
  cursor: pointer;
}

#button {
  display: flex;
  justify-content: center;
  width: auto;
  margin: 15px 0 0 0;
  cursor: pointer;
}

Суть в том что через определенное время подсвечивается один элемент, потом скрипт останавливается, необходимо щелкнуть на этот элемент, скрипт запускается заново, потом подсвечиваются два элемента и так же надо щелкнуть по ним, потом 3 4 5 и т.д. пока игрок не ошибется, сделал только для одного уровня, а в начало цикла вернуться никак не получается, поможете?

Answer 1

let round = 1;
let maxRound = 4;
const baseColor = 'darksalmon';
const delay = 1500;



document.addEventListener('DOMContentLoaded', function(event) {
  init();
});


function init() {}

function clickBlock(target) {


}

function startGame(target) {

  console.log('start ' + round + 'round!')

  if (round > maxRound) return;

  document.getElementById('button').setAttribute('disabled', true);
  selectRandomBlock().then(selected => {
    for (const blockIndex of selected) {
      document.getElementsByClassName('elem').item(blockIndex).style.backgroundColor = baseColor;
      document.getElementById('round__count').innerText = round;
    }

    console.log( { selected, round })
    round += 1;
    document.getElementById('button').removeAttribute('disabled');
  });
}

function randomInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function selectRandomBlock() {
  return new Promise((resolve) => {
    const selected = [];

    for (let index = 0; index < round; index++) {
      console.log('iteration ' + index)
      while (true) {
        let rnd = randomInteger(0, maxRound - 1);
        if (selected.indexOf(rnd) === -1)  {
          console.log('add ' + rnd)
          selected.push(rnd);
          break;
        }
      }
    }
    for (const index of selected) {
      document.getElementsByClassName('elem').item(index).style.backgroundColor = '#36c8b8';
    }

    setTimeout(() => {
      resolve(selected);
    }, delay);
  });
}

БЛОГ НА HUSL

Не получается вернутся в начало цикла, что я делаю не так?

Ответы (1 шт):