Kontrolli i fitores në lojën Tic-Tac-Toe në JavaScript

Tani ka ardhur koha për të shkruar kodin që do të përcaktojë fitoren dhe do të shfaqë emrin e fituesit.

Pasi ta kemi menduar detyrën, mund të kuptojmë se kontrolli për praninë e fitores duhet të kryhet në çdo lëvizje:

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);
      
      // këtu duhet të kontrollojmë për fitore ose barazim
      
      i++;
    });
  }
}

Le të krijojmë funksionin isVictory, që do të marrë si parametër një array qelizash dhe do të kthejë true nëse në fushë ka fitore, dhe false nëse nuk ka. Ne do ta përdorim këtë funksion si më poshtë:

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('emri i fituesit');
      }
      
      i++;
    });
  }
}

Si mund ta marrim emrin e fituesit? Natyrisht, se emri i tij/tij ruhet në secilën nga qelizat fituese. Le të shpjegoj: nëse kemi fitore, atëherë kjo do të thotë se disa 3 qeliza horizontalisht, vertikalisht ose diagonalisht përmbajnë vlerë të njëjtë: ose X, ose O.

Natyrisht, vlera e çdo prej këtyre qelizave është emri i fituesit. Por mund të shkojmë edhe në një mënyrë tjetër, më pak të dukshme: meqë ne përcaktojmë praninë e fitores në çdo lëvizje, atëherë logjikisht, fituesi do të jetë lojtari që ka kryer lëvizjen e fundit. Emri i këtij lojtari përmbahet në tekstin e qelizës së klikuar:

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); // shfaq emrin e fituesit
      }
      
      i++;
    });
  }
}

Implementimi i isVictory

Si mund ta përcaktojmë teknikisht praninë e fitores në fushë? Nëse e mendojmë mirë, mund të arrijmë në përfundimin se në fushë ka një numër të kufizuar treshash qelizash.

Kjo do të thotë që për të kontrolluar fitoren mund thjesht të kontrollohen të gjitha këta treshe. Duhet kontrolluar nëse treshat kanë vlera të njëjta jo bosh (dmth aty ka ose X, ose O).

Le të krijojmë një array dy-dimensional, në secilin nënarray të të cilit do të jenë numrat e qelizave të një prej treshave:

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],
];

Le të shkruajmë përcaktimin e fitores duke përdorur këtë array:

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;
}