반응형
이번 글을 통해 배워갈 내용
- 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
참조 및 인용 문서
https://reactjs.org/tutorial/tutorial.html
https://codemasterkimc.tistory.com/50
반응형
'Javascript > React' 카테고리의 다른 글
리액트 훅을 사용해서 캔버스에 움직이는 하트 애니메이션 만들기 (0) | 2022.02.25 |
---|---|
VS코드 리액트 개발의 필수 아이템 Simple React Snippets (0) | 2021.08.20 |
리액트로 틱택토 게임 만들면서 기초 배우기 # 8 (플레이어 순서 정하기) (0) | 2021.08.07 |
리액트로 틱택토 게임 만들면서 기초 배우기 # 7 (function components) (0) | 2021.08.07 |
리액트로 틱택토 게임 만들면서 기초 배우기 # 6 (controlled components) (0) | 2021.08.07 |