1편에서
state (상태)를 선언하고 setState 메소드를 통해서 플레이어 구분까지 완료했다.
한번 클릭한 버튼에 조건을 걸어서 중복클릭 금지하기.
위 이미지에서 ||뒤에 코드는 WINNER 후에 승자예측후 winner 가 없으면 계속 게임을 진행하게 하는 코드이다.
우선 앞의 코드를 설명해야 하는데
- squares배열의 값이 null이 아닌경우 ( X 나 O 로 클릭되어있음)
해당 함수 밑에 코드를 읽지않고 함수를 종료시킨다.
여기서 해당함수는 handleClcik함수이다.
따라서 위의 조건문을 선언할 때는 위치가 굉장히 중요하다.
승자결정
마지막으로 승자 결정 함수를 작성해보자
| 0 | 1 | 2 |
| 3 | 4 | 5 |
| 6 | 7 | 8 |
이라 생각하고 , 빙고가 되는 경우를 모두 찾아서 line이라는 변수에 넣어준다.
( ex 0,1,2가 되어야 1 line이 됨) 그리고 반복문과 if문을 이용한 비교를 통해 세 값이 일치하는 경우를 찾아보자
for문의 경우 i가 0일때 를 생각해보자
line[[0]] 은 = [[0,1,2]]가 된다.
따라서 각각의 sqaures 배열이 가르키는 index 값은
다음과 같다.
sqaures[a] = 0 , squares[b] = 1 , squares[c] =2
if문은 세 값을 비교하는 것이고,
세값이 같으면 a, b,c 중 하나를 return한다.
return null; 은 승자가 나오지 않는 경우를 위해 작성한다.(게임이 계속 되어야 함)