JKyEun/minesweeper

Minesweeper Game With React

💻 프로젝트 실행 방법

• Node 버전은 lts를 사용했습니다.

- 프로젝트 루트 폴더로 이동
- npm i
- npm start

⚒️ 기술 스택

• React
• TypeScript
• Redux-toolkit
• SCSS
• husky & lint-stage
• prettier & eslint

🌿 기능 소개

지뢰찾기 게임 구현

• 지뢰를 누르면 게임오버가 되고, 모든 지뢰에 깃발을 꽂고 지뢰가 없는 모든 칸을 오픈하면 승리합니다.

첫 번째 빈칸에서 지뢰 터지지 않도록

• 첫 번째 빈칸을 열 때 지뢰의 위치를 지정하여 첫 번째 클릭된 위치를 제외하고 지뢰를 배치하였습니다.

게임 타이머

• setInterval을 이용하여 구현하였습니다.

오른쪽 클릭 깃발 기능

난이도 변경

• Custom 난이도의 경우 모달로 값을 받도록 하고, 모달 바깥을 클릭 시 모달이 사라지도록 Custom Hook을 만들어 구현했습니다.

양쪽 클릭 기능

• mouse event가 button이라는 값 안에 현재 클릭된 버튼이 왼쪽인지 오른쪽인지에 따라 0과 2를 담고 있어 이를 이용해 구현했습니다.
• ref에 string으로 0과 2를 추가하여 '20' 또는 '02'일 경우 양쪽 클릭으로 간주했습니다.
• mouseUp이나 mouseLeave가 발생하면 ref는 초기화됩니다.

난이도 데이터 저장

• localStorage를 이용했습니다.

사용자 친화적인 UI/UX

• 모달과 드롭다운 메뉴의 경우 닫을 수 있는 버튼이 각각 존재하지만 요소의 바깥을 클릭해서도 닫을 수 있도록 했습니다.