← 목록으로

배워야 할 게 아직 많다 - 자바스크립트 배열 게임 예제, 스네이크 개념 도감

2026.07.13 4분 읽기
배워야 할 게 아직 많다 - 자바스크립트 배열 게임 예제, 스네이크 개념 도감

세 번째 도감

퐁 도감에 이어 벽돌깨기 도감까지 만들면서, 이 표가 다음 게임을 만들 때 실제로 참고가 되더라고. 그래서 스네이크도 만들고 나서 똑같이 남겨.

이번 표의 관점도 똑같아. 앞의 두 게임에는 없었던 게 뭐였나. 벽돌깨기 도감 마지막에 "이제 얇아질 줄 알았는데 일곱 줄이었다"고 적었는데, 이번에도 그래. 뭐, 아직까지도 기초적인 내용인 것 같지만 더 잘 요청하기 위한 과정이니 감수해야지.

픽셀에서 칸으로 — 스네이크에서 처음 만난 것들

개념 벽돌깨기까지 스네이크에서는
좌표계 픽셀 단위(x, y가 실수) 격자 단위(칸 번호가 정수) — 충돌 판정이 === 비교로 단순해짐
이동 방식 매 프레임 속도 × dt만큼 조금씩 moveTimer가 dt만큼 줄어들다 0 이하일 때만 한 칸 툭 이동(틱 기반)
배열 활용 push/splice(벽돌 만들기·제거) unshift+pop 조합으로 "이동"과 "성장"을 한 번에 표현
방향 입력 keys 객체에 기록 후 매 프레임 확인(패들 연속 이동) keydown 즉시 처리(칸 단위라 누르는 순간만 의미 있음) + 반전 방지 필터
빈 칸 찾기 (해당 없음) 점유된 칸을 표시해두고 빈 칸 목록에서 랜덤 선택(무한루프 예방)

도감에 두 줄 추가

벽돌깨기 도감에서 이어지는 요청법 표에 이번엔 두 줄이 더 붙어. 실제로 플레이 중에 발생한 문제였지만 굳이 에러노트에 적지는 않았어.

하고 싶은 것 이렇게 요청하면 더 좋다
방향키로 캐릭터를 조종하고 싶다 "지금 가는 방향이랑 정반대 입력은 무시하게 해줘" 반대로 꺾으면 머리가 자기 몸통에 바로 파고들어 즉사하는 게 스네이크류 게임의 대표적인 억울사 버그임
랜덤한 자리에 아이템을 두고 싶다 "빈 칸 목록을 먼저 만들고 그중 하나를 뽑는 방식으로 해줘 (좌표 뽑고 맞는지 확인하는 방식 말고)" 판이 거의 다 차면 랜덤 좌표 뽑기가 계속 실패해서 영원히 못 찾을 수 있음

오늘의 결론

새로운 게임을 만들 때마다 도감이 새로 채워지는데 사실 이 과정은 끝이 없을 것 같기도 해. 서두에 말했던 내용처럼 아마도 아직 기초적인 내용일 거란 말이지. 그래서 문득 궁금해지네. 도감을 몇 권이나 더 채워야 요즘 나오는 것 같은 프로젝트를 진행할 수 있을까. 아직 답은 모르겠고, 일단은 다음 기계도 하나씩 얹어보는 수밖에.

← 이전 글 두 번째 게임은 얹기만 하면 된다 - 자바스크립트 배열 게임 예제, 벽돌깨기 개념 도감