การตรวจสอบการชนะในเกม Tic-Tac-Toe ด้วย 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;
}

ทำด้วยตนเองโดยไม่แอบดูโค้ดของฉัน นำสิ่งที่อธิบายไปปฏิบัติ ลองตรวจสอบว่ากระบวนการของเกมทำงานอย่างไร

ลองทำการตรวจสอบการเสมอ ในบทเรียนถัดไปจะเป็นการอธิบายส่วนนี้