틱택토6. 승자 결정하기

목차

1. 승자를 반환하는 함수 선언
2. 클릭시 동작하는 이벤트 함수 내에 승자 반환함수 호출
3. div에 status 렌더

 

 

 

1. 승자를 반환하는 함수 선언

 

먼저 함수의 내부에 이기는 경우를 배열로 작성해보자.

이중배열을 통해 이중배열의 엘리먼트는 squares의 인덱스 번호가 될 것이다.

 

const calculateWinner = (squares) => {
    const line = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6]
    ];
};

 

다음으로는 이기는 경우에 대한 반복을 돌리면서

각각의 경우의 엘리먼트(즉, 매개변수로 들어올 squares의 인덱스가 될 부분)을 각각 변수에 담아보자.

그 다음엔 매개변수로 들어온 squares의 각각의 값이 일치하는 경우를 return 하도록 조건문을 작성할 것이다.

 

코드는 아래와 같다.

 

for (let i = 0; i < line.length; i++) {
    const [a, b, c] = line[i]
    if (squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
    }
} return null;

 

 

승자가 나오는 경우에 해당하지 않으면 게임이 계속 되어야 하므로,

for문의 밖에 null을 반환하는 코드도 작성해주자

 

 

 

2. handleClick 함수 내에 승자 계산 함수를 호출하여 승자 생기면 게임 종료시키기

 

그리고 버튼 클릭을 통해 승자를 알 수 있어야 하므로

handleClick 함수 내에서 작성한 calculateWinner함수를 호출해서 반환한 값을 winner라는 변수에 담아주자.

 

const winner = calculateWinner(squares)

 

만약 함수가 null 값을 반환한다면, 승자가 없다는 의미이므로 게임이 계속되어야 한다.

바꿔서 말하면 함수가 null값이 아닌 값을 반환한다면 승자가 있다는 의미이므로,

게임이 종료되어야 한다.

 

 

 

따라서 어제 작성한 handleClick함수를 리턴하는 if문에 조건을 하나 더 작성해보자

 

if( squares[i] != null || winner != null )return;

 

두 조건 중 하나라도 충족된다면 게임이 종료되어야 하므로 if의 조건에 or 연산자로 작성해주었다.

 

 

 

위의 코드까지 작성하고 나면,

빙고가 완성되어 승자가 생긴 경우 handleClick함수를 빠져나오며

아무리 클릭해도 더 이상 버튼에 어떤 표시도 나타나지 않는다.

 

 

3. 승자 / 다음 플레이어 표시

 

하지만 현재까지의 상태에서는 게임이 진행중인 지, 누가 승자인지 직관적으로 알 수 없으므로

Board 컴포넌트의 render() 메서드 내부에 있는 div 중 status라는 클래스를 가진 div에

 

승자가 있으면 승자를, 게임이 계속 진행된다면 다음 차례의 플레이어를 나타내도록 해보자.

handleClick 함수에 작성하였던 것과 동일하게 calculateWinner 함수를 호출해서 반환값을 winner라는 변수에 담을 것이다.

 

 

 

그러기 위해서는 매개변수로 들어갈 squares가 있어야 하기 때문에

변수 선언을 통해서 state에 있는 squares값을 담자.

 

 

그리고 이왕 변수 선언한 김에 다음 차례의 플레이어를 나타낼 플래그로 사용되는 xIsNext 값도 가져와서 변수에 담도록 하자.

 

const { renderSquare, state:{squares,xIsNext} } = this
const winner = calculateWinner(squares)

 

다음으로는 status라는 변수를 선언해서

1. 승자가 있다면 '승자를 표시'
2. 승자가 없다면 '다음 차례의 플레이를 표시'

       (1) 다음 차례의 플레이를 표시하는 경우, xIsNext의 값이 true이면 'X'

       (2) 다음 차례의 플레이를 표시하는 경우, xIsNext의 값이 false이면 'O'

 

를 담도록 해보자

 

 

편의를 위해 삼항연산자로 작성해보자.

 

const status = winner != null ? `Winner is ${winner}` : `Next player is ${ xIsNext ? 'X' : 'O' }`

 

 

삼항연산자의 해석이 어렵다면,

아래 링크의 하단의 <참고>를 읽어보자!

https://yellow-w.tistory.com/227?category=1039072 

 

 

 

다음으로는 div안에 status 변수를 담아주기만 하면된다.

<div className="status">{status}</div>

 

 

끝!