Pemeriksaan Kemenangan dalam Permainan Tic-Tac-Toe dengan JavaScript

Sekarang saatnya untuk menulis kode yang akan menentukan kemenangan dan menampilkan nama pemenang.

Setelah mempertimbangkan tugasnya, dapat disimpulkan bahwa pemeriksaan untuk mengetahui adanya kemenangan harus dilakukan pada setiap langkah:

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 memeriksa kemenangan atau seri
			
			i++;
		});
	}
}

Mari kita buat fungsi isVictory, yang akan menerima array sel sebagai parameternya dan mengembalikan true jika ada kemenangan di papan, dan false jika tidak. Kita akan menggunakan fungsi ini sebagai 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 bisa mengetahui nama pemenangnya? Jelas, namanya tersimpan di setiap sel yang menang. Mari saya jelaskan: jika ada kemenangan, maka berarti beberapa 3 sel secara horizontal, vertikal, atau diagonal mengandung nilai yang sama: baik X maupun O.

Jelas bahwa nilai dari salah satu sel ini adalah nama pemenangnya. Tetapi bisa juga dengan cara lain, yang kurang jelas: karena kita menentukan adanya kemenangan pada setiap langkah, maka secara logis, pemenangnya adalah pemain yang melakukan 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); // menampilkan nama pemenang
			}
			
			i++;
		});
	}
}

Implementasi isVictory

Bagaimana secara teknis kita menentukan adanya kemenangan di papan? Jika dipikirkan dengan matang, dapat disimpulkan bahwa ada sejumlah terbatas kombinasi tiga sel di papan.

Artinya, untuk memeriksa kemenangan, kita bisa memeriksa semua kombinasi tiga ini. Perlu diperiksa apakah kombinasi tiga tersebut memiliki nilai yang sama dan tidak kosong (yaitu berisi X atau O).

Mari buat array dua dimensi, di mana setiap sub-array berisi nomor-nomor sel dari salah satu kombinasi tiga:

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 pemeriksaan 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 mandiri, tanpa melihat kode saya, implementasikan hal yang telah dijelaskan. Periksa bagaimana proses permainan berfungsi.

Cobalah untuk mengimplementasikan pemeriksaan seri. Pembahasan mengenai hal ini akan ada di pelajaran berikutnya.