Implementazione del controllo della vittoria nel gioco del Tris in JavaScript

Ora è il momento di scrivere il codice che determinerà la vittoria e visualizzerà il nome del vincitore.

Riflettendo sul problema, si può capire che il controllo per la vittoria dovrebbe essere eseguito ad ogni mossa:

function 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);
			
			// qui dovremmo controllare la vittoria o il pareggio
			
			i++;
		});
	}
}

Creiamo una funzione isVictory, che prenderà come parametro un array di celle e restituirà true, se sul campo c'è una vittoria, e false, se non c'è. Useremo questa funzione nel modo seguente:

function 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('nome del vincitore');
			}
			
			i++;
		});
	}
}

Come possiamo sapere il nome del vincitore? Ovviamente, il suo nome è memorizzato in ognuna delle celle vincenti. Spiego: se abbiamo una vittoria, allora ciò significa che alcune 3 celle in orizzontale, verticale o diagonale contengono lo stesso valore: either una X o una O.

Ovviamente, il valore di una qualsiasi di queste celle è il nome del vincitore. Ma si può procedere anche in un altro modo, meno ovvio: poiché determiniamo la presenza di una vittoria ad ogni mossa, è logico che il vincitore sarà il giocatore che ha effettuato l'ultima mossa. Il nome di questo giocatore è contenuto nel testo della cella cliccata:

function 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); // visualizziamo il nome del vincitore
			}
			
			i++;
		});
	}
}

Implementazione di isVictory

Come possiamo tecnicamente determinare la presenza di una vittoria sul campo? Se si riflette bene, si può arrivare alla conclusione che sul campo c'è un numero limitato di terne di celle.

Cioè per controllare la vittoria si possono semplicemente controllare tutte queste terne. Bisogna controllare che le terne abbiano valori uguali e non vuoti (cioè che contengano o una X o una O).

Creiamo un array bidimensionale, in ogni sotto-array del quale ci saranno i numeri di cella di una delle terne:

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

Scriviamo, utilizzando questo array, la determinazione della vittoria:

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

In autonomia, senza guardare il mio codice, implementate quanto descritto. Verificate come funziona il processo di gioco.

Provate a implementare il controllo del pareggio. La spiegazione di questa parte sarà nella prossima lezione.