Kiểm tra chiến thắng trong trò chơi Tic-tac-toe bằng JavaScript

Bây giờ đã đến lúc viết mã sẽ xác định chiến thắng và hiển thị tên của người chiến thắng.

Sau khi suy nghĩ về nhiệm vụ, có thể nhận ra rằng việc kiểm tra chiến thắng nên được thực hiện ở mỗi lượt đi:

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);
			
			// ở đây chúng ta phải kiểm tra chiến thắng hoặc hòa
			
			i++;
		});
	}
}

Hãy tạo hàm isVictory, hàm này sẽ nhận một mảng các ô làm tham số và trả về true nếu có chiến thắng trên bảng, và false nếu không. Chúng ta sẽ sử dụng hàm này như sau:

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('tên người chiến thắng');
			}
			
			i++;
		});
	}
}

Làm thế nào để chúng ta biết tên người chiến thắng? Rõ ràng là tên của họ được lưu trữ trong mỗi ô chiến thắng. Để giải thích: nếu chúng ta có một chiến thắng, điều đó có nghĩa là 3 ô cụ thể theo hàng ngang, hàng dọc hoặc đường chéo chứa cùng một giá trị: dấu X hoặc dấu O.

Rõ ràng, giá trị của bất kỳ ô nào trong số này chính là tên người chiến thắng. Nhưng có thể đi theo một cách khác, ít rõ ràng hơn: vì chúng ta xác định sự hiện diện của chiến thắng ở mỗi lượt đi, nên hợp lý là người chiến thắng sẽ là người chơi thực hiện lượt đi cuối cùng. Tên của người chơi này được chứa trong văn bản của ô được nhấp:

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); // hiển thị tên người chiến thắng
			}
			
			i++;
		});
	}
}

Triển khai isVictory

Làm thế nào để chúng ta xác định kỹ thuật sự hiện diện của chiến thắng trên bảng? Nếu suy nghĩ kỹ về mọi thứ, có thể đi đến kết luận rằng trên bảng chỉ có một số lượng bộ ba ô giới hạn.

Tức là để kiểm tra chiến thắng, chỉ cần kiểm tra tất cả các bộ ba này. Cần kiểm tra xem các bộ ba có cùng giá trị không trống hay không (tức là ở đó có dấu X hoặc dấu O).

Hãy tạo một mảng hai chiều, trong đó mỗi mảng con sẽ chứa số thứ tự của các ô trong một bộ ba:

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

Hãy viết việc xác định chiến thắng bằng cách sử dụng mảng này:

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

Tự mình, không nhìn vào mã của tôi, hãy triển khai những gì đã được mô tả. Kiểm tra xem quá trình chơi trò chơi hoạt động như thế nào.

Hãy thử triển khai kiểm tra trận hòa. Trong bài học tiếp theo sẽ có phần phân tích về vấn đề này.