리액트로 틱택토 게임 만들면서 기초 배우기 # 9 (승자 정하기)

---

 

 

이번 글을 통해 배워갈 내용

1.  3 x 3 틱택토 게임의 승자를 정하는 방법을 알아봅니다.

 

 

---

3 x 3 틱택토 게임에서

 

승리를 하는 방법은 총 8 가지가 있습니다.

 

이를 배열로 표현해서 판별하는 방법으로 튜토리얼에서는 승자를 정합니다.

(BFS 나 DFS 로도 가능합니다만 시간 관계상 리액트 튜토리얼을 그대로 설명하겠습니다.)

---

CalculateWinner 라는 함수를 만듭니다

lines 라는 const 변수 안에는 이길수 있는 경우의 수 (위에 설명한 8가지를 넣고)

for문을 돌려서 lines의 조건에 부합하는지 아닌지 판별해주는 함수입니다.

 

export default function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

---

 

이제 Board 함수로 돌아와서

CalculateWinner  함수를 임포트 해주고

import calculateWinner from "./CalculateWinner";

---

 

 

    const winner = calculateWinner(this.state.squares);
    let status;

    if (winner) {
      status = "Winner " + winner;
    } else {
      status = "Next Player " + (this.state.xIsNext ? "X" : "O");
    }

승자 판별이 되면 Winner 를 출력해주고

아니면 게임이 계속 진행될수 있도록 다음 플레이어를 표시합니다.

 

이를 통해 위처럼 승자가 나올 경우 문구가 Winner로 바뀝니다

 

일단 기본적인 게임은 만들어 졌습니다.

버그들이 조금 있기는 하지만 

튜토리얼은 여기서 마치겠습니다.

 

 

---

읽어주셔서

감사합니다.

 

추후 시간이 나면

판 크기 변경,

둔 곳 위에 두는것 방지 기능

승자 판별후 게임 진행 멈춤 기능

히스토리 기능 등을 추가 할 계획입니다.

 

 

---

 

코드보기

 

https://github.com/songk1992/react_tic_tac_toe_lecture

GitHub - songk1992/react_tic_tac_toe_lecture: 리액트로 틱택토 게임 만들면서 기초 배우기

 

---

 

참조 및 인용 문서

 

https://reactjs.org/tutorial/tutorial.html

Tutorial: Intro to React – React

---

https://codemasterkimc.tistory.com/50

300년차 개발자의 좋은 코드 5계명 (Clean Code)

 

---