[Node.js_6기 본캠프] CH 2. 개인과제 트러블 슈팅_0826

▶ CH 2. Rogue like JAVASCRIPT! 개인 과제

 

슬슬 개인과제의 끝이 보이고 있다. 이것저것 욕심 부려서 테스트하는 과정에 코드가 누더기가 되고 있는 것 같아서 걱정이다. 가독성을 위해 player와 monster 관련 코드는 파일을 분리하는 방법도 고민해봐야 할 것 같다.

 

 

 

1) 정비를 시작합니다

stage 설정이 도저히 건드려지지 않아서, stage를 클리어해도 player의 hp가 회복되지 않은 상태로 계속 넘어가기를 반복했었다. 다른 방법이 없을까 고민하던 중, battle 관련 while문 뒤에 if문으로 각 stage 사이에 작동하는 코드를 넣으면 어떨까? 라는 생각이 들었다.

코드 수정 전, 회복하지 못하는 player(EVE)

 

테스트 결과, 각 stage 사이에 player가 hp를 회복하고 damage가 증가하는 정비 시간을 만들 수 있었다. 드디어 player가 태초의 hp로 끝까지 버티지 않아도 되는 게임이 된 것이다.

 

player의 hp 회복 및 대미지 증가 처리가 된 모습

 if (player.hp <= 0) {
    gameover();
    handleUserInput2();
  } else if (monster.hp <= 0) {
    console.clear();
    console.log(chalk.magentaBright(`===================================`));
    console.log(chalk.magentaBright.bold(`제 ${stage} 구역의 오염체를 섬멸했습니다.`));
    console.log(chalk.magentaBright(`===================================`));
    console.log(chalk.magentaBright(` `));
    const expUp_1 = player.expUp_min(player);
    const expUp_2 = player.expUp_max(player);
    console.log(
      chalk.magentaBright(
        `[ 전투 데이터 분석 완료 ] 오염체에게 ${expUp_1} ~ ${expUp_2}의 대미지를 입힐 수 있게 되었습니다.`,
      ),
    );
    console.log(chalk.magentaBright(` `));
    const healUp = player.repair(player);
    console.log(
      chalk.magentaBright(
        `[ 수리 완료 ] 제 ${stage} 구역의 시설 부품을 사용하여 ${healUp}의 내구도를 회복했습니다.`,
      ),
    );
    console.log(chalk.magentaBright(` `));
    console.log(chalk.hidden());
    console.log(chalk.magentaBright.bold(`다음 구역으로 이동합니다.`));
    console.log();
  }
};

 

문제는 정비 관련 수치가 보이는 중간 창의 출력이 보이지 않고, 바로 다음 스테이지로 넘어가고 있었다. 이를 해결하기 위해 문법 강의에서 배웠던 Promise, setTimeout을 어떻게 써야 좋을지 자료를 찾아보기 시작했다.

 

 

2) 조금만 쉬었다가 가요

class 만큼이나 익숙하지 않은 문법이기 때문에 Promise, setTimeout 예시를 찾고 적용하는 데에만 몇시간을 쓴 것 같다. 게임이 불필요하게 루즈해지는 로그창인가 싶다가도, 개연성과 플레이어의 게임 진행에 대한 이해도를 위해 포기할 수 없었던 것 같다.

코드 수정 후, stage 사이에 player가 정비하는 시점이 보이기 시작했다.

 

이미 코드가 충분히 긴 상태였기 때문에, 최대한 깔끔한 구조의 코드를 쓰고 싶었다. 그래서 다양한 예시 중 아래와 같은 구조를 사용해보기로 했다. 

function delay(ms = 1000) {
      return new Promise((resolve) => setTimeout(resolve, ms));
    }
    async function delayTest() {}
    console.log('로그 1')
    await delay(2000);
    console.log('로그 2')
    await delay(2000);

 

적용한 코드는 하기와 같다.

 if (player.hp <= 0) {
    gameover();
    handleUserInput2();
  } else if (monster.hp <= 0) {
    console.clear();
    function delay(ms = 1000) {
      return new Promise((resolve) => setTimeout(resolve, ms));
    }
    async function delayTest() {}
    console.log(chalk.magentaBright(`===================================`));
    console.log(chalk.magentaBright.bold(`제 ${stage} 구역의 오염체를 섬멸했습니다.`));
    console.log(chalk.magentaBright(`===================================`));
    console.log(chalk.magentaBright(` `));

    await delay(2000);
    const expUp_1 = player.expUp_min(player);
    const expUp_2 = player.expUp_max(player);
    console.log(
      chalk.magentaBright(
        `[ 전투 데이터 분석 완료 ] 오염체에게 ${expUp_1} ~ ${expUp_2}의 대미지를 입힐 수 있게 되었습니다.`,
      ),
    );
    console.log(chalk.magentaBright(` `));
    await delay(2000);
    const healUp = player.repair(player);
    console.log(
      chalk.magentaBright(
        `[ 수리 완료 ] 제 ${stage} 구역의 시설 부품을 사용하여 ${healUp}의 내구도를 회복했습니다.`,
      ),
    );
    console.log(chalk.magentaBright(` `));
    console.log(chalk.hidden());
    await delay(2000);
    console.log(chalk.magentaBright.bold(`5초 뒤 다음 구역으로 이동합니다.`));
    await delay(5000);
    console.log();
  }
};

 

다행히도 원하는 시간 텀을 두고 로그가 순차적으로 찍히는 stage 중간 창이 완성되었다. 같은 방법으로 각 스테이지의 monster 막타 로그를 표시하고 싶었지만... 실패했다. 이건 어떻게든 stage 관련 코드를 만져야 가능할 것 같다.

 

 

 

3) 욕심은 끝이 없네

expUp_min(player) {
    let battleData_min = Math.floor(Math.random() * (6 - 3 + 1)) + 3;
    player.minPower += battleData_min;
    return (player.minPower += battleData_min);
  }

  expUp_max(player) {
    let battleData_max = Math.floor(Math.random() * (10 - 5 + 1)) + 5;
    player.maxPower += battleData_max;
    return (player.maxPower += battleData_max);
  }

  repair(player) {
    let heal = Math.floor(Math.random() * (50 - 30 + 1)) + 30;
    player.hp += heal;
    return heal;
  }

 

처음에는 damage와 repair 증감 수치에 '+5'와 같이 고정치를 사용했었다. 그런데 이왕 정비창 로그도 완성했는데, 랜덤 함수도 이미 써봤는데, 재미 없게 고정된 수치로 증가하게 둘 수는 없었다. 테스트 결과 랜덤하게 강해지는 player의 status를 확인할 수 있었다. 문제는 이게 몬스터한테는 적용이 안된다는 것이다. stage가 진행될 때마다 monster가 stage값에 영향을 받아 새로 리스폰되기 때문인 것 같은데... stage clear 처리도 그렇고, 내일은 하루종일 stage 관련 코드만 파게 될 것 같다.