@WarriorKodeK

Как проверять по горизонтали и вертикали?

Делаю игру бинго. Мне надо провалидировать ячейки по горизонтали и вертикали что-бы определить того кто выиграл.

То есть по вертикали должно быть так: https://prnt.sc/if7wcy
А по горизонтали так: https: https://prnt.sc/if7xqa

Если номер ячейки совпал с генерируемым номером, то ячейка подсвечивается, соответственно если все ячейки по горизонтали или вертикали в какой-то колонки(ряду) будут подсвечены, то будет выпадать попап победителя (потом еще сделаю).

Была идея сделать массив с ячеек Array.from(document.querySelectorAll(".cell")) и проганять циклом и проверять классы. Но что когда дохожу до реализации, то туплю.

Подскажите какой-то алгоритм как бы вы сделали?

Сам код - https://codepen.io/anon/pen/LQOYVd?editors=1010

Спасибо!
  • Вопрос задан
  • 75 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
.
Для карточки 5х5 перебор примерно такой:
for (let i=0; i < 5; i+=5) {
  if (cells[i].isFlipped
    && cells[i+1].isFlipped
    && cells[i+2].isFlipped
    && cells[i+3].isFlipped
    && cells[i+4].isFlipped
  ) {
  // весь столбец подсвечен
 }
} 
for (let i=0; i < 5; i++) {
  if (cells[i].isFlipped
    && cells[i+5].isFlipped
    && cells[i+10].isFlipped
    && cells[i+15].isFlipped
    && cells[i+20].isFlipped
  ) {
  // вся строка подсвечена
 }
}
Вместо isFlipped сделайте свою проверку, по классу или какому-то свойству.

Но по хорошему, нужно держать копию данных из ячеек в массиве, а не вытаскивать их из DOM каждый раз (это же довольно затратная операция).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
19 авг. 2018, в 17:22
1000 руб./в час
19 авг. 2018, в 17:11
200000 руб./за проект
19 авг. 2018, в 12:12
40000 руб./в месяц