Semak Kemenangan dalam Permainan Tic-Tac-Toe menggunakan JavaScript

Sekarang tiba masanya untuk menulis kod yang akan menentukan kemenangan dan memaparkan nama pemenang.

Setelah mempertimbangkan tugasan, kita boleh fahami bahawa semakan untuk kemenangan perlu dilakukan pada setiap giliran:

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);
			
			// di sini kita harus menyemak kemenangan atau seri
			
			i++;
		});
	}
}

Mari kita buat fungsi isVictory, yang akan menerima array sel sebagai parameter dan mengembalikan true jika terdapat kemenangan pada papan, dan false jika tidak. Kami akan menggunakan fungsi ini seperti berikut:

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('nama pemenang');
			}
			
			i++;
		});
	}
}

Bagaimana kita boleh tahu nama pemenang? Jelas sekali, namanya disimpan dalam setiap sel yang menang. Biar saya jelaskan: jika kita ada kemenangan, maka ini bermakna beberapa 3 sel secara mendatar, menegak atau pepenjuru mengandungi nilai yang sama: sama ada X atau O.

Jelas, nilai mana-mana sel ini adalah nama pemenang. Tetapi kita boleh menggunakan cara lain, yang kurang jelas: memandangkan kita menentukan kemenangan pada setiap giliran, maka logiknya, pemenangnya ialah pemain yang membuat langkah terakhir. Nama pemain ini terkandung dalam teks sel yang diklik:

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); // memaparkan nama pemenang
			}
			
			i++;
		});
	}
}

Pelaksanaan isVictory

Bagaimana secara teknikalnya kita menentukan kewujudan kemenangan pada papan? Jika kita memikirkannya dengan teliti, kita boleh sampai kepada kesimpulan bahawa terdapat bilangan terhad tiga sel yang menang.

Iaitu, untuk menyemak kemenangan, kita boleh memeriksa semua tiga sel ini. Kita perlu memeriksa sama ada ketiga-tiga sel tersebut mempunyai nilai yang sama dan tidak kosong (iaitu sama ada X atau O).

Mari buat array dua dimensi, di mana setiap subarray akan mengandungi nombor sel untuk satu daripada tiga yang menang:

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

Mari tulis pengesahan kemenangan menggunakan array ini:

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

Secara berdikari, tanpa melihat kod saya, laksanakan apa yang diterangkan. Semak bagaimana proses permainan berfungsi.

Cuba laksanakan semakan untuk seri. Pelajaran seterusnya akan membincangkan bahagian ini.