Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eeeyooon/minesweeper-game
지뢰찾기 게임
https://github.com/eeeyooon/minesweeper-game
react redux redux-toolkit styled-components typescript
Last synced: 5 days ago
JSON representation
지뢰찾기 게임
- Host: GitHub
- URL: https://github.com/eeeyooon/minesweeper-game
- Owner: eeeyooon
- Created: 2023-12-16T08:36:32.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2023-12-16T08:57:57.000Z (11 months ago)
- Last Synced: 2023-12-16T09:56:14.976Z (11 months ago)
- Topics: react, redux, redux-toolkit, styled-components, typescript
- Language: TypeScript
- Homepage: https://yoon-minesweeper.vercel.app
- Size: 221 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 지뢰찾기 구현하기
## 프로젝트 설치 및 실행
해당 프로젝트를 열고 다음과 같이 명령어를 실행해주세요.
```
npm install
yarn install
```
```
npm run start
yarn start
```
## 프로젝트 개요
📢 프로젝트 주제 : 지뢰찾기 게임을 구현한 프로젝트입니다.
📆 프로젝트 기간 : 231207 ~ 231211
🍊 [지뢰찾기 게임 해보기](https://yoon-minesweeper.vercel.app/)
## 기술 스택
폴더 구조와 라이브러리는 README 하단에서 확인할 수 있습니다.
## 구현 기능
### 지뢰게임 시작
- 첫 번째 빈칸을 열면 게임이 시작됩니다.
- 첫 번째 빈칸을 열었을 땐 지뢰가 터지지 않습니다.
- 게임 시작 시 타이머가 작동하고, 게임이 종료되면 타이머가 멈추게 됩니다.
- 남은 지뢰의 개수를 확인할 수 있습니다. 깃발을 세우면 남은 지뢰의 개수가 감소합니다. (실제 남은 지뢰의 개수와 일치하지 않고, 깃발이 모두 지뢰가 있는 칸에 세워졌다는 가정 하에 작동합니다.)
- 칸을 열었을 때 해당 칸과 인접한 칸들 중에 지뢰가 없다면 인접한 칸들도 모두 열립니다. (재귀적으로 주위 칸들의 지뢰 개수를 탐색합니다.)
### 오른쪽 클릭으로 깃발/물음표 표시
- 오른쪽 클릭 시 해당 칸에 깃발이 세워집니다. 그 상태에서 오른쪽 클릭을 하면 "물음표"가 표시되고 다시 한번 오른쪽 클릭을 하면 원 상태로 돌아오게 됩니다.
### 지뢰찾기 게임 승리
- 지뢰가 있는 칸을 제외한 모든 칸을 열면 게임에서 승리합니다.
- 깃발이나 물음표가 있는 칸은 열리지 않은 상태입니다.
### 난이도 변경 및 게임 패배
- 난이도는 "beginner", "intermediate", "expert" 중에서 선택할 수 있습니다. 선택한 난이도에 따라 보드판의 가로, 세로 길이(칸의 수)와 지뢰의 개수가 달라집니다.
- 지뢰가 있는 칸을 열면 게임에서 패배하게 됩니다.
### 난이도 커스텀
- 사용자가 원하는대로 가로, 세로, 지뢰 수 조정이 가능합니다.
- 설정 가능한 가로, 세로는 최대 100x100이며, 지뢰 수는 격자칸 수의 1/3 이하로만 설정이 가능합니다.
### 난이도 데이터 저장 (브라우저 새로고침 시 유지)
`redux-persist`를 사용하여, `redux`의 `store`를 통해 관리되는 `state`를 `localStorage`에 저장하여 새로 고침을 하여도 난이도의 데이터가 저장되어 유지되도록 설정하였습니다. 난이도를 선택하고 나서 새로고침을 해도 해당 난이도로 게임을 진행할 수 있습니다.
## 폴더 구조
```
📦src
┣ 📂components
┃ ┣ 📂Board
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┣ 📂Cell
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┣ 📂Header
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┣ 📂Menu
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┗ 📜index.ts
┣ 📂lib
┃ ┣ 📜constants.ts
┃ ┣ 📜findAroundMine.ts
┃ ┗ 📜initialBoard.ts
┣ 📂slices
┃ ┗ 📜gameSlice.ts
┣ 📂store
┃ ┗ 📜index.ts
┣ 📂style
┃ ┣ 📜global.ts
┃ ┗ 📜theme.ts
┣ 📜App.tsx
┣ 📜index.tsx
┗ 📜react-app-env.d.ts
```
## 라이브러리
```
"dependencies": {
"@reduxjs/toolkit": "^2.0.1",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.67",
"@types/react": "^18.2.42",
"@types/react-dom": "^18.2.17",
"@types/react-redux": "^7.1.32",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^9.0.2",
"react-scripts": "5.0.1",
"redux": "^5.0.0",
"redux-persist": "^6.0.0",
"styled-components": "^6.1.1",
"styled-reset": "^4.5.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
```