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 та горизонтал, вертикал ёки диагонал ҳужайралар бир хил қийматни ўз ичига олган: ёки крестик, ёки нолик.

Аниқки, бу ҳужайраларнинг ҳар қандайсининг қиймати ўзи ғолибнинг исмидир. Аммо бошқа, камрок равшан йўл билан бориш мумкин: биз ғалаба мавжудлигини ҳар бир йўналишда аниқлаганмиз, шу логика билан, ғолиб сўнгги йўналишни бажарган ўйинчи бўлади. Ушбу ўйинчининг исми босилган ҳужайранинг матнида сақланади:

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 ни амалга ошириш

Майдонда ғалаба мавжудлигини техник жиҳатдан қандай аниқлаймиз? Агар ҳамма нарсани яхши ўйлаб кўрилса, майдонда чекланган микдорда ҳужайралар учликка эга эканлигини англаш мумкин.

Яъни ғалабани текшириш учун жуда оддий бу учликларнинг ҳаммасини текшириш мумкин. Учликларнинг бир хил бўш бўлмаган қийматларга эга эканлигини текшириш керак (яъни у ерда ёки крестик, ёки нолик).

Икки ўлчовли массив ясаймиз, унинг ҳар бир қисм массивида учликларнинг бирига тегишли ҳужайра рақамлари бўлади:

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

Мустақил равишда, менинг кодимга қарамай, тавсифланганни амалга оширинг. Ўйин жараёни қандай ишлашини текшириб кўринг.

Дуррангни текширишни амалга оширишга ҳаракат қилинг. Кейинги дарсда бу жойнинг таҳлили бўлади.