JavaScript ile Tic-Tac-Toe Oyununda Kazanma Kontrolü

Şimdi, kazananı belirleyen ve kazananın adını gösteren kodu yazma zamanı.

Görevi düşündüğümüzde, kazanma kontrolünün her hamlede yapılması gerektiğini anlayabiliriz:

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);
			
			// burada kazanma veya beraberlik kontrol etmeliyiz
			
			i++;
		});
	}
}

Hücre dizisini parametre olarak alan ve eğer tahtada kazanma durumu varsa true, yoksa false döndüren bir isVictory fonksiyonu yapalım. Bu fonksiyonu şu şekilde kullanacağız:

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('kazananın adı');
			}
			
			i++;
		});
	}
}

Kazananın adını nasıl öğreneceğiz? Açıkçası, adı kazanan hücrelerin her birinde saklanır. Açıklayayım: Eğer bir kazanma durumu varsa, bu, yatay, dikey veya çapraz olarak bazı 3 hücrenin aynı değeri içerdiği anlamına gelir: ya X ya da O.

Açıkçası, bu hücrelerden herhangi birinin değeri kazananın adıdır. Ancak daha az belirgin başka bir yol da izlenebilir: kazanma durumunu her hamlede kontrol ettiğimiz için, mantıksal olarak, kazanan, son hamleyi yapan oyuncu olacaktır. Bu oyuncunun adı tıklanan hücrenin metninde bulunur:

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); // kazananın adını göster
			}
			
			i++;
		});
	}
}

isVictory Uygulaması

Tahtada kazanma durumunu teknik olarak nasıl belirleriz? Eğer iyice düşünürsek, tahtada sınırlı sayıda üçlü hücre kombinasyonu olduğu sonucuna varabiliriz.

Yani kazanma kontrolü için tüm bu üçlüleri kontrol edebiliriz. Üçlülerin aynı boş olmayan değerlere sahip olduğu (yani ya X ya da O) kontrol edilmelidir.

Alt dizilerinin her birinde bu üçlülerden birinin hücre numaralarının bulunduğu iki boyutlu bir dizi yapalım:

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

Bu diziyi kullanarak kazanma tanımını yazalım:

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

Koduma bakmadan, tarif edileni kendi başınıza uygulayın. Oyun sürecinin nasıl işlediğini kontrol edin.

Beraberlik kontrolünü uygulamayı deneyin. Bir sonraki derste bu kısmın çözümü yapılacak.