JavaScript로 틱택토 게임 승리 확인 구현

이제 승리를 판단하고 승자 이름을 출력하는 코드를 작성할 차례입니다.

문제를 고민해 보면, 승리 여부는 각 차례마다 확인해야 한다는 것을 알 수 있습니다:

javascriptfunction 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를 반환할 것입니다. 이 함수를 다음과 같이 사용할 것입니다:

javascriptfunction 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.

이 셀들 중 아무 값이나 승자 이름입니다. 하지만 덜 명확한 다른 방법도 있습니다: 승리 여부를 매 턴 확인하므로, 마지막으로 수를 둔 플레이어가 승자가 됩니다. 이 플레이어의 이름은 클릭된 셀의 텍스트에 있습니다:

javascriptfunction 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차원 배열을 만들고, 각 하위 배열에 각 조합의 셀 번호를 넣겠습니다:

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

이 배열을 사용하여 승리 조건을 정의해 보겠습니다:

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