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을 업데이트한다.

Block 게임 – JavaScript”에 대한 답글 1개

답글 남기기

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

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.