JavaScript 입문 : textRPG 만들기 - 클래스 이용하여 기본코드 재구성

이 글은 제로초 TV 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

이제부터는 본격적으로 클래스를 이용하여 textRPG 내역을 재코딩하면서 내용을 업데이트 하도록 하겠습니다. 

 

다시 강조하지만 클래스의 기본은 객체지향프로그램 (Object Oriented Program, OOP)이며 기본 구성으로 생성자 (Constructor)와 부모상속을 하는 (Super)를 기억해야 합니다. 

 

1. 각 클래스별 항목 

 

클래스로 게임을 재구성하기 위해서 클래스를 나타내는 항목을 고민할 필요가 있습니다. 우선 hunter와 animal은 클래스 하나의 항목으로 고민할 수 있습니다. 

 

addEventListener(  )메소드가 있는 지점은 일반메뉴와 사냥메뉴가 작동하는 곳으로 기본적인 활성화만 시켜놓고 다 지우고 갑니다. 

 

 

전체적인 형태로 봤을때 하나의 게임으로 볼 수 있기때문에 class Game으로 전체를 한번에 묶고 지정해주도록 합니다. 

 

2. 구체적 클래스 항목

 

① Game 클래스 기본 구조

 

첫번째는 전체 게임이 진행되는 큰 그림하에 게임구조에 대한 클래스를 만들고 헌터와 동물의 클래스도 별도로 만들어 줍니다. 게임을 시작한다는 것은 생성자의 매개변수에 헌터의 이름을 입력하면서 시작이 되기때문에 생성자의 매개변수는 name으로 지정합니다. 

 

헌터의 이름과 동물의 이름이 어떻게 사용될 지 모르기 때문에 처음은 전부 null로 지정해주고 시작합니다. 

아울러 게임시작을 할 수 있는 메소드를 선언하고 향후 선언된 메소드에 대한 내용을 만들어 줍니다. 

 

 

② 헌터 클래스 기본 구조

 

hunter는 게임에 속하고 또 이름이 필요하기 때문에 두 인자를 매개변수로 받아 생성시킬 수 있습니다. 여기서 this는 Hunter 객체 자신을 나타냅니다. 

 

만일 해당 위치에서 this의 속성을 보고자 한다면 원하는 위치에 콘솔을 찍어보면 알 수 있습니다. 

 

 

 

여기서 this 는 hunter 자체를 가리키겠죠.

 

③ 동물 클래스 기본구조

 

동물 클래스의 기본구조는 생성자를 이용하여 기본전투력을 나타냅니다. 어떤 동물이 나올지는 최초 Game클래스에 게임이 시작할 때 배정을 해 놓았기 때문에 여기서는 기본 능력치를 기준으로 구성합니다. 

 

 

상기 헌터클래스와 동물클래스에서 상호간 공격하는 attack(  ) 메소드를 보면 괄호안 매개변수는 target으로 바꿀 수 있습니다. 

 

3. 생성자 실행 

 

클래스 문법에서는 만들어진 클래스를 실행하기 휘하여 new와 클래스명으로 실행할 수 있습니다. 순서를 보면 Game의 생성자 매개변수는 name이기 때문에 name을 입력할 수 있게 합니다. 

 

① 개임 시작프로그램 

 

 

② 이름을 받은 후 시작함수 start(   )

 

name 매개변수로 게임 시작 함수(this.start(  ))를 선언하고 선언된 start(  )함수에는 일반메뉴와 사냥메뉴를 설정합니다. 

 

 

③ 스크린변화를 한곳에 모으로 일반메뉴와 사냥메뉴를 구체적으로

 

게임이 시작되고 일반메뉴가 되고 사냥메뉴가 되면 새로운 화면이 필요한데 이러한 기능을 한곳에 모을 수 있습니다. 아울러 start(  ) 함수에서 선언했던 일반메뉴와 사냥메뉴를 같이 문맥에 맞게 수정합니다. 

 

모드멸 변하는 기능 한곳에

 

일반메뉴와 사냥메뉴에 대한 코드는 다음과 같습니다. 

 

 

그런데 상기 코드를 보면 화살표 함수에 this를 사용하여 changeScreen을 했습니다.  왜 그렇까요?

 

자바스크립트에서 this는 처음에는 어렵기 때문에 다음과 같이 이해 또는 외우는 것을 추천 드립니다. 

 

▶ 객체내 this는 객체 자신이다. (기본)

▶ addEventListner( )랑 같이 쓰이면 this는 객체 자신이 아닌 연결된 HTML 요소이다. 

    즉, addEventLisrener에 함수형태로 직접쓰면 HTML을 가리키는데 (여기서는 form 태그) 이러한 경우에서 객체 자신을

    가리키는 함수를  만들고자 한다면 화살표 함수로 해 주어야 합니다. 기본적으로 화살표 함수는 속성을 변하지 않게 만들기

    때문입니다. 

 

 

여기까지 무사히 왔다면 클래스로 코딩을 재세팅하는데 기본적인 프레임을 만든것을 확인할 수 있습니다. 이 내용까지의 JS 코드는 다음과 같습니다. 

 

// 객체지향프로그램 (OOP) 활용, 클래스로 재구성 1탄 - 모양갖추기
// 본격적 업그레이드 

const $startScreen = document.querySelector('#start-screen');
const $screen = document.querySelector('#screen');
const $generalMenu = document.querySelector('#general-menu');
const $battleMenu = document.querySelector('#battle-menu');
const $message = document.querySelector('#message');

// Hunter Status 연결
const $hunterStatus = document.querySelector('#hunter-status');
const $hunterName = document.querySelector('#hunter-name');
const $hunterLevel = document.querySelector('#hunter-level');
const $hunterPower = document.querySelector('#hunter-power');
const $hunterUpgrade = document.querySelector('#hunter-upgrade');
const $hunterAttack = document.querySelector('#hunter-attack');

// 사냥감 Status 연결
const $animalStatus = document.querySelector('#animal-status');
const $animalName = document.querySelector('#animal-name');
const $animalLevel = document.querySelector('#animal-level');
const $animalPower = document.querySelector('#animal-power');
const $animalUpgrade = document.querySelector('#animal-upgrade');
const $animalAttack = document.querySelector('#animal-attack');

// 전체 Game에 대한 클래스
class Game {
  constructor(name) { // 이름 매개변수로 생성
    this.animal = null;
    this.hunter = new Hunter(this, name); // new Game(name)으로부터 받아서 
    this.animalList = [
      {name: '사자', power: 30, att: 10, upgrade: 10},
      {name: '호랑이', power: 50, att: 30, upgrade: 50},
      {name: '코끼리', power: 100, att: 50, upgrade: 70},
    ];        
    this.start( );
  }

  start( ) { // 특정 동작을 같이 묶는게 좋다
    $generalMenu.addEventListener('submit', this.onGeneralMenuInput);
    $battleMenu.addEventListener('submit', this.onBattleMenuInput);
    this.changeScreen('general');        
  }

  changeScreen(screen) { // screen 변하는 기능 한곳에
    if (screen === 'start') {
      $startScreen.style.display = 'block';
      $generalMenu.style.display = 'none';
      $battleMenu.style.display = 'none';
    } else if (screen === 'general') {
      $startScreen.style.display = 'none';
      $generalMenu.style.display = 'block';
      $battleMenu.style.display = 'none';
    } else if (screen === 'battle') {
      $startScreen.style.display = 'none';
      $generalMenu.style.display = 'none';
      $battleMenu.style.display = 'block';
    }
  }

  onGeneralMenuInput = (event) => { // start()에서 generalMenu 활성화
    event.preventDefault();
    const general = event.target['general-input'].value; // id가져와서 활성화, value는 text
    if (general === '1') { // 모험
      this.changeScreen('battle');   

    } else if (general === '2') { // 휴식    

    } else if (general === '3') { // 종료  

    }
  };

  onBattleMenuInput = (event) => { // start()에서 battleMenu 활성화
    event.preventDefault();
    const battle = event.target['battle-input'].value; // id가져와서 활성화
    if (battle === '1') { // 공격, 서로 공격
      
    } else if (battle === '2') { // 회복

    } else if (battle === '3') { // 도망

    }
  };
}

class Hunter { // hunter는 game에 속하고 name도 속하는 
  constructor(general, name) {
    this.general = general;
    this.name = name;
    this.level = 1;
    this.maxPower = 100;
    this.power = 100;
    this.upgrade = 0;
    this.att = 10;
  }
  attack(target) {
    target.power -= this.att;
  }  
}

class Animal {
  constructor(general, name, power, att, upgrade) {
    this.general = general;
    this.name = name;
    this.maxPower = power;
    this.power = power;
    this.att = att;
    this.upgrade = upgrade;
  }
  attack(target) { // 헌터 공격
    target.power -= this.att; // 공격 power만큼 헌터파워 감소
  }
}

// 게임 시작 프로그램
let general = null;
// start-screen 활성화 
$startScreen.addEventListener('submit', (event) => {
  event.preventDefault();
  const name = event.target['name-input'].value; // hunter 이름 입력
  general = new Game(name); // 이름 입력받아 새로운 게임 만들기, 생성자 실행조건 new 필요
});