Խաչքարերի խաղում հաղթանակի ստուգում 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;
}

Անկախ, չնայելով իմ կոդին, իրականացրեք նկարագրվածը: Ստուգեք, թե ինչպես է աշխատում խաղային գործընթացը:

Փորձեք իրականացնել ոչ-ոքիի ստուգումը: Հաջորդ դասում կլինի այս մասի վերլուծությունը: