이제 firstSquare에 있던
이 symbol를 가져올 수 있습니다
이 부분은 특정 우승 조건 combination 중 하나입니다
이것은 gameBoard에 대한 접근으로 가능해지는데
이것은 다차원적인 배열입니다
이것을 기억해 두시기 바랍니다
처음으로 사용할 조합은
[0].row입니다
조합이라 하면 이 요소들 중 하나이고
이 첫 요소가
이 우승 조합에서 확인할 부분입니다
바로 이 요소입니다
이것이 우승 조합의 첫 번째 요소입니다
이것은 우승 조합의
두 번째 요소가 되겠습니다
즉 이 루프(loop)에서 우승 조합을 확인하는
다음 차례의 반복문입니다
이제 이 행을 추출하여서
게임판의 행에 접근하겠습니다
해당 행에 접근한 후에는
게임판의 열에 접근하여
하나의 버튼을 특정하겠습니다
combination[0].column을 사용하겠습니다
두 번째와 세 번째 버튼의 경우도 동일한 로직입니다
차이가 있다면
이제는 행 1과 열 1의 조합이라는 점이고
다음으로는 행 2와 열 2의 조합입니다
즉 단계별로 버튼을 검토하여
우승 조합과 일치하는지 확인합니다
그리고 나서 게임판의 버튼에 저장된
기호를 확인하게 됩니다
이제 다양한 버튼을 추출하여
우승 조합과 대조하여 확인하였으니
이제는 기호가 모두 동일한지 확인해야 합니다
그 이유는 게임이 끝나기 위해서는
가능한 우승 조합 중 하나의 형태이되
기호가 동일해야 하기 떄문입니다
예를 들어서 이 부분이 그렇습니다
이것은 우승 조합 중 하나일뿐만 아니라
기호도 모두 동일합니다
그래서 동일한 기호인지 확인하기 위해서는
if문으로 확인을 하겠습니다
먼저는 첫 번째 버튼의 기호가 true인지 확인합니다
다른 무엇과 비교하기도 이전에
일단 null 값이 아닌지를 보겠습니다
자바스크립트에서 null 은 false으로 여겨지기 때문입니다
만약 게임판의 특정 위치에 있는
해당 값이 아직 null이라면
더 이상 우승 조합의
다른 조건에 부합하는지
확인할 필요가 없습니다
아직 더 선택된 버튼이 없기 때문입니다
만약 true라면 다른 조건을 더해야 합니다
일단 첫 번째 선택된 버튼의 기호가
두 번째 버튼의 기호와 같은지 봐야 합니다
그 이유는 이것은 첫 번째 버튼이 선택되었고
거기에 특정한 기호가 있다고 가정하기 때문입니다
이제 이 기호가 우승 조합의
두 번째 버튼의 기호와 같은지 확인합니다
만약 이것도 true라면 마지막으로 확인할 내용이 있습니다
이 첫 번째 버튼의 기호가
세 번째 버튼의 기호와 같은지 확인하는 것입니다
만약 이 세 가지 조건에 모두 부합한다면
우승조합의 모든 세 가지 버튼이
모두 같은 기호를 가지고 있다는 것을 알 수 있습니다
이 경우 우승자가 나오는 것입니다
즉, 이 버튼에서 확인되는
그 기호를 대표하는 플레이어가
게임의 승자가 되는 것입니다
그러므로 우승자(winner) 변수를 추가하겠습니다
이 변수는 초기에는 할당되지 않았거나 null 상태입니다
어떻게 표현하든 아직 승자가 없다는 뜻입니다
이것을 if문으로 확인한다면
우승자는 우승조건 첫 번째 버튼의 기호입니다
즉 해당 기호를 가진 사람이 우승자가 됩니다
이제 이 우승자 변수를 가지고
조건부의 '게임 오버' 메시지를 띄우도록 하겠습니다
아직 할당되지 않은 상태라면
여기 GameBoard 위에
단축 코드를 사용하겠습니다
AND 연산자(&&)를 사용해서
우승자가 true인지, 기호는 X인지 O인지 확인하는 것인데
만약 이 경우
'You won' (당신이 이겼습니다) 라는 메시지를 띄우겠습니다
그리고 해당 플레이어의 기호와
끝에 느낌표도 하나 추가하겠습니다
이것이 만들고자 하는 최종 UI는 아니지만
이것이 시작점입니다
이 상태로 저장 후 새로고침을 해 보면
아무 메시지도 뜨지 않습니다
하지만 우승 상황을 만들어 보겠습니다
대각선으로 기호를 모두 맞춰 보겠습니다
이제 'You won, X!' (X가 이겼습니다!) 라는 메시지가 나옵니다
X를 가진 플레이어가 이겼기 때문입니다
다시 새로고침 후 확인해 볼 것은
O를 가진 플레이어가 이겨도 동일한 메시지가 나와야 합니다
'You won, O!' (O가 이겼습니다!)
이 메시지 이후에도 게임은 멈추지 않습니다
이 부분은 수정이 필요합니다
하지만 일단은 우승자를 식별할 수 있게 되었습니다
이제 다음 단계로는
이 게임 오버 화면을 좀 더 꾸며보도록 하겠습니다