22일차 - Rogue Like JAVASCRIPT! 과제 (필수 기능 구현하기!!)

저번 시간에 이어서 필수 기능을 구현해보자 !

간단한 전투 로직 구현(플레이어 공격, 몬스터 피격)⚡

const battle = async (stage, player, monster) => {
  let logs = [];

  while (player.hp > 0) { // 플레이어의 체력이 0 초과 인 이상 아래 선택지가 계속 출력된다.
    console.clear();
    displayStatus(stage, player, monster);

    logs.forEach((log) => console.log(log));
    // 나는 첫번째 선택지로 공격하기, 두번쨰로 회복하기, 마지막 세번째로 도망치기 선택지를 넣어봤다.
    console.log(chalk.green(`\n1. 공격한다 2. 회복한다(MP 5 소모) 3. 도망친다(10%) `));
    const choice = readlineSync.question('당신의 선택은? ');

    // 플레이어의 선택에 따라 다음 행동 처리
    logs.push(chalk.yellow(`${choice}를 선택하셨습니다.`));

    switch (parseInt(choice)) { // 선택지에 대한 로직을 switch 함수를 통해 출력
      case 1: // 공격
        player.attack(monster);
        logs.push(
          chalk.green(`플레이어가 몬스터를 공격하여 ${player.damage}의 피해를 입혔습니다!`),
          chalk.red(`몬스터가 플레이어를 공격하여 ${monster.damage}의 피해를 입혔습니다!`),
        );
        break;
      case 2: // 회복
        if (player.mp >= 5) {
          let healAmount = player.heal();
          logs.push(
            chalk.green(`플레이어가 ${healAmount}만큼 회복했습니다!`),
            chalk.blue(`플레이어가 5의 마나를 소모해 ${player.mp}의 마나가 남았습니다!`),
            chalk.red(`몬스터가 플레이어를 공격하여 ${monster.damage}의 피해를 입혔습니다!`),
          );
        } else {
          logs.push(
            chalk.red('MP가 부족하여 회복할 수 없습니다!'),
            chalk.red(`몬스터가 플레이어를 공격하여 ${monster.damage}의 피해를 입혔습니다!`), 
          );
        }
        break;
      case 3: // 도망!
        let runMessage = player.tryToRun();
        logs.push(
          runMessage,
          chalk.red(`몬스터가 플레이어를 공격하여 ${monster.damage}의 피해를 입혔습니다!`),
        );// 도망 실패시 피해
        break;
      default:
        console.log('잘못된 선택입니다.');
        break;
         }

    // 몬스터가 살아있다면 계속해서 플레이어 공격
    if (monster.hp > 0) {
      monster.attack(player);
    }
  }

선택지를 고르는 거라 switch 함수와 parseInt 함수를 이용해 1, 2, 3 중에 숫자만 입력해도 그 선택지에 대한 함수가 호출되도록 하였다. 매 선택지에 대해 플레이어의 행동에 대한 메시지가 콘솔창에 출력되도록 push()함수를 사용!!

• (⚔ case 1) 에서는 플레이어가 몬스터에게 공격을 하면 몬스터도 플레이어를 공격하는 로직을 구현하였다.
• (💉case 2)는 회복스킬을 넣어봤는데 5의 마나를 소모하는 데신 5~20까지의 hp 를 랜덤으로 회복할 수 있게 하였다. MP를 모두 소모하면 회복스킬 사용 불가능!
• 마지막으로 (🏃‍♀️case 3) 에서는 10% 확률로 도망 칠 수 있게 하였고 도망 시 게임 종료가 되었고, 90% 확률로 도망 실패 시 몬스터에게 피격을 당하게 하였다

스테이지 클리어 시 유저 체력, 마나 회복+Damage증가🩸

class Player {
  constructor(hp = 100, mp = 100, damage = 10) {
    this.hp = hp;
    this.damage = damage;
    this.mp = mp;
  }
  // 스테이지 클리어 시 스탯 증가
  StageReward() {
    this.hp += 20;
    this.mp += 10;
    this.damage += 4;
  }
  let rewardMessage = async () => { 
  console.clear(); // 증가 능력치 보여주는 동안 잠깐 콘솔창 비우기
  console.log(chalk.yellow('플레이어의 HP + 20 , MP + 10 , Damage + 4 만큼 증가 !'));
  await new Promise((resolve) => setTimeout(resolve, 2000)); // 증가 능력치 2초 동안 표시되게 하기
};

    // 플레이어가 살아있으면 스테이지 클리어
    if (player.hp > 0) {
      player.StageReward(); // 스테이지 클리어 시 플레이어 능력치 증가
      await rewardMessage(); // 능력치 증가치 잠시 표시
      stage++;
    } else {
      break; // 플레이어가 죽으면 게임 종료
    }

스테이지 클리어 시 체력뿐만 아니라 마나와 공격력도 증가시켜 보았다. 매 스테이지 클리어시 다음 스테이지로 너무 빠르게 지나가서 능력치 증가치가 보이지 않아 async, await 함수를 이용해 2초동안 증가 능력치를 표시하고 다음 스테이지로 넘어가게 해보았다.

스테이지의 진행과 비례해서 몬스터의 체력과 공격력 증가 시키기💪

while (stage <= 10) { // 스테이지가 10에 도달할때까지
    console.log(chalk.magentaBright(`\n=== Stage ${stage} ===`));
    const monster = new Monster(stage * 20, 2 * stage); // 스테이지에 따라 몬스터의 체력과 공격력 강해짐
    await battle(stage, player, monster);

    // 플레이어가 살아있으면 스테이지 클리어
    if (player.hp > 0) {
      player.StageReward(); // 스테이지 클리어 시 플레이어 능력치 증가
      await rewardMessage(); // 플레이어 능력치 증가치 잠시 표시
      stage++;
    } else {
      break; // 플레이어가 죽으면 게임 종료
    }
  }

  if (player.hp > 0) {
    console.log(chalk.green('축하띠! 모든 스테이지를 클리어했습니다!'));
  } else {
    console.log(chalk.red('gg 게임 오버!'));
  }
}

스테이지가 올라갈수록 몬스터의 체력은 스테이지마다 곱해 지고, 공격력 또한 기본 2에서 스테이지만큼 곱하게 하여 더 강해지게 해보았다. 마지막으로 10스테이지까지 클리어 기준 플레이어의 체력이 0이상이면 클리어 0이하가 되면 게임 오버가 된다.

후기

도전 기능중에 플레이어 연속 공격하기, 방어하기, 회피하기 등등 여러가지 기능을 더 넣어보고 싶었는데 능력이 부족해서 아직은 무리인거 같다 ㅠㅠ 나중에 기회가 되면 더 기능들을 만들어 보고 싶다.