React.js에서 스도쿠 퍼즐의 게임 옵션 저장

반응형

리액트에서 스도쿠 퍼즐 게임을 만들고 있어요. 아직 이 앱이 완성되지 않았지만, 제가 추가한 세이브 게임 기능에 대한 게시물을 만들고 싶었습니다. 먼저 게임이 어떻게 구축되는지에 대한 기본적인 설명을 드리겠습니다(앞으로 빌드 각 섹션에 대한 자세한 게시물을 만들겠습니다).

퍼즐은 당분간 세 가지 퍼즐 옵션을 제공합니다: 하드, 미디엄, 그리고 쉬운. 각 난이도는 json 파일의 퍼즐 객체에 고정된 숫자의 문자열과 일치한다.

숫자의 줄들은 별도의 타일(CSS로 스타일링됨)로 매핑되며 81개의 타일로 스도쿠 보드를 만든다.

 

보드를 추적하기 위해 각 타일에 선택된 타일이라는 상태에 있는 ID를 부여했습니다. 선택한 항목타일 상태는 보드의 각 타일에 부착된 onClick 이벤트를 사용하여 설정합니다.

퍼즐 옆면의 숫자 열은 selectedNumber라는 상태를 설정하는 데 사용됩니다. 이에 대한 상태도 onClick 이벤트에 해당하는 기능 내에서 설정됩니다.

게임을 저장하기 위해 보드를 만들 때 사용한 원본 문자열의 복사본이 필요했습니다. 이것은 세이브드게임이라고 불리는 상태로 저장되었다. 원본 퍼즐의 복사본이 있으면 원본을 바꾸지 않고도 문자열을 쉽게 변경할 수 있습니다. 사용자가 변경한 저장된 게임 상태를 업데이트하는 기능을 업데이트저장된 게임()이라고 합니다.

 

이 함수의 if 문은 타일이 선택된 타일 안에 저장되고 있는지 확인합니다. if 문이 없으면 함수는 정의되지 않음으로 퍼즐을 업데이트하려고 할 것이다. 타일을 선택하면 ID 번호가 부여되고 코드가 실행됩니다. 코드는 첫 번째 타일부터 선택한 타일의 위치까지 문자열을 구분합니다. 또한 선택한 타일 이후 마지막 타일까지 한 타일로부터 분리됩니다. 이 함수의 마지막 부분은 사용자가 선택한 숫자를 사이에 두고 첫 번째 퍼즐 덩어리를 두 번째 덩어리에 추가합니다. 이렇게 하면 사용자가 한 정답이 모두 업데이트되고 해당 변경 사항으로 퍼즐 문자열을 다시 작성합니다. 이 기능은 사용자가 올바르게 선택할 경우에만 실행됩니다. 그러면 tileContent 상태가 업데이트됩니다(타일 안에 숫자 또는 대시 고정). 이 경우 tileContent가 변경될 때만 실행되는 useEffect()를 사용합니다.

이제 퍼즐이 정답으로 업데이트되었으므로 문자열을 저장할 준비가 되었습니다. 이것은 Json 서버에 POST 요청을 하고 퍼즐 섹션에 저장된 게임 상태를 추가하면 됩니다.

 

게임을 json 서버에 업로드하기 위해 마지막으로 추가해야 할 부분은 이 기능을 게임 저장 버튼에 부착된 onClick 이벤트에 묶는 것이다.

다시 말하지만, 이 앱은 아직 제작 중인데, 완성되고 스타일링되어야 할 것들이 꽤 많기 때문입니다. 저장된 게임을 나중에 보드에 다시 로드할 수 있는 기능 포함. 이 게시물은 useEffect와 useState를 사용하여 저장된 게임을 만들고 업데이트하는 과정만 설명합니다.