바닐라스네이크 (Vanilla Snake)

아케이드 · 캔버스 2D · 순수 JavaScript

클래식 스네이크를 캔버스와 배열 기반 좌표로 구현한 게임입니다. 먹이를 먹을 때마다 몸이 길어지고, 벽이나 자기 몸에 닿으면 게임이 끝납니다. 점수는 먹이를 먹은 횟수와 같습니다.

조작 방법

• 키보드: 방향키(←↑→↓)로 이동 방향을 바꿉니다. 스페이스와 방향키의 기본 스크롤 동작은 막혀 있어, 페이지가 움직이지 않도록 처리되어 있습니다.
• 모바일: 화면에 있는 방향 버튼은 setDir로 같은 규칙이 적용됩니다. 즉시 반대 방향으로는 전환되지 않습니다.

게임 흐름과 규칙

• 시작 시 모달에서 안내 후 게임 시작을 누르면 루프가 돌기 시작합니다. 한 프레임(틱)은 100ms (setInterval(draw, 100)) 간격입니다.
• 뱀은 { x, y } 좌표의 배열로 관리되며, 한 칸 크기는 20px(box = 20)입니다. 머리는 첫 번째 요소이며 색이 몸통과 다르게 표시됩니다.
• 먹이는 격자 칸 1~19 범위에서 무작위로 한 칸씩 생성됩니다. 머리가 먹이와 같은 칸이면 점수가 1 오르고, 꼬리를 짜르지 않아 길이가 1칸 늘어납니다. 먹이가 없으면 이동 후 꼬리 한 칸을 제거해 길이를 유지합니다.
• 방향은 정반대로 바로 꺾을 수 없습니다. 예를 들어 오른쪽으로 가는 중에는 왼쪽 입력이 무시됩니다.
• 게임 오버는 다음 중 하나입니다. 캔버스 밖으로 나감( snakeX < 0, snakeX >= canvas.width 등), 또는 새 머리 위치가 기존 몸과 겹침(collision).

점수와 랭킹

게임 오버 후 모달에서 최종 점수를 확인할 수 있습니다. 랭킹 등록을 누르면 닉네임(공백 제외 최소 2자)을 입력해 Firestore에 점수를 보냅니다. 게임 ID는 snake이며, 동일 닉네임이 있으면 기존보다 높을 때만 갱신되는 로직(saveGameScore)이 적용됩니다. 등록 없이 바로 다시 플레이하려면 다시 시작 버튼을 사용하면 됩니다.

플레이 팁

• 틱이 100ms로 고정이므로, 길어질수록 미리 코너를 계획하는 편이 유리합니다.
• 벽 근처에서는 반대 입력이 막히므로, U자 회전 전에 여유 칸을 확보하세요.
• 랭킹을 남길 계획이면 게임 중 사용할 닉네임을 미리 정해 두면 입력이 수월합니다.