Tic-Tac-Toe #1

최근 인프런에서 React.js 강의를 찾아볼까 하다가, Javascript 풀스택 로드맵이라는 수강리스트를 발견해서 웹 게임을 만들며 배우는 자바스크립트를 보게 됐다. 기초적인 문법은 건너뛰고 틱택토를 보면서, 바닐라 자바스크립트를 이용해서 틱택토 게임을 작성해본 적이 있었나? 싶었다. 마침 속깊은 자바스크립트 책을 읽으면서 지난 몇 년간 자바스크립트에 대해 제대로 알지도 못하면서, 자바스크립트를 이용해서 먹고살았나하는 생각에 자괴감이 들던 차. 간단하게 jsFiddle에 접속해서, 간단하게 코드를 작성해봤다.

 

 

리팩토링을 통해서 중복코드를 함수로 뽑아내고, 변수 선언을 모듈 최상단에 하는 작업을 거치고나니 이해하는데 크게 어려움은 없었다. 다만 개선할만한 포인트가 몇몇개 남아있었다. 크게 대단한 건 아니지만, 개선할만한 내용은 아래와 같다.

• 틱택토에 사용되는 게임보드는 넓이와 높이가 같다. 따라서 굳이 fieldWidth, fieldHeight를 따로 선언해줘야 할 필요는 없다.
• onclick 이벤트를 등록하기 위해 이중루프를 돌면서, 클로저를 이용하고 있다. gameBoard에 이벤트를 등록한 후, 각 td에 id와 같은 구분자를 추가한 뒤 이벤트 캡처링을 통해 각 턴을 처리하면, 이중루프를 돌 필요도 클로저를 생성할 필요도 없다.
• countTurn을 이용하여 모든 턴이 끝났음에도 승부가 나지 않으면 Draw처리를 하고 있으나, 사실 모든 턴이 끝나기 이전에 게임이 무승부로 끝났는지 판별할 방법이 있다.
• 빈 칸을 클릭할 때마다 턴이 넘어가게 되지만, 마우스 하나를 주거니 받거니 하면서 틱택토를 플레이하는 경우는 거의 없을 것이다. 쌍팔년도가 아니기에 틱택토를 플레이하는 사람이 있는지도 의문이기는 하지만... 여하튼 플레이어가 혼자서 게임을 즐길 수 있도록, 플레이어와 컴퓨터가 교대로 플레이하도록 변경할 필요가 있다.
• DOM을 HTML에서 그려야 할 필요가 있는가? initField 함수에서는 DOM을 탐색해서 테이블의 각 셀을 다중배열에 저장하고, 셀의 내용을 공백으로 초기화하고 있다. 이 때 템플릿을 각 셀을 저장하고, gameBoard에 추가하면 되지 않을까?

더위가 조금씩 물러나고 있지만 여전히 공부가 손에 잡히지 않아서 작성한 틱택토. 시간이 나면 위의 수정사항도 수정해봐야겠다. = ㅅ=)-3