snake 게임 – JavaScript

snake game screenshot

전에 만든 테트리스 코드를 가져다 사용했는데 최소한의 기능만 만들었다. 시작 코드로 Create React App를 사용했으며 App.js, App.css 이 두 파일을 수정했고 fp-snake 모듈을 사용했다. FP 라이브러리로 유명한 Lodash 라이브러리를 사용했다. Functional Programming (FP) 방법을 연습하는 중이다.

좌표 정보를 따로 업데이트하지 않는다.

데이터 구조는 간단하게 유지했다. 두 개의 2차원 배열을 사용하는데 코드에서 panel이라고 이름 지었다. 하나의 패널은 사과가 위치하는 패널이고 다른 하나는 위에서 뱀 블록을 저장하는 패널이다. 이 두 패널을 합쳐서 브라우저 화면에 표시했다.

+-----------+   +-----------+   +-----------+
| +-+       |   |       +-+ |   | +-+   +-+ |
| +-+       |   |       | | |   | +-+   | | |
|           | + |       | | | = |       | | |
|           |   | +-----+ | |   | +-----+ | |
|           |   | +-------+ |   | +-------+ |
+-----------+   +-----------+   +-----------+
  applePanel      snakePanel       screen

사과와 뱀이 서로 겹쳐지는 것은 두 패널을 교차하여 값을 확인하는 방법으로 해결했다. 이렇게 패널 두 개로 구성하면 블록이 어디에 있는지 알기 위해 위치 관련 코드를 작성할 필요가 없다. 단지 두 개의 배열만 처리하면 된다. 대부분의 함수는 이 두 개 패널을 변경하는 용도다. 많은 함수가 패널을 인자로 받는다. fp-snake.js에서 패널을 변경하는 가장 상위의 함수는 아래와 같다.

  • tick
  • key

이벤트는 2개다.

이 두 함수를 호출하는 이벤트는 두개다.

  • 타이머
  • 사용자 키 입력

주기적으로 뱀을 움직이는 타이머와 사용자의 키 입력이다. 뱀 블록을 저장하는 패널은 타이머에 의하여 이전 저장된 방향으로 업데이트된다. 뱀과 사과가 겹쳐진다면 뱀의 길이를 늘이고 사과를 다른 곳에 둔다.

  • 방향키: 뱀이 움직일 위치를 지정한다.

조합 함수 사용

아래 함수는 2차원 배열에서 뱀을 움직이는 함수다. 2 차원 배열을 입력을 받아서 2차원 배열을 출력한다.

const moveSnake = _.flow([
  convert1DimAry,
  fp.filter(isNotBlank),
  fp.sortBy('index'),
  addHeadItem,
  reIndexing,
  removeTailItem,
  justPaintSnake
]);

지역 변수도 없고 함수를 호출하는 인자도 따로 표시되지 않는다. 코드가 어떤 일을 하는지 쉽게 알 수 있다. Lodash의 _.flow를 사용해서 함수를 조합했는데 Ramda의 compose를 사용해도 다르지 않다. 함수형 라이브러리의 종류보다 함수를 조합하는 방법이 더 중요하다. 생각해 보면 이런 방법을 이미 터미널에서 사용하고 있었다. Bash에서 여러 명령어들을 | 파이프를 사용하여 연결해서 사용한 경험이 있다. 정말 비슷하다.

테트리스 게임과 마찬가지로 if, for, let, function 키워드를 사용하지 않는다. Canvas를 사용하지 않고 React를 사용하여 DOM을 업데이트한다. 테트리스 게임은 약 400라인의 자바스크립트 코드를 사용했고 뱀 게임은 약 300라인을 사용하고 있다. 예상보다 짧아서 흥미로웠다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

This site uses Akismet to reduce spam. Learn how your comment data is processed.