Проверка на победа во играта Tic-Tac-Toe во JavaScript

Сега дојде време да напишеме код кој ќе ја одредува победата и ќе го прикажува името на победникот.

Размислувајќи за задачата, може да се смета дека проверката за присуство на победа треба да се извршува во секој потег:

javascriptfunction init(selector) {
  let cells = document.querySelectorAll('#field td');
  let i = 0;
  
  for (let cell of cells) {
    cell.addEventListener('click', function step() {
      this.textContent = ['X', 'O'][i % 2];
      this.removeEventListener('click', step);
      
      // овде треба да проверуваме победа или нерешено
      
      i++;
    });
  }
}

Ајде да направиме функција isVictory, која како параметар ќе прифаќа низа ќелии и ќе враќа true, ако на полето има победа, и false, ако нема. Ние ќе ја користиме оваа функција на следниов начин:

javascriptfunction start(cells) {
  let i = 0;
  
  for (let cell of cells) {
    cell.addEventListener('click', function step() {
      this.textContent = ['X', 'O'][i % 2];
      this.removeEventListener('click', step);
      
      if (isVictory(cells)) {
        alert('име на победникот');
      }
      
      i++;
    });
  }
}

Како да го дознаеме името на победникот? Очигледно, дека неговото име се чува во секоја од победничките ќелии. Да објаснам: ако имаме победа, тогаш тоа значи дека некои 3 ќелии хоризонтално, вертикално или дијагонално содржат иста вредност: или X, или O.

Очигледно, вредноста на која било од овие ќелии е и името на победникот. Но, може да се појде и по друг, помалку очигледен пат: бидејќи ја одредуваме присуството на победа во секој потег, логично е дека победникот ќе биде играчот кој го направил последниот потег. Името на овој играч се содржи во текстот на кликнатата ќелија:

javascriptfunction start(cells) {
  let i = 0;
  
  for (let cell of cells) {
    cell.addEventListener('click', function step() {
      this.textContent = ['X', 'O'][i % 2];
      this.removeEventListener('click', step);
      
      if (isVictory(cells)) {
        alert(this.textContent); // го прикажуваме името на победникот
      }
      
      i++;
    });
  }
}

Имплементација на isVictory

Како да одредиме технички присуство на победа на полето? Ако добро се размисли, може да се дојде до заклучок дека на полето постои ограничен број тројки ќелии.

Тоа е, за проверка на победа едноставно може да се проверат сите овие тројки. Треба да се провери дали тројките имаат исти вредности кои не се празни (тоа е, или X, или O).

Ајде да направиме дводимензионална низа, во секоја подниза од која ќе има броеви на ќелии од една од тројките:

javascriptlet combs = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6],
];

Ајде да ја напишеме дефиницијата за победа со помош на оваа низа:

javascriptfunction isVictory(cells) {
  let combs = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];

  for (let comb of combs) {
    if (
      cells[comb[0]].textContent == cells[comb[1]].textContent &&
      cells[comb[1]].textContent == cells[comb[2]].textContent &&
      cells[comb[0]].textContent != ''
    ) {
      return true;
    }
  }
  
  return false;
}