[ 토이 프로젝트 ] 지뢰찾기 게임 만들기 ( feat. typescript, react, mobx )

프로젝트 동기

레퍼런스와 내가 만든 지뢰찾기

이 프로젝트가 지뢰찾기여야 하는 큰 이유는 없다. mobx를 써보는 것에 큰 의미를 둔 프로젝트였다.

기본적인 기능은 구현이 완료되었고 앞으로는 추가적인 기능, 버그 수정을 진행할 예정이다. 

 

stack🔗 

• CRA-typescript
• eslint
• prettier
• styled-component
• mobx

 

지뢰찾기를 만들기로 했다면, 이런 게임 구현이 익숙하지 않을 때 막막할 수 있다. 

바로 코드를 보고 따라 하는 것도 좋지만

직접 생각해보며 구현해보고 싶은 사람은 내가 구현하면서 생각한 순서를 작성했으니 가이드가 필요하다면 참고하시길!🙏🏼

 

지뢰찾기 구현 가이드

 

1. matrix 형태의 게임 보드를 만든다. ( 나는 8x8 로 세팅했다. Array의 내장 메서드인 from() 과 fill()을 사용했다. )
2. 초기 값을 0, 지뢰가 있는 곳을 1로 하고 랜덤한 위치에 1을 넣도록 한다.
3. (0,0) 부터 현재 cell을 감싼 모든 cell의 값을 확인하고 1 (지뢰)의 수를 세어 값을 넣는다.
4. click한 cell 주위 모든 cell을 열어볼 수 있도록 한다.
5. 그럼 이제 click 한 주위 cell 중 값이 0인 cell만 열리도록 해보자.
6. 값이 0인 cell의 위치만 저장하는 배열을 만들어 push 한다.
7. click한 cell 주변에 0이 있다면,또  값이 0인 cell 주변에 또 0이 있는지 찾아 배열에 push한다.
8. 값이 0인 cell의 위치가 담긴 배열이 빈 배열이 될 때까지 모든 해당 cell을 찾아 탐색하고 0일때 cell을 여는 작업을 한다.( 나는 6, 7, 8번을 위해 재귀함수를 사용했다. )
9. 0을 보이지 않게 한다. 
10. 1 (지뢰) 대신 지뢰 모양의 이모지를 넣어준다
11. cell 우클릭시 깃발을 꽂는다. (동시에 클릭을 막는다. 다시 우클릭시 깃발이 해제된다.)
12. 총 지뢰 갯수를 보여주는 UI요소를 추가하고 깃발이 꽂힐때, 해제될 때마다 갯수를 계산해준다.
13. 값이 1인 (지뢰)를 누르면 모든 지뢰가 다 보이도록 하고 게임이 종료된다.
14. reset버튼을 만들어 누르면 게임 보드가 초기화된다. cell의 모든 값, 지뢰의 위치도 재설정된다. 
15. 타이머 UI요소 추가 후 게임이 시작되면( cell을 처음 클릭했을 때 ) 타이머가 시작된다. ( useEffect와 setTimeout을 사용했다. )
16. 게임에서 지거나, 게임에서 이기면 타이머를 멈춘다. 

 

 

프로젝트를 하며 공유하고 싶은 자세한 내용은 추후 업로드 예정이다.

 

git link

https://github.com/min9120/minesweeper-game

GitHub - min9120/minesweeper-game: 지뢰찾기 게임입니다 💣

참고한 게임 link

https://minesweeperonline.com/

Minesweeper Online - Play Free Online Minesweeper