Snake 게임🐍

Snake 게임?

심심하기도 하고, 자바스크립트 감을 되살려 볼 겸 Snake 게임을 만들기로 했다. 밋밋한 캔버스에 만들고 싶지는 않아서 검색하다가 고전 게임스러운 UI를 발견해서 참고했다.

 

ui.toast.com/weekly-pick/ko_20191216

모던 자바스크립트로 테트리스 만들기

 

구현

기능은 모두 직접 구현했고, 나름 게임 룰을 정했다.

 

 

패배 조건은 두 가지인데 벽에 닿거나, 뱀의 머리가 몸통에 닿으면 패배한다.

 

 

게임은 이런 식으로 동작한다.

 

 

중간에 기막힌 버그가 발생해서 캡처해놨다.

 

처음에 뱀을 설계할 때 배열(1 X 2)로 만들어서 사과를 먹을 때마다 뱀의 좌표(x, y)를 배열에 shift 해줬다. 그런데 사과를 기준으로 뱀이 어느 방향에서 다가오는지 일일이 계산하기에는 복잡했고, 뱀의 움직임을 헤드가 움직였을 때 몸통이 따라서 움직이도록 만들었기 때문에 위와 같은 버그가 발생했다.

 

그래서 먼저 뱀이 다음으로 이동할 좌표를 계산해서 배열에 unshift 해주고, 테일을 pop 해주는 방식으로 움직임을 구현했다.

 

움직임만 만들어놓으면 나머지는 구현은 간단한 문제였다. 다만, 일정량의 사과를 먹을 때마다 뱀의 속도를 증가시키는 부분은 되게 민감해서 여러번 플레이하면서 조절했다.

 

소스 코드

Snake.zip

0.00MB