21일차 - Rogue Like JAVASCRIPT! 과제(텍스트 RPG 만들어보기!)

이상민·2024년 8월 23일

TIL

목록 보기

20/50

내가 직접 만들어보는 첫 게임 프로젝트!

물론 전부 다 직접만드는 것이 아닌 큰 틀의 스켈레톤 코드는 지급받고 나서 나는 그저 몇가지 작은 기능만 넣으면 된다😅

내가 넣어야 하는 필수 기능 !

1. 단순 행동 패턴 2가지 구현하기 !

그렇다. 나는 먼저 주인공이 '공격'할 것인지, 아니면 비겁하게 '도망'칠 것인지!

2. 플레이어 클래스에서 플레이어 스탯 (공격력, 체력 등) 관리하기 🕵️‍♂️

3. 간단한 전투 로직 구현⚡

플레이어 공격이나 몬스터 피격과 같은 간단한 전투 로직을 구현해야한다.

4. 스테이지 클리어 시 유저 체력 회복💉

스테이지가 종료되고나면 주인공의 체력이 회복되는 것도 구현해보자

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

점점 스테이지가 올라가면서 몬스터도 강해지게 만들어보자!

필수 기능 공통 가이드🎯

switch 조건문을 사용하여 유저의 각 행동에 대한 로직을 처리해보기

while 반복문을 사용할 때는 종료 조건이 무조건 있어야 해!

스테이지 클리어 및 게임 종료 조건

몬스터와의 전투 종료 조건

Math.random() 메서드를 통해서 랜덤한 숫자를 얻을 수 있다!

플레이어의 공격은 선택에 의해서 이루어지지만, 몬스터의 공격은 자동으로 처리가 된 뒤 해당 플레이어의 로그에 보여지게 된다.

함수의 호출 순서에 따라서 각 변수, 객체들을 관리하는 것이 중요!

깨알 팁🎯

chalk는 노드 환경에서 터미널에 색상과 스타일을 지정하게 해주는 패키지
figlet은 텍스트를 아스키 아트 형식으로 변환해주는 노드 패키지 (텍스트 아트)
readlineSync는 노드 환경에서 콘솔 창에 input을 할 수 있게 해주는 패키지
{startGame}은 game.js에 있는 startGame 함수를 import하는 것이다.
console.log(chalk.색깔(' ')) 형태를 기본 설정
console.log(chalk(figlet( )))을 이용해 아스키 아트로 게임 제목을 보여주도록 설정

먼저 단순 행동 패턴 2가지를 구현해보자!(공격하기,도망하기)

// 플레이어 정보
class Player {
  constructor(hp = 100, mp = 100, damage = 10) {
    this.hp = hp;
    this.damage = damage;
    this.mp = mp; // 체력이아닌 mp라는 마나 포인트도 만들어 보았다.
  }
  attack(monster) {
    // 플레이어의 공격
    let atk = this.damage;
    monster.hp -= atk; // 몬스터의 체력이 플레이어의 공격력 만큼 줄어들게 했다.
    return atk;
  }
    heal() {
    // 플레이어 회복 스킬(마나 소모)
    if (this.mp < 5) {
      return 0; // 마나가 5미만일 경우 회복 불가능
    }
    let healAmount = Math.floor(Math.random() * 16) + 5; // 5 ~ 20 중 랜덤 회복
    this.hp += healAmount;
    this.mp -= 5; // 회복 사용시 마나가 5씩 줄어든다 !
    return healAmount;
  }
    tryToRun() {
    let runChance = Math.floor(Math.random() * 101);
    if (runChance <= 10) {
      // 10% 확률로 도망 가능
      let runsuccess = chalk.blue('플레이어가 도망에 성공했습니다!');
      console.log(runsuccess);
      process.exit(0); // 도망 성공 시 게임 종료로 설정하였다.
    } else {
      let runfail = chalk.red('도망에 실패했습니다.');
      console.log(runfail); // 도망 실패시 실패 했다는 메시지와 함께 몬스터의 공격을 받게 된다.
      return runfail;
    }
  }
  class Monster {
  constructor(hp = 50, damage = 2) {
    this.hp = hp;
    this.damage = damage;
  }

  attack(player) {
    let atk = this.damage;
    player.hp -= atk; // 몬스터가 공격 시 몬스터의 데미지 만큼 플레이어의 체력 감소
    return atk;
  }
}

도망 기능을 어떻게 구현하면 좋을까 생각했는데, Math.random 함수를 이용해서 0~100까지 랜덤 숫자가 나오게 하여 10이하가 나오게하면(10% 확률) 도망에 성공하면 게임이 종료되게 해 보았다. 90%확률로 실패시 몬스터의 공격을 받게 됨 !

플레이어 클래스에서 플레이어 스탯 (공격력, 체력 등) 관리하기

// 스테이터스 창
function displayStatus(stage, player, monster) {
  console.log(chalk.magentaBright(`\n=== 스테이터스 창 ===`));
  console.log(
    chalk.cyanBright(`| Stage: ${stage} `) +
      chalk.blueBright(
        `| 플레이어 HP : ${player.hp}, MP : ${player.mp}, Damage : ${player.damage} `,
      ) +
      chalk.redBright(`| 몬스터 HP : ${monster.hp}, Damage : ${monster.damage} |`),
  );
  console.log(chalk.magentaBright(`=====================\n`));
}