[TIL] 24.10.04 FRI

스테이지에 따라 아이템이 생성

우선 스테이지를 어떻게 가져와야하나 고민했는데, 최초 시작할 때
index.js에서 stage 변수를 선언하고 Score.js에서 stage가 변환될 때마다 바뀐 stage_id를 반환하여 수정하는 방향으로 했다.

createItem(stage) {
    const getStage = itemUnlockAsset.find((asset) => asset.stage_id === stage);
    const index = getStage.item_id;
    const itemInfo = this.itemImages.find((item) => item.id === index);
    const x = this.canvas.width * 1.5;
    const y = this.getRandomNumber(10, this.canvas.height - itemInfo.height);

    const item = new Item(
        this.ctx,
        itemInfo.id,
        x,
        y,
        itemInfo.width,
        itemInfo.height,
        itemInfo.image
    );

    this.items.push(item);
  }

item_Unlock 데이터 테이블을 fetch 해서 가져온 후 스테이지 별 나오는 아이템 목록을 변수에 담아 해당 아이템만 나오도록 구현하였다. 스켈레톤으로 주어진 데이터 테이블은 스테이지별 한개씩으로 되어있는데, 여러개일 경우 랜덤으로 돌리면 될 것 같다.

근데 오류가 발생했다.

console.log(`stage : ${stage}`);
console.log(itemUnlockAsset);
console.log(`getStage : ${getStage}`);
console.log(`index : ${index}`);

이유가 왜그런지 console.log로 한줄 한줄 디버깅을 하던 도중 데이터 테이블에 최초 스테이지가 없는 것을 발견...
데이터 테이블에 아이템 목록이 없을 경우 안띄우는 방향으로 바꾸기 위해서는 if문 하나만 덮어주면 될 것 같다.

  createItem(stage) {
    console.log(`stage : ${stage}`);
    console.log(itemUnlockAsset);
    const getStage = itemUnlockAsset.find((asset) => asset.stage_id === stage);

    // 정해놓은 스테이지 아이템이 있을때만 아이템 생성
    if (getStage) {
      console.log(`getStage : ${getStage}`);
      const index = getStage.item_id;
      console.log(`index : ${index}`);
      const itemInfo = this.itemImages.find((item) => item.id === index);
      const x = this.canvas.width * 1.5;
      const y = this.getRandomNumber(10, this.canvas.height - itemInfo.height);

      const item = new Item(
        this.ctx,
        itemInfo.id,
        x,
        y,
        itemInfo.width,
        itemInfo.height,
        itemInfo.image
      );

      this.items.push(item);
    }
  }

음 원하는대로 잘 나온다..

아이템 획득 시 점수 획득

스켈레톤 코드에 아이템 collideWith 메서드가 부분 구현되어 있다. dino가 아이템 x,y좌표에 닿았을 경우 인식하고 사라지는 정도만 구현이 되어있다.
여기를 활용하여 사라짐과 동시에 데이터 테이블에 따른 점수를 추가시켜주고, 서버에 전송하면 될 것 같다.

• item collideWith
  

• itemController collidewith
  

• index collidewith
  

스켈레톤에서는 index.js에서 gameloop를 돌 때 프레임 단위로 닿았는 지 안 닿았는지 itemController에 메서드를 호출하여 체크하고 itemController는 item에 메서드를 호출하여 체크하고 닿았다면 위치와 크기를 변환시켜 다른 메서드에서 없애도록 하고 itemId를 반환하는 역할을 한다. item에서는 좌표를 측정하여 닿았을 때 여부를 반환한다.

그러면 index.js에서 반환받은 id 토대로 score 메서드를 호출하니 score에서 처리해주면 될 것 같다.

• 스켈레톤 score.js 내 getItem 메서드
  

  getItem(itemId) {
    console.log(itemAsset);
    const eatenItem = itemAsset.find((asset) => asset.id === itemId);
    if (!eatenItem) console.log("Item asset error");
    else {
      this.score += eatenItem.score;
    }
  }

수정을 했을 때 점수는 잘 늘어난다. 다만, 점수가 추가되면서 스테이지 변환이 안된다. 이유는 스테이지 변환 조건이 다음 스테이지 시작 점수와 같을때 실행되기 때문에 크거나 같다로 조건을 변경 해야한다.

문제는, 서버 점수 검증이다. 검증이 아이템을 안먹는 조건으로 시간계산이 되어있기 때문에 아이템을 섭취와 동시에 서버로 해당 내용을 통보해줘야 계산이 가능할 것 같다.

생각했던거보다 시간진행에 있어 오차범위가 심해져서 방안만 5시간을 고민했다..

머리아파서 내일 생각하련다...🤮🤮😰🤮😰