Mängu Trips-Traps-Trull võidu kontrollimine JavaScriptis

Nüüd on aeg kirjutada kood, mis määrab võidu ja kuvab võitja nime.

Pärast ülesande läbimõtlemist võib jõuda arusaamisele, et võidu kontrolli tuleks teha iga käigu järel:

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);
      
      // siin peaksime kontrollima võitu või viiki
      
      i++;
    });
  }
}

Loome funktsiooni isVictory, mis võtab parameetrina lahtrite massiivi ja tagastab true, kui mänguväljal on võit, ja false, kui ei ole. Me kasutame seda funktsiooni järgmisel viisil:

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('võitja nimi');
      }
      
      i++;
    });
  }
}

Kuidas me saame teada võitja nime? Ilmselt on see nimi salvestatud igasse võidukombinatsiooni kuuluvasse lahtrisse. Selgitan: kui meil on võit, siis tähendab see, et mõned 3 lahtrit horisontaalselt, vertikaalselt või diagonaalis sisaldavad sama väärtust: kas X või O.

Ilmselt on ükskõik millise nende lahtrite väärtus just võitja nimi. Kuid võib minna ka teist, vähem ilmset teed: kuna me kontrollime võidu olemasolu iga käigu järel, siis on loogiline, et võitja on mängija, kes tegi viimase käigu. Selle mängija nimi sisaldub klikitud lahtri tekstis:

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); // kuvame võitja nime
      }
      
      i++;
    });
  }
}

isVictory rakendamine

Kuidas me tehniliselt määrame võidu olemasolu mänguväljal? Kui hästi kõik läbi mõelda, siis võib jõuda järeldusele, et mänguväljal on piiratud arv kolmikuid lahtreid.

See tähendab, et võidu kontrollimiseks saab lihtsalt kontrollida kõiki neid kolmikuid. Tuleb kontrollida, et kolmikutel on samad mitte tühjad väärtused (st seal on kas X või O).

Loome kahemõõtmelise massiivi, kus igas alamassiivis on ühe kolmiku lahtrite numbrid:

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

Kirjutame selle massiivi abil võidu määratluse:

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