Dino-Game 트러블 슈팅

구글 Chrome 브라우저 기반 웹 게임인 Dino-game 의 기능을 구현하는 과제를 부여받았다.

• 필수 구현

1. 스테이지 구분
2. 스테이지에 따른 점수 구분
3. 스테이지에 따른 아이템 생성(unlock)
4. 아이템 획득 시 점수 획득
5. 아이템 별 점수 구분

트러블(1)

사실 트러블이 일어난게 한 두개가 아니지만 그 중 하나를 고르자면 아래와 같은 JSON 형식의 데이터들을 클라이언트 코드에서 어떻게 가져올까가 문제였다.서버 코드에서는 현재 Parsing을 하려는 파일의 절대경로와 JSON파일이 있는 디렉토리까지의 상대경로를 가져와 JSON파일의 절대경로를 알아내 Parsing하는 방법을 사용했지만 클라이언트 코드는 그게 불가능 했다.

해결

그렇게 고민하던 중, 주말에 저번 프로젝트를 같이 진행했던 팀원분들과 코드리뷰를 가지는 시간을 가지게되었는데, 우연히 팀원분들에게 아래와 같이 import 구문을 사용하여 JSON 데이터를 ES 모듈로 가져오게끔 한 것이다. 이렇게 하면 클라이언트에서도 쉽게 가져오기 선언으로, 해당 모듈이 JSON으로 파싱되고 가져 올 수 있다는 것을 알게 되었다.

import stages from './assets/stage.json' with { type: 'json' };
import items from './assets/item.json' with { type: 'json' };

트러블(2)

스테이지에 따라 어떻게 아이템 생성을 구성할까 고민되었는데 ‘item.json’ 과 ‘item_unlock.json’ 2가지 데이터 테이블을 활용하면 된다는 발제내용을 보고

{
  "name": "item_unlock",
  "version": "1.0.0",
  "data": [
    { "id":  101, "stage_id": 1001, "item_id": 1 },
    { "id":  201, "stage_id": 1002, "item_id": 2 }
  ]
}

해결

기존 데이터 테이블을 활용하여, 아래와 같이 단순히 데이터 테이블을 채워준뒤

{
  "name": "item_unlock",
  "version": "1.0.0",
  "data": [
    { "id":  100, "stage_id": 1000, "item_id": [1] },
    { "id":  101, "stage_id": 1001, "item_id": [1, 2] },
    { "id":  201, "stage_id": 1002, "item_id": [1, 2] },
    { "id":  301, "stage_id": 1003, "item_id": [1, 2, 3] },
    { "id":  401, "stage_id": 1004, "item_id": [1, 2, 3, 4] },
    { "id":  501, "stage_id": 1005, "item_id": [1, 2, 3, 4, 5] },
    { "id":  601, "stage_id": 1006, "item_id": [1, 2, 3, 4, 5, 6] }
  ]
}

ItemController.js 에서 아래처럼 적용해 주니 스테이지별로 랜덤으로 포켓몬 볼이 등장하였다.

  createItem(stageIndex) {
    // item_unlock.json의 데이터 테이블 item_id
    const itemId = item_unlock.data[stageIndex].item_id;
    // item_id의 index중 첫번째부터 마지막요소 중 하나를 랜덤으로 가져옴
    const index = this.getRandomNumber(0, itemId.length - 1);
    // index의 item_id의 값 할당
    const itemInfo = this.itemImages[itemId[index] - 1];