[Day 40] 실습 (Snake-Game 완성하기)

실습 (Snake Game 코드 일부 변경해서 완성하기)

실습 코드

문제점 및 해결방법

[문제점]

1. 게임 난이도를 올리는게 불가능하다.
2. 키 반복입력 속도를 조절하는게 불가능하다.
3. 키 입력을 통해 뱀이 움직이는 것과, setInterval() 함수에 의해 주기마다 뱀이 움직이는게 따로 분리되어 있어서 두 작업이 겹칠때 뱀이 두 칸 움직이는 것처럼 보일 때가 있다.

[해결방법]

1. setInterval() 함수 대신 setTimeout() 함수를 재귀함수로 이용한다. (재귀함수 호출 시 setTimeout()이 중첩되기 때문에 함수 초입에서 clearTimeout() 으로 클리어해준다.)
2. setTimeout() 함수에서 게임이 끝난 상태를 체크해서 nextState를 인수로 받아서 상태를 변경해준다.
3. 키 입력했을때 동작하는 함수에서는 nextState로 상태를 변경해주는 작업을 하지 않고, setTimeout() 함수를 불러서 간접적으로 nextState 상태로 변경해준다.
4. 이벤트 리스너에 키 입력 시 동작하는 함수를 등록할 때, throttle 을 걸어서 키 반복입력 시간을 제한해준다.

Reference

1. lodash.throttle - throttle 기능을 구현해 놓은 모듈
2. Throttle, Debounce 개념 잡기 - Blog
3. throttle과 debounce - Blog