2D 어레이를 사용하여 걷기 가능한 게임 맵을 만듭니다(React에서!)

나는 최근에 나의 유사 이래 첫 번째 React 프로젝트인 Code Camp Quest라는 미니 시뮬레이션 게임을 배치했다. 이 게임에서 당신은 학생 개발자로서 그녀의 숙제와 그녀의 필요한(귀엽지만) 개를 균형 있게 하려고 한다.

여기서 놀아요.

이 프로젝트를 창설하면 저는 React에 대한 이해를 깊이 있게 할 수 있을 뿐만 아니라 Redux를 배우고 맞춤형 연결을 작성하는 것을 체험할 수 있습니다.이 과정에서 나는 많은 도전에 직면했다. 그 중 하나는 지도 경계를 만드는 문제를 어떻게 처리하는가이다.나는 내가 어떻게 해결했는지 토론할 것이다. 그러나 우선...

저의 게임 영감에 대한 배경들.

내가 코치에게 내가 나의 React 프로젝트를 위해 게임을 하나 하려고 생각하고 있다고 말했을 때, 나는 내가 무엇을 하는지 완전히 이해하지 못했다.'아날로그 인생'과'별로골'등 게임에 대한 나의 사랑과 일치하는 게임을 만들고 싶다는 것을 알고 있다.적어도 나는 평면에서 캐릭터를 이동하고 임무를 완수할 수 있기를 바란다.
나도 내가 최근의 경험을 줄거리에 반영하고 싶다는 것을 안다. 그것은 바로 내가 무엇을 해야 할지, 언제 해야 할지 알려주는 두 마리의 개와 함께 공부하는 것이다.네가 알고 있는 것을 적어라, 그래서 그들이 말한다.
개념화 논리를 하는 과정에서 나는 격자를 만들고 키를 눌러서 캐릭터의 X와 Y 좌표를 동태적으로 변화시킬 수 있다고 느꼈지만 그 외에 나는 기본적으로 추측을 시작하려고 한다.
구글에서'리액트 게임'을 검색해보니 드루 콘리(Drew Conley)가 2016년 리액트 랠리(React Rally)에서 연설하는 것을 보고 그의 팀이 완전히 리액트에서 만든 Danger Crew라는 게임을 이야기했다.나는 Andrew SteinheiserReact RPG도 만났다. 이것은 지하 감옥 기어오르기여서 나는 그것을 놀 때 많은 연구 시간을 낭비했다.
이 게임들은 나에게 내가 원하는 것이 가능하다는 것을 증명해 주었다. 나는 단지 방법을 생각할 뿐이다.

배열 매핑

나는 내가 어떻게 구축하는지 결정하는 것부터 시작한다. 키를 사용하여 캐릭터의 좌표를 동적으로 바꾸어 평면에서 캐릭터를 이동한다.x-y 좌표를 상태에 저장하고 누르는 화살표 키에 따라 변경하는 사용자 정의 갈고리를 만들었습니다.그리고 캐릭터는 브라우저 창에서 자유롭게 이동할 수 있으며 어떠한 구속도 받지 않고 벽과 지도 가장자리의 제한을 받지 않는다. 마치 유령과 같다.너무 좋아요. 그런데 제가 디자인한 게임은 아니에요.
나는 지도의 경계를 효과적으로 저장하는 방법이 필요하다.서로 다른 방은 서로 다른 걷기 가능한 구역이 있기 때문에 간단한 범위 조건으로는 일을 할 수 없다. 결국 나는 어떤 게임판에서 조작을 허용해야 한다.
그래서 아버지께 전화를 드렸습니다. 아버지께서는 개발자였고 저는 아버지로부터 전자 게임에 대한 사랑을 받았습니다.그는 나에게 2차원 그룹을 사용하는 것을 고려해 보라고 건의했다. 이것은 격자를 사용하는 게임의 흔한 해결 방안이다.
각 타일은 하나의 객체에 "걷기"및 "동작"의 부울 값을 저장하는 침실 어레이를 구축했습니다.

const X = { walk: false, action: false,};
const O = { walk: true, action: false,};
const AO = { walk: true, action: true,};
const AX = { walk: false, action: true,};

const BEDROOM_MAP = [ //each elem in the nested array equals a tile on the x-axis
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 0
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 1
    [X, X, X, X, X, X, X, X, X, X, X, X], // y= 2
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 3
    [X, X, AX, AX, X, AO, AO, X, AO, AO, X, X], // y = 4
    [X, X, AO, AO, O, O, O, O, AO, AO, X, X], // y = 5
    [X, X, O, O, O, O, O, O, O, O, X, X], // y = 6
    [X, X, O, O, O, O, O, O, O, O, O, O], // y = 7
    [X, X, X, O, O, O, O, O, O, O, O, O], // y = 8
    [X, X, X, O, O, O, O, O, O, O, X, X], // y = 9
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 10
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 11
]

그림 편집기에서 만든 지도 격자 모형과 비교하면 거의 같습니다.(테스트에서 나는 걷지 못하는 동작 블록이 필요하지만 동작을 허용하는 것을 발견했다):

배열 사용

캐릭터가 나의 새로운 규칙을 준수하도록 함수를 만들었습니다. 이 함수는 현재 좌표와 버튼 이벤트에서 가리키는 방향을 사용합니다.
그리고 현재 x 또는 y (이동하는 방향에 따라) 에서 2 (그녀의 보폭 길이) 를 더하거나 빼면, 이 함수는 그녀의 다음 보폭을 조정한다.

function getNextTile(direction, position) {
    let newPos;
    let X;
    let Y;

    switch (direction) {
        case 'up':
            newPos = position.top - 2
            X = ((position.left + 192) - (position.left % 32)) / 32
            Y = (newPos - (newPos % 32)) / 32
            return MAP_TABLE[Y][X][key];

position의 좌표를 32(내 격자의 픽셀 크기)로 나누어 색인으로 전달MAP_TABLE하면 이 색인은 지도 구역마다 2D 그룹을 저장하고 다음 블록에 저장된'걷기'의 브리 값을 되돌릴 수 있다.이 브리지의 귀환은 이동 캐릭터의 감속기가 작동하는지 여부를 결정하여 그녀를 내 지도에 제한한다.
너는 내가 먼저 현재 위치/32의 나머지 부분을 뺀 다음에 그것을 나누어야 한다는 것을 알게 될 것이다. 이것은 게이머가 한 번에 2px에 들어갈 때 분편의 중간 위치에 있다는 것을 설명한다.

그나저나 내가 왜 X 좌표계산에 192를 추가해야 하는지 알고 싶다면, 오래된 포켓몬스터 게임처럼, CodeCamp Quest는 하나의 뷰포트를 사용하고, 뷰포트 용기 뒤에 전체 지도를 렌더링할 수 있다.플레이어가 위로 올라가거나 아래로 내려갈 때 캐릭터의 정령은 이동하지만, 왼쪽이나 오른쪽으로 갈 때 정령은 멈추고 지도 이미지는 이동한다.192px 렌더링 x축의 뷰포트 컨테이너 중심 역할getNextTile 함수는 이 고정된 위치를 고려해야 한다.