JavaScript 입문 : 틱택토(TicTacToe) 게임 - 이차원 배열을 테이블에 적용

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

 

3 by 3 테이블을 만들어 클릭이벤트가 이루어지도록 공부를 해 보았습니다. 이제는 각 칸별로 모양(또는 숫자)가 들어가는 target을 확인하기 위하여 배열을 이차원 배열을 이용한 중복구문을 사용할 예정입니다. 

 

1. 이차원 배열 활용

 

3 by 3 테이블의 구조는 다음과 같습니다.

 

 

첫번째 row에 해당되는 빈배열을 만들고 데이터를 push하고 두번째 column인 cell에 들어가는 빈배열을 추가로 만들어 주어야 합니다. cell에 push하는 데이터가 최종적으로는 row에 push하는 결과를 가져오겠죠.

 

 

2. addEventListener(  ) 이벤트함수 외부로 

 

함수가 길어지면 외부에 선언하고 콜백으로 받아서 함수를 실행시키는게 좋습니다. 콜백되는 함수 이름은 어울리게 만들어주면 되구요. 여기서는 함수 이름을 turnback으로 하고 진행합니다. 

 

 

마지막에 사용된 turn = turn === 'O' ? 'X' : 'O';는 삼항연산자 개념으로 보면됩니다. 원래 사용하였던 다음 코드를 줄인겁니다. 

 

 

이제는 3 by 3 테이블안 각 칸별로 이차원 배열을 통하여 순서를 부여 하였습니다. 해당 순서에 따라 원하고자 하는 코딩을 할 수 있습니다.