JavaScript 입문 : 틱택토(TicTacToe) 게임 - 무승부 결과표시 및 전체코드 정리

이 글은 제로초TV의 자바스크립트 강좌를 기본으로 하고 있습니다.

 

 

틱택토 게임의 승부판단에서 마지막으로 무승부에 대한 코딩이 남아 있습니다. 강좌에서 알려준 2가지 방법이 있는데요. 조금 더 생각해 보면 더 있을수 있어서 한가지를 더 추가해 보았습니다. 

 

1. 무승부 표시 위치 

 

무승부 코드가 들어가는 위치는 승부판단 다음에 들어가는게 맞을 듯 하고 승부판단의 함수가 길어 외부로 빼주어서 헷갈릴 수 있는데 잘 생각해 보면 위치를 파악할 수 있을겁니다. 

 

 

2. 무승부 코딩

 

① Case I

 

이는 9칸이 전부차면 무승부 표시를 한다는 논리입니다. 다음과 같이 나타나겠죠.

 

 

이러한 경우 각 칸별로 1을 부여해서 9칸이 차면 합계가 9인 경우를 만들면 됩니다. 다음을 참조하세요.

 

 

② Case II

 

두번째로 생각할 수 있는 방법은 무승부를 기본으로 하고 텍스트가 각 칸에 하나라도 없으면 무승부가 아닌 논리입니다. 상기 Case I을 논리적으로 응용한 것이라고 보면됩니다. 

 

 

 

③ Case III

 

상기 Case I과 Case II는 9개의 칸이 다 찬다는 조건인데요. 사실 8칸만 차도 게임은 무승부가 납니다. 다음처럼요. 따라서 코딩은 8개가 차면 무승부라고 하는게 맞다고 봅니다. 

 

 

대신 무승부가 나더라도 혹시 마지막 빈칸에 클릭을 하는분도 있으니 removeEventListener(  )메소드를 하고 return 시키는게 맞네요. 이는 승부가 나도 마찬가지입니다. 

 

 

3. 전체 JS 코드

 

전체 코드는 다음과 같습니다.