Επαλήθευση Νίκης στο Παιχνίδι Tic-Tac-Toe σε JavaScript

Τώρα ήρθε η ώρα να γράψουμε κώδικα που θα καθορίζει τη νίκη και θα εμφανίζει το όνομα του νικητή.

Αφού σκεφτούμε το πρόβλημα, μπορούμε να συμπεράνουμε ότι ο έλεγχος για την ύπαρξη νίκης πρέπει να εκτελείται σε κάθε κίνηση:

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);
			
			// εδώ πρέπει να ελέγχουμε για νίκη ή ισοπαλία
			
			i++;
		});
	}
}

Ας φτιάξουμε μια συνάρτηση isVictory, η οποία θα παίρνει ως παράμετρο έναν πίνακα κελιών και θα επιστρέφει true, εάν στο πεδίο υπάρχει νίκη, και false, εάν δεν υπάρχει. Θα χρησιμοποιούμε αυτή τη συνάρτηση ως εξής:

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('όνομα νικητή');
			}
			
			i++;
		});
	}
}

Πώς μπορούμε να μάθουμε το όνομα του νικητή; Προφανώς, το όνομα του αποθηκεύεται σε καθένα από τα κερδισμένα κελιά. Ας το εξηγήσω: εάν έχουμε νίκη, τότε αυτό σημαίνει ότι ορισμένα 3 κελιά οριζόντια, κάθετα ή διαγώνια περιέχουν την ίδια τιμή: είτε X, είτε O.

Προφανώς, η τιμή οποιουδήποτε από αυτά τα κελιά είναι το όνομα του νικητή. Αλλά μπορούμε να ακολουθήσουμε και έναν άλλο, λιγότερο προφανή τρόπο: αφού καθορίζουμε την ύπαρξη νίκης σε κάθε κίνηση, τότε λογικά, ο νικητής θα είναι ο παίκτης που έκανε την τελευταία κίνηση. Το όνομα αυτού του παίκτη περιέχεται στο κείμενο του κλικαρμένου κελιού:

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); // εμφανίζουμε το όνομα του νικητή
			}
			
			i++;
		});
	}
}

Υλοποίηση της isVictory

Πώς μπορούμε τεχνικά να καθορίσουμε την ύπαρξη νίκης στο πεδίο; Εάν το σκεφτούμε καλά, μπορούμε να καταλήξουμε στο συμπέρασμα ότι στο πεδίο υπάρχει περιορισμένος αριθμός τριάδων κελιών.

Δηλαδή, για τον έλεγχο νίκης μπορούμε απλά να ελέγξουμε όλες αυτές τις τριάδες. Πρέπει να ελέγξουμε αν οι τριάδες έχουν ίδιες μη κενές τιμές (δηλαδή είτε X είτε O).

Ας φτιάξουμε έναν δισδιάστατο πίνακα, σε κάθε υποπίνακα του οποίου θα υπάρχουν οι αριθμοί κελιών μιας από τις τριάδες:

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

Ας γράψουμε χρησιμοποιώντας αυτόν τον πίνακα τον καθορισμό νίκης:

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

Ανεξάρτητα, χωρίς να κοιτάτε τον κώδικά μου, υλοποιήστε τα παραπάνω. Ελέγξτε πώς λειτουργεί η διαδικασία του παιχνιδιού.

Προσπαθήστε να υλοποιήσετε τον έλεγχο για ισοπαλία. Στο επόμενο μάθημα θα γίνει ανάλυση αυτού του σημείου.