🧩 Snake Game 구조

Untitled

🧰 Repository

뱀이 움직이는 보드판 각 셀의 좌표는 (열 번호, 행 번호)이며, 맨 왼쪽 위의 셀은 (0, 0), 맨 오른쪽 아래의 셀은 (19, 19)이다.
보드판을 움직이는 뱀이 사과를 먹으면 길이가 1 증가하고, 실시간 점수(🍎)가 1 증가한다.
점수는 ScoreBoard에서 실시간으로 갱신되며, 최고 점수(🏆)보다 실시간 점수(🍎)가 커지는 경우, 두 점수가 같은 값으로 동시에 증가한다.
게임 시작 전 뱀의 초기 위치는 (9, 4), (9, 5), Head(9, 6)이다.
뱀의 길이는 뱀이 차지하고 있는 셀의 개수와 동일하다.
방향키를 통해 뱀의 이동방향을 Control 할 수 있다.
뱀이 뱀의 Body나 벽과 충돌할 경우 게임이 종료되고 Modal이 띄워진다.
Modal에 실시간 점수와 최고 점수가 표시되며, 버튼을 통해 게임의 재시작 여부를 결정할 수 있다.
게임 하단 Control Board의 Restart/Reset 버튼을 통해 게임 재시작 여부 및 최고 점수 초기화 여부를 결정 할 수 있다.

Game Title : GameTitle을 표시하는 Component
ScoreBoard : 실시간 점수와 최고 점수를 표시하는 Component
- State(2)
  - 실시간 점수(🍎, RealtimeScore)
  - 최고 점수(🏆, BestScore)
Board(Game Board) : 뱀이 이동하면서 게임이 진행되는 Board Component
- 초기 조건(3)
  - 20X20 Board, 길이가 3인 항상 동일한 셀에 위치하는 뱀, 랜덤한 위치에 생성되는 사과
- State(7)
  - SnakeQueue : 뱀이 차지하고 있는 셀의 위치를 담고 있는 배열
  - Direction : 뱀의 이동방향
  - gameState : 게임의 진행 상태
  - snakeState : snake의 상태
  - applePos : 사과의 위치 정보를 담은 객체
  - removedApplePos : 제거된 사과의 위치 정보를 담은 객체
  - removedSnakePos: : 뱀이 차지했었던 셀의 위치 정보를 담은 객체
Control Board : 게임의 재시작 및 초기화 기능을 담당하는 Component
- Restart Button
- Reset Button
Modal : 게임 결과 보여주고, button을 통해 재시작 여부를 정할 수 있는 Component
- State(1)
  - modalState : modal의 display여부를 나타내는 state
- modal 상단에 있는 Close button
- 게임의 결과를 보여주는 section
- Restart Game Button
- Stop Playing Button