[백엔드 개발자의 프론트 도전기] 8. snake game(2)

게임을 만들기 위한 세팅이 끝났으니, 이제 기획으로 넘어가보려고 한다.

게임의 룰은 몹시 간단하니 생략하겠다.

따라서, 실제 화면을 먼저 구상해보았다.

 

화면 구상에는 figma를 사용하였다.

여러가지 찾아보면서 어떤 식으로 사용하는지를 배웠는데,

당장은 이게 너무 많은 시간을 잡아먹는 것이 의미있지는 않다고 생각해

간략히 만들고 실개발로 넘어가려고 한다.

처음으로 figma를 사용해 디자인(?) 비슷한 것을 해본 것이기 때문에, 몹시 단순하고 허술하지만,,,,,,,

https://www.figma.com/file/wieMW91CcGkGYIZPH1Zz0u/Untitled?type=design&node-id=0%3A1&mode=design&t=e5SGL31n1JunTTb7-1

Figma

 

 

왼쪽 app 화면은 게임을 시작하기 전 화면이고,

start 버튼을 누르면 오른쪽 play 화면으로 넘어가게 된다.

리액트를 기존에 제대로 다뤄본 적이 없기 때문에, 최대한 단순하게 만드는 것을 목표로 하였다.

 

오른쪽 play 화면에서 가장 큰 사각형은 실제 게임이 동작하는 화면이고,

000은 현재 score가 들어가는 곳, 999는 best score가 들어가는 곳이다.

restart 버튼을 누르면 다시 왼쪽의 app 화면으로 돌아가게 되고,

quit 버튼을 누르면 게임이 종료된다. (이걸 목표로 했지만, 안 되면 바꾸든지 해야할 것 같다.)

 

디자인은 아이폰 14&15 기종을 바탕으로 했으며(단순히 선택지의 맨 위쪽에 있어서),

게임은 키보드와 게임 화면의 상하좌우 터치에 반응해 동작한다.(이 부분도 구현하면서 변경될수도!)