분류 Reactjs

React 후크 및 스타일 구성 요소를 사용하여 자신 만의 탁월한 Tic Tac Toe을 만드십시오 (3)

컨텐츠 정보

  • 조회 343 (작성일 )

본문

// utils.js // Get random integer in a range min-max export const getRandomInt = (min, max) => { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; }; // TicTacToe.js // ... const computerMove = () => { let index = getRandomInt(0, 8); while (grid[index]) { index = getRandomInt(0, 8); } move(index, players.computer); }; const humanMove = index => { if (!grid[index]) { move(index, players.human); computerMove(); } }; 


이제 게임은 더욱 대화식입니다. 인간 플레이어의 차례가 끝나면 computerMove 기능이 호출되어 기본적으로 보드의 임의의 빈 사각형으로 이동합니다. 또한 프로젝트에 utils.js 파일을 추가했습니다. 여기에서 임의의 범위에서 난수를 얻는 데 사용되는 도우미와 같은 모든 도우미가 저장됩니다.


물론 이 게임은 여전히 ​​완벽하지 못하며 많은 문제가 있습니다. 시작되지 않음, 진행 중 및 종료의 세 가지 게임 상태를 추가하여 개선을 시작할 것입니다. 게임이 첫 번째 상태에 있을 때, 우리는 플레이어 선택 화면을 보여줄 것이고, 두 번째 상태는 보드를 렌더링하고 플레이어가 움직일 수 있게 하고, 마지막 상태는 게임의 결과를 선언 할 것입니다.


// constants.js export const GAME_STATES = { notStarted: "not_started", inProgress: "in_progress", over: "over" }; 


이제 컴포넌트에서 이를 사용하여 다른 "화면"을 렌더링 할 수 있습니다.