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

Question

[WarriorKodeK]

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

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

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

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

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

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

Спасибо!

Answer 1

[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 каждый раз (это же довольно затратная операция).

Comments

[WarriorKodeK]

Stalker_RED Прошу прощения, но нужна еще раз ваша помощь. Я решил вытягать елементы с DOM, т.к очень спешу.
Смотрите для проверки по строке, у меня выходит

cell[0]  cell[5]  cell[10]  cell[15]  cell[20]
cell[1]  cell[5]  cell[11]  cell[16]  cell[21]
cell[2]  cell[6]  cell[12]  cell[17]  cell[22]
cell[3]  cell[7]  cell[13]  cell[18]  cell[23]
cell[4]  cell[8]  cell[14]  cell[19]  cell[24]

У меня все выходит, только прохожусь я только по одной строке, а надо пройти по всем строкам, а не по одной так как у меня.

подскажите как это сделать?

Вот так я делал

const checkVertical = () => {
  const cell = Array.from(document.querySelectorAll('.cell'));
  for (let i = 0; i < cell.length; i += 5) {
    console.log(cell[i]); // только первая строка
  }
};

Весь код - https://codepen.io/anon/pen/LQOYVd?editors=1010

[Stalker_RED]

WarriorKodeK, так и есть, вы выводите каждый пятый элемент. Я выше выкладывал же как проверить всю строку и как столбец.

[WarriorKodeK]

Stalker_RED, Да только я вывожу только елементы первой строки, а надо еще следующих 4

[Stalker_RED]

WarriorKodeK, вот эти вы строки проигнорировали:

[WarriorKodeK]

Stalker_RED, Я просто тупой)..Спасибо)