๐งฉย Snake Game ๊ตฌ์กฐ
๐งฐย Repository
GitHub - SungHyun627/JS-SnakeGame
๋ฐฐํฌ ๋งํฌ
JS Snake Game
๐ฎย ๊ฒ์ ๊ท์น
- ๋ฑ์ด ์์ง์ด๋ ๋ณด๋ํ ๊ฐ ์
์ ์ขํ๋ (์ด ๋ฒํธ, ํ ๋ฒํธ)์ด๋ฉฐ, ๋งจ ์ผ์ชฝ ์์ ์
์ (0, 0), ๋งจ ์ค๋ฅธ์ชฝ ์๋์ ์
์ (19, 19)์ด๋ค.
- ๋ณด๋ํ์ ์์ง์ด๋ ๋ฑ์ด ์ฌ๊ณผ๋ฅผ ๋จน์ผ๋ฉด ๊ธธ์ด๊ฐ 1 ์ฆ๊ฐํ๊ณ , ์ค์๊ฐ ์ ์(๐)๊ฐ 1 ์ฆ๊ฐํ๋ค.
- ์ ์๋ ScoreBoard์์ ์ค์๊ฐ์ผ๋ก ๊ฐฑ์ ๋๋ฉฐ, ์ต๊ณ ์ ์(๐)๋ณด๋ค ์ค์๊ฐ ์ ์(๐)๊ฐ ์ปค์ง๋ ๊ฒฝ์ฐ, ๋ ์ ์๊ฐ ๊ฐ์ ๊ฐ์ผ๋ก ๋์์ ์ฆ๊ฐํ๋ค.
- ๊ฒ์ ์์ ์ ๋ฑ์ ์ด๊ธฐ ์์น๋ (9, 4), (9, 5), Head(9, 6)์ด๋ค.
- ๋ฑ์ ๊ธธ์ด๋ ๋ฑ์ด ์ฐจ์งํ๊ณ ์๋ ์
์ ๊ฐ์์ ๋์ผํ๋ค.
- ๋ฐฉํฅํค๋ฅผ ํตํด ๋ฑ์ ์ด๋๋ฐฉํฅ์ Control ํ ์ ์๋ค.
- ๋ฑ์ด ๋ฑ์ Body๋ ๋ฒฝ๊ณผ ์ถฉ๋ํ ๊ฒฝ์ฐ ๊ฒ์์ด ์ข
๋ฃ๋๊ณ Modal์ด ๋์์ง๋ค.
- Modal์ ์ค์๊ฐ ์ ์์ ์ต๊ณ ์ ์๊ฐ ํ์๋๋ฉฐ, ๋ฒํผ์ ํตํด ๊ฒ์์ ์ฌ์์ ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํ ์ ์๋ค.
- ๊ฒ์ ํ๋จ Control Board์ Restart/Reset ๋ฒํผ์ ํตํด ๊ฒ์ ์ฌ์์ ์ฌ๋ถ ๋ฐ ์ต๊ณ ์ ์ ์ด๊ธฐํ ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํ ์ ์๋ค.
๐ฌย ๊ฒ์ ์ธ๋ถ ํ๋ฆ
โย Components
- 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
๐งย ์ฃผ์ ๊ตฌํ ๊ธฐ๋ฅ