[Javascript] 틱택토

틱택토란?!

  두 명이 번갈아 가면서 3X3의 판에  O와 X를 써서 가로 , 세로 또는 대각선 상에 먼저 한줄을 만들면 이기는 게임이다 .

 

구글-틱택토

---

틱택토 순서도

1. 3 X 3 칸을 만들어 준다. / 턴 = X

2. 한 칸을 클릭한다.

3. 칸이 이미 채워져 있는가?

  3.1 Yes. 2번으로 이동 (다시 한칸을 클릭한다.) 

  3.2. No. 4번으로 이동 ( 칸에 표시해준다. )

4. 칸에 '턴'을 표시한다. ( 턴은 X 또는 O )  

5. 가로 또는 세로 또는 대각선중에 동일한 턴으로 한줄이 완성되었는가??

  5.1. Yes. 해당 턴의 승리!! 

  5.2. No. 턴을 바꾸고 (X -> O 또는 O ->X ) 2번으로 이동 

 

3X3 칸

Dom 객체와 이차원 배열을 이용해 3X3 칸을 만들어 주었다.

각 칸마다 addEventListener를 부여하여 클릭 이벤트를 줌! 

칸을 클릭하면 순서도처럼 해당 칸이 빈공간인지 아닌지를 먼저 체크해주고 

빈공간일때 X 또는 O를 넣고 먼저 한줄을 완성한 턴이 승리!! 

 

 

태그안의 글자는 textContent를 이용하여 글자를 작성 또는 변경 할 수 있다.

input의 값을 건들고 싶다면 textContent가 아닌 value를 이용하면 된다. 

 

 

완성

X턴의 승리

 

[ To do List!! ]

1. append와 appendChild의 차이

2. e.target / e.target.parentNode / e.target.children 에 대해 정리 

3. forEach 좀 더 자세히 할 필요 

4. Dom 객체에 대해 한번 정리하면 좋을 듯