React를 사용한 브라우저 게임

주말 프로젝트로 미니 브라우저 게임을 만드는 것과 같은 반응으로 재미있는 것을 시도하기로 결정했습니다. 그리고 결과도 나쁘지 않다 - void-dodge

이 게시물은 코드에 들어가지 않고 어떻게 수행되었는지 간략하게 설명합니다. 소스 코드를 볼 수 있습니다here

개념

플래피 버드와 같은 장애물 회피 게임은 비교적 쉽게 시도할 수 있었습니다. 우주 테마를 추가하고 수직으로 만들면 우주선이 좌우로 움직이고 소행성이 아래로 미끄러지는 영역이 생깁니다.

 ----------
|    AA  A |
|          |
| AAA   AA |
|          |
| <- S ->  |
|          |
-----------

게임의 영역이 그리드, 소행성 및 우주선이 그 안의 세포를 점유한다고 상상해보십시오. 소행성 세포는 그리드의 맨 위에서 렌더링되고 시간이 지남에 따라 아래로 이동하며 어느 시점에서 우주선과 같은 행에 있습니다. A와 S가 같은 셀을 차지하면 게임이 끝납니다. 그렇지 않으면 점수가 올라갑니다.

구성품

셀 크기를 64px로 간주했습니다.

플레이그라운드: 테두리가 있는 706 x 512 상자, 이것은 게임의 컨테이너가 됩니다.

배: 놀이터 중앙 약간 아래에 위치한 64x64 셀. 배는 좌우로만 움직이고,

소행성 벨트: 8개의 셀이 있는 행, 여기에는 두 가지 유형이 있습니다. 물체를 나타내는 채워진 셀과 배가 통과할 빈 셀.

게임플레이

소행성 벨트는 몇 가지 임의의 인덱스를 선택하여 비어 있는 상태로 유지하고 나머지를 채워진 것으로 표시하여 생성됩니다.

채워진 셀의 왼쪽 픽셀 위치는 배열에 유지됩니다. 벨트가 선박과 수평으로 정렬되고 현재 왼쪽 위치가 이 배열 내에 포함되어 있으면 충돌이 발생합니다.

벨트는 놀이터 영역 외부에서 생성되고 CSS에 의해 애니메이션된 다음 통과하면 제거됩니다. 벨트는 대기열로 유지됩니다. 즉, 벨트가 추가되고 간격 코드에 의해 2초마다 하나씩 제거됩니다.

충돌 검사는 ~100ms마다 다른 간격 코드에 의해 실행되며 비효율적이지만 한 번에 최대 4-5개의 벨트 인스턴스만 활성화되어 있다는 점을 고려하면 이 작은 게임에는 영향을 미치지 않습니다.

게임 상태, 점수 및 최종 요약 정보를 유지하기 위해 redux 스토어를 사용했습니다. 게임 상태는 인트로, 게임 진행 중 및 게임 종료의 세 가지 값을 가질 수 있습니다. 점수는 최신 5점과 최고 점수를 유지하면서 localStorage에 유지됩니다.

나는 react-particles-js과 약간의 복고풍 음악을 추가하여 환경을 더 매력적으로 만들고 아이콘 파인더의 아이콘을 공간 테마로 추가했습니다.

그게 다야 여러분 :)