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 구현

필드에서 승리 조건을 기술적으로 어떻게 확인할 수 있을까요? 잘 생각해 보면, 필드에는 제한된 수의 3셀 조합이 있다는 결론에 도달할 수 있습니다.

즉, 승리를 확인하기 위해 단순히 모든 이 조합들을 확인하면 됩니다. 조합들이 동일하고 비어 있지 않은 값(즉, X 또는 O)을 가지고 있는지 확인해야 합니다.

2차원 배열을 만들고, 각 하위 배열에 각 조합의 셀 번호를 넣겠습니다:

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

제 코드를 보지 않고 스스로 설명된 내용을 구현해 보세요. 게임 플레이가 어떻게 작동하는지 확인하세요.

무승부를 확인하는 기능도 구현해 보세요. 다음 강의에서 이 부분을 다룰 것입니다.