Block 게임 – JavaScript

block game screenshot

Functional Programming (FP) 연습하는 목적으로 작은 게임들을 만들고 있다. 이 게임은 그 중에 하나로 위에서 내려오는 블럭들을 미사일로 맞추는 것이 목적이다. 전에 만든 테트리스 코드를 가져다 사용했는데 최소한의 기능만 만들었다. 시작 코드로 Create React App를 사용했으며 App.js, App.css 이 두 파일을 수정했고 fp-block 모듈을 사용했다. FP 라이브러리로 유명한 Lodash 라이브러리를 사용했다.

좌표 정보를 따로 업데이트하지 않으며 데이터 구조는 간단하게 네 개의 배열을 사용했다. 코드에서 panel이라고 이름 지었다.

  • 백그라운드 패널 (나중 사용을 위해 예약 했다)
  • 우주선 패널 (바닥 아래에서 죄우로 움직이며 미사일을 발사한다)
  • 미사일 패널 (발사된 미사일을 위로 이동한다)
  • 운석 패널 (랜덤 모양으로 생성된 블럭들이 아래로 내려온다)
+-----------+   +-----------+   +-----------+
|           |   |           |   |  +----+   |
|           |   |           |   |  |  +-+   |
|           | + |    +-+    | + |  +--+     |
|    +-+    |   |    +-+    |   |           |
|  +-+ +-+  |   |           |   |           |
+--+-----+--+   +-----------+   +-----------+
 shuttlePanel    missilePanel  meteoritePanel

이 패널들을 하나의 패널로 모아서 브라우저 화면에 표시했다. 테트리스 게임과 마찬가지로 if, for, let, function 키워드를 사용하지 않는다. Canvas를 사용하지 않고 React를 사용하여 DOM을 업데이트한다.

답글 남기기

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

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.