[ JavaScript ] 클래스 다루기_텍스트 RPG_3 ( 강좌 참고 )

📌 전투 결과 구현하기

공격을 누르면 서로 공격하게 해서, 둘 중에 먼저 체력이 0이 되는 쪽이 나오면 승부가 가려진다.

주인공의 체력이 0이 되면 게임 오버 / 몬스터의 체력이 0이 되면 주인공은 경험치를 얻는다.

경험치가 주인공 레벨 x 15 보다 높으면 주인공을 레벨업을 한다.

레벨업을 하면 주인공은 체력을 모두 회복하고, 최대 체력과 공격력이 5씩 증가한다.

    <script>
         const $startScreen = document.querySelector('#start-screen');
        const $gameMenu = document.querySelector('#game-menu');
        const $battleMenu = document.querySelector('#battle-menu');
        const $heroName = document.querySelector('#hero-name');
        const $heroLevel = document.querySelector('#hero-level');
        const $heroHp = document.querySelector('#hero-hp');
        const $heroXp = document.querySelector('#hero-xp');
        const $heroAtt = document.querySelector('#hero-att');
        const $monsterName = document.querySelector('#monster-name');
        const $monsterHp = document.querySelector('#monster-hp');
        const $monsterAtt = document.querySelector('#monster-att');
        const $message = document.querySelector('#message');
 
        //게임 자체 클래스 만들기.
        //Game,Hero,Monster 3개의 클래스 만들고 주인공 이름 입력 받기.
        class Game {
            constructor (name){
                this.monster = null;
                this.hero = null;
                this.monsterList = [
                    {name: '슬라임',hp:25,att:10,xp:10},
                    {name: '스켈레톤',hp:50,att:15,xp:20},
                    {name: '마왕',hp:150,att:35,xp:50},
                ];
                this.start(name);
            }
            start(name){
                $gameMenu.addEventListener('submit',this.onGameMenuInput);
                $battleMenu.addEventListener('submit',this.onBattleMenuInput);
                this.changeScreen('game');
                this.hero = new Hero(this,name);
                this.updateHeroStat();
            }

            changeScreen(screen){
                if(screen === 'start'){
                    $startScreen.start.display = 'block';
                    $gameMenu.style.display = 'none';
                    $battleMenu.style.display = 'none';
                } else if (screen === 'game'){
                    $startScreen.style.display = 'none';
                    $gameMenu.style.display = 'block';
                    $battleMenu.style.display = 'none';
                } else if (screen === 'battle'){
                    $startScreen.style.display = 'none';
                    $gameMenu.style.display = 'none';
                    $battleMenu.style.display = 'block';                    
                }
            }
            onGameMenuInput = (event)=>{
                event.preventDefault();
                const input = event.target['menu-input'].value;
                if(input === '1'){ //모험
                    this.changeScreen('battle');
                    const randomIndex = Math.floor(Math.random()*this.monsterList.length);
                    const randomMonster = this.monsterList[randomIndex];
                    this.monster = new Monster(
                        this,
                        randomMonster.name,
                        randomMonster.hp,
                        randomMonster.att,
                        randomMonster.xp,
                    );
                    this.updateHeroStat();
                    this.showMessage(`몬스터와 마주쳤다. ${this.monster.name}인 것 같다.`);
                } else if (input === '2'){ //휴식

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

                }
            }
            onBattleMenuInput = (event)=>{
                event.preventDefault();
                const input = event.target['battle-input'].value;
                if(input === '1'){ //공격
                    const {hero,monster}=this;
                    hero.attack(monster);
                    monster.attack(hero);
                    if(hero.hp <= 0){
                        this.showMessage(`${hero.lev} 레벨에서 전사. 새 주인공을 생성하세요.`);
                        this.quit();
                    } else if(monster.hp <= 0){
                        this.showMessage(`몬스터를 잡아 ${monster.xp} 경험치를 얻었다.`);
                        hero.getXp(monster.xp);
                        this.monster = null;
                        this.changeScreen('game');
                    }else{
                        this.showMessage(`${hero.att}의 데미지를 주고,${monster.att}의 데미지를 받았다.`);
                    }
                    this.updateHeroStat();
                    this.updateMonsterStat();
                } else if (input === '2'){ //회복

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

                }
            }
            updateHeroStat(){
                const {hero} = this;
                if (hero === null){
                    $heroName.textContent='';
                    $heroLevel.textContent='';
                    $heroHp.textContent='';
                    $heroXp.textContent='';
                    $heroAtt.textContent='';
                    return;
                }
                $heroName.textContent=hero.name;
                $heroLevel.textContent=`${hero.lev}lev`;
                $heroHp.textContent=`HP: ${hero.hp}/${hero.maxHp}`;
                $heroXp.textContent=`XP: ${hero.xp}/${15*hero.lev}`;
                $heroAtt.textContent=`ATT: ${hero.att}`;
            }
            updateMonsterStat(){
                const {monster} = this;
                if (monster === null){
                    $monsterName.textContent='';
                    $monsterHp.textContent='';
                    $monsterAtt.textContent='';
                    return;
                }
                $monsterName.textContent=monster.name;
                $monsterHp.textContent=`HP: ${monster.hp}/${monster.maxHp}`;
                $monsterAtt.textContent=`ATT: ${monster.att}`;
            }            
            showMessage(text){
                $message.textContent=text;
            }
            quit(){
                this.hero = null;
                this.monster = null;
                this.updateHeroStat();
                this.updateMonsterStat();
                $gameMenu.removeEventListener('submit',this.onGameMenuInput);
                $battleMenu.removeEventListener('submit',this.onBattleMenuInput);
                this.changeScreen('start');
                game=null;
            }
        };//class game
        
        //객체 리터럴로 주인공 만들기.
        class Hero{
            constructor(game,name){
                this.game = game;
                this.name = name;
                this.lev = 1;
                this.maxHp = 100;
                this.hp = 100;
                this.xp = 0;
                this.att =10;
            }
            //객체의 메서드에서는 function 예약어 생략가능.ex) attack : function(monster)
            attack(target){ //몬스터 공격.
                target.hp -= this.att;
            }
            heal(monster){ //체력 회복.
                this.hp += 20;
                this.hp -= monster.att;
            }
            getXp(xp){
                this.xp += xp;
                if(this.xp >= this.lev * 15){ //경험치를 다 채우면
                    this.xp -= this.lev * 15;
                    this.lev += 1;
                    this.maxHp += 5;
                    this.att += 5;
                    this.hp = this.maxHp;
                    this.game.showMessage(`레벨업! 레벨 ${this.lev}`);
                }
            }
        }//class hero
 
        class Monster{
            constructor(game,name,hp,att,xp){
                this.game = game;
                this.name = name;
                this.maxHp = hp;
                this.hp = hp;
                this.xp = xp;
                this.att = att;
            }
            attack(target){
                target.hp -= this.att;
            }
        }//class monster
 
        let game = null;
        $startScreen.addEventListener('submit',(event)=>{
            event.preventDefault();
            const name = event.target['name-input'].value;
            game = new Game(name);
        });
    </script>
    
    <!--코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍-->

레벨업을 한 모습

---

그런데 Hero / Monster 클래스에 공통되는 부분이 있다.

이름, 체력, 공격력, 경험치 같은 공통 속성이 있고, attack 같은 공통 메서드가 있다.

이런 중복을 제거하면 좋을 것 같다.

✨ 클래스의 상속

여기서 클래스의 상속이라는 개념이 등장한다.

Hero 와 Monster 클래스에서 공통되는 부분만 추려 새로운 클래스로 만들고, Hero 와 Monster 클래스는 이 클래스를 가져와 사용할 수 있다.

이를 상속받는다고 한다.

 

공통 클래스인 Unit을 만들어 보자.

        //공통 클래스 만들기 (Hero & Monster)
        class Unit {
            constructor(game,name,hp,att,xp){
                this.game = game;
                this.name = name;
                this.maxHp = hp;
                this.hp = hp;
                this.xp = xp;
                this.att = att;
            }
            attack(target){
                target.hp -= this.att;
            }
        }//class unit
        
        //코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍

다른 클래스에서 공통 클래스인 Unit을 extends 예약어로 상속받을 수 있다.

        //객체 리터럴로 주인공 만들기.
        class Hero extends Unit{ //공통 클래스 상속받기.
            constructor(game,name){
                super(game,name,100,10,0) //부모 클래스의 생성자 호출.
                this.lev = 1; //그 외 속성.
                // this.game = game;
                // this.name = name;
                // this.maxHp = 100;
                // this.hp = 100;
                // this.xp = 0;
                // this.att =10;
            }
            //객체의 메서드에서는 function 예약어 생략가능.ex) attack : function(monster)
            attack(target){ //몬스터 공격.
                super.attack(target); //부모 클래스의 attack.
                //부모 클래스의 attack 외의 동작.
                //target.hp -= this.att;
            }
            heal(monster){ //체력 회복.
                this.hp += 20;
                this.hp -= monster.att;
            }
            getXp(xp){
                this.xp += xp;
                if(this.xp >= this.lev * 15){ //경험치를 다 채우면
                    this.xp -= this.lev * 15;
                    this.lev += 1;
                    this.maxHp += 5;
                    this.att += 5;
                    this.hp = this.maxHp;
                    this.game.showMessage(`레벨업! 레벨 ${this.lev}`);
                }
            }
        }//class hero
 
        class Monster extends Unit{ //공통 클래스 상속받기.
            constructor(game,name,hp,att,xp){
                super(game,name,hp,att,xp); //부모 클래스의 생성자 호출.
                // this.game = game;
                // this.name = name;
                // this.maxHp = hp;
                // this.hp = hp;
                // this.xp = xp;
                // this.att = att;
            }
            //attack 메서드를 생성하지 않은 경우, 부모 클래스에 attack 메서드가 존재한다면
            //부모 클래스의 attack 메서드를 대신 호출한다.
            //Hero의 attack 메서드 또한 생략해도 된다.
            // attack(target){
            //     target.hp -= this.att;
            // }
        }//class monster
        
        //코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍

Hero 와 Monster 의 constructor 메서드를 보자.

둘 다 super 이라는 함수를 호출하고 있다. super 함수는 부모 클래스 ( Unit ) 을 의미한다.

즉, 부모 클래스의 생성자에 인수를 전달하는 것이다.

 

부모 클래스에서 game, name, maxHp, hp, xp, att 속성을 this 에 입력한다.

Hero의 lev속성은 부모 클래스에는 존재하지 않는 속성이다. 따라서 lev속성은 super 아래에 따로 적는다.

즉, 공통 속성을 super 로 처리한 것이다.

 

Hero의 attack 메서드를 보자.

super.attack 을 호출하는데, 이것은 부모 클래스의 attack 메서드를 호출하는 것과 같다.

메서드 내부에서 super.attack 을 호출할 뒤 다른 코드를 작성하면 부모 클래스의 메서드를 호출한 후 자신만의 다른 작업을 할 수 있다.

만약!

super.attack 을 호출하지 않고 다른 코드를 작성하면 부모 클래스와는 다른 작업을 할 수 있다.

 

Monster 처럼 attack 메서드를 생성하지 않은 경우에 부모 클래스에 attack 메서드가 존재한다면?

부모클래스의 attack 메서드를 대신 호출한다.

이렇기 때문에 사실,

Hero의 attack 메서드 또한 부모 클래스의 attack 메서드를 호출하는 것 외에는 다른 작업을 하지 않으므로 생략해도 된다.

class A extends B {
	method() {
    	super.method(); //메서드 내에서 부모의 메서드만 호출하므로 생략 가능
    }
}

//코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍

---

📌 나머지 기능 구현하기

일반 메뉴 : 휴식, 종료 기능 / 전투 메뉴 : 회복, 도망 기능을 구현하면 된다.

 

휴식 기능	주인공의 체력을 최대로 회복하는 기능.
종료 기능	게임을 종료하고 주인공을 새로 생성하는 화면으로 되돌린다.
회복 기능	전투 중에 체력을 20 회복하는 기능. 다만, 회복 후에 몬스터에게 한번 공격을 당한다. / 체력은 최대 체력(maxHp) 값을 넘을 수 없다.
도망 기능	일반 메뉴로 되돌아간다.

 

🤍 휴식과 종료 기능 만들기

        class Game {
			...
            onGameMenuInput = (event)=>{
                event.preventDefault();
                const input = event.target['menu-input'].value;
                if(input === '1'){ //모험
                    this.changeScreen('battle');
                    const randomIndex = Math.floor(Math.random()*this.monsterList.length);
                    const randomMonster = this.monsterList[randomIndex];
                    this.monster = new Monster(
                        this,
                        randomMonster.name,
                        randomMonster.hp,
                        randomMonster.att,
                        randomMonster.xp,
                    );
                    this.updateHeroStat();
                    this.showMessage(`몬스터와 마주쳤다. ${this.monster.name}인 것 같다.`);
                } else if (input === '2'){ //휴식
                    this.hero.hp = this.hero.maxHp;
                    this.updateHeroStat();
                    this.showMessage('충분한 휴식을 취했다.');
                } else if (input === '3'){ //종료
                    this.showMessage('');
                    this.quit();
                }
            }
            ...
          }
          
          //코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍

🤍 회복과 도망기능 만들기

        class Game {
			...
            onBattleMenuInput = (event)=>{
                event.preventDefault();
                const input = event.target['battle-input'].value;
                if(input === '1'){ //공격
                    const {hero,monster}=this;
                    hero.attack(monster);
                    monster.attack(hero);
                    if(hero.hp <= 0){
                        this.showMessage(`${hero.lev} 레벨에서 전사. 새 주인공을 생성하세요.`);
                        this.quit();
                    } else if(monster.hp <= 0){
                        this.showMessage(`몬스터를 잡아 ${monster.xp} 경험치를 얻었다.`);
                        hero.getXp(monster.xp);
                        this.monster = null;
                        this.changeScreen('game');
                    }else{
                        this.showMessage(`${hero.att}의 데미지를 주고,${monster.att}의 데미지를 받았다.`);
                    }
                    this.updateHeroStat();
                    this.updateMonsterStat();
                } else if (input === '2'){ //회복
                    const{hero,monster} = this;
                    hero.hp = Math.min(hero.maxHp,hero.hp + 20);
                    monster.attack(hero);
                    this.showMessage('체력을 조금 회복했다.');
                    this.updateHeroStat();
                } else if (input === '3'){ //도망
                    this.changeScreen('game');
                    this.showMessage('부리나케 도망쳤다.');
                    this.monster = null;
                    this.updateMonsterStat();
                }
            }
            ...
          }
          
          //코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍

회복기능

도망기능

휴식기능

종료기능 ( 아무것도 없음 )

---

📌 전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 RPG</title>
</head>
<body>
    <form id="start-screen">
        <input id="name-input" placeholder="주인공 이름을 입력하세요">
        <button id="start">시작</button>
    </form>
    <div id="screen">
        <div id="hero-stat">
            <span id="hero-name"></span>
            <span id="hero-level"></span>
            <span id="hero-hp"></span>
            <span id="hero-xp"></span>
            <span id="hero-att"></span>
        </div>
        <form id="game-menu" style="display: none;">  
            <div id="menu-1">1.모험</div>
            <div id="menu-2">2.휴식</div>
            <div id="menu-3">3.종료</div>
            <input id="menu-input">
            <button id="menu-button">입력</button>
        </form>  
        <form id="battle-menu" style="display: none;">  
            <div id="battle-1">1.공격</div>
            <div id="battle-2">2.회복</div>
            <div id="battle-3">3.도망</div>
            <input id="battle-input">
            <button id="battle-button">입력</button>
        </form>
        <div id="message"></div>
        <div id="monster-stat">
            <span id="monster-name"></span>
            <span id="monster-hp"></span>
            <span id="monster-att"></span>
        </div>
    </div>
    <script>
        const $startScreen = document.querySelector('#start-screen');
        const $gameMenu = document.querySelector('#game-menu');
        const $battleMenu = document.querySelector('#battle-menu');
        const $heroName = document.querySelector('#hero-name');
        const $heroLevel = document.querySelector('#hero-level');
        const $heroHp = document.querySelector('#hero-hp');
        const $heroXp = document.querySelector('#hero-xp');
        const $heroAtt = document.querySelector('#hero-att');
        const $monsterName = document.querySelector('#monster-name');
        const $monsterHp = document.querySelector('#monster-hp');
        const $monsterAtt = document.querySelector('#monster-att');
        const $message = document.querySelector('#message');
 
        //게임 자체 클래스 만들기.
        //Game,Hero,Monster 3개의 클래스 만들고 주인공 이름 입력 받기.
        class Game {
            constructor (name){
                this.monster = null;
                this.hero = null;
                this.monsterList = [
                    {name: '슬라임',hp:25,att:10,xp:10},
                    {name: '스켈레톤',hp:50,att:15,xp:20},
                    {name: '마왕',hp:150,att:35,xp:50},
                ];
                this.start(name);
            }
            start(name){
                $gameMenu.addEventListener('submit',this.onGameMenuInput);
                $battleMenu.addEventListener('submit',this.onBattleMenuInput);
                this.changeScreen('game');
                this.hero = new Hero(this,name);
                this.updateHeroStat();
            }

            changeScreen(screen){
                if(screen === 'start'){
                    $startScreen.start.display = 'block';
                    $gameMenu.style.display = 'none';
                    $battleMenu.style.display = 'none';
                } else if (screen === 'game'){
                    $startScreen.style.display = 'none';
                    $gameMenu.style.display = 'block';
                    $battleMenu.style.display = 'none';
                } else if (screen === 'battle'){
                    $startScreen.style.display = 'none';
                    $gameMenu.style.display = 'none';
                    $battleMenu.style.display = 'block';                    
                }
            }
            onGameMenuInput = (event)=>{
                event.preventDefault();
                const input = event.target['menu-input'].value;
                if(input === '1'){ //모험
                    this.changeScreen('battle');
                    const randomIndex = Math.floor(Math.random()*this.monsterList.length);
                    const randomMonster = this.monsterList[randomIndex];
                    this.monster = new Monster(
                        this,
                        randomMonster.name,
                        randomMonster.hp,
                        randomMonster.att,
                        randomMonster.xp,
                    );
                    this.updateHeroStat();
                    this.showMessage(`몬스터와 마주쳤다. ${this.monster.name}인 것 같다.`);
                } else if (input === '2'){ //휴식
                    this.hero.hp = this.hero.maxHp;
                    this.updateHeroStat();
                    this.showMessage('충분한 휴식을 취했다.');
                } else if (input === '3'){ //종료
                    this.showMessage('');
                    this.quit();
                }
            }
            onBattleMenuInput = (event)=>{
                event.preventDefault();
                const input = event.target['battle-input'].value;
                if(input === '1'){ //공격
                    const {hero,monster}=this;
                    hero.attack(monster);
                    monster.attack(hero);
                    if(hero.hp <= 0){
                        this.showMessage(`${hero.lev} 레벨에서 전사. 새 주인공을 생성하세요.`);
                        this.quit();
                    } else if(monster.hp <= 0){
                        this.showMessage(`몬스터를 잡아 ${monster.xp} 경험치를 얻었다.`);
                        hero.getXp(monster.xp);
                        this.monster = null;
                        this.changeScreen('game');
                    }else{
                        this.showMessage(`${hero.att}의 데미지를 주고,${monster.att}의 데미지를 받았다.`);
                    }
                    this.updateHeroStat();
                    this.updateMonsterStat();
                } else if (input === '2'){ //회복
                    const{hero,monster} = this;
                    hero.hp = Math.min(hero.maxHp,hero.hp + 20);
                    monster.attack(hero);
                    this.showMessage('체력을 조금 회복했다.');
                    this.updateHeroStat();
                } else if (input === '3'){ //도망
                    this.changeScreen('game');
                    this.showMessage('부리나케 도망쳤다.');
                    this.monster = null;
                    this.updateMonsterStat();
                }
            }
            updateHeroStat(){
                const {hero} = this;
                if (hero === null){
                    $heroName.textContent='';
                    $heroLevel.textContent='';
                    $heroHp.textContent='';
                    $heroXp.textContent='';
                    $heroAtt.textContent='';
                    return;
                }
                $heroName.textContent=hero.name;
                $heroLevel.textContent=`${hero.lev}lev`;
                $heroHp.textContent=`HP: ${hero.hp}/${hero.maxHp}`;
                $heroXp.textContent=`XP: ${hero.xp}/${15*hero.lev}`;
                $heroAtt.textContent=`ATT: ${hero.att}`;
            }
            updateMonsterStat(){
                const {monster} = this;
                if (monster === null){
                    $monsterName.textContent='';
                    $monsterHp.textContent='';
                    $monsterAtt.textContent='';
                    return;
                }
                $monsterName.textContent=monster.name;
                $monsterHp.textContent=`HP: ${monster.hp}/${monster.maxHp}`;
                $monsterAtt.textContent=`ATT: ${monster.att}`;
            }            
            showMessage(text){
                $message.textContent=text;
            }
            quit(){
                this.hero = null;
                this.monster = null;
                this.updateHeroStat();
                this.updateMonsterStat();
                $gameMenu.removeEventListener('submit',this.onGameMenuInput);
                $battleMenu.removeEventListener('submit',this.onBattleMenuInput);
                this.changeScreen('start');
                game=null;
            }
        };//class game

        //공통 클래스 만들기 (Hero & Monster)
        class Unit {
            constructor(game,name,hp,att,xp){
                this.game = game;
                this.name = name;
                this.maxHp = hp;
                this.hp = hp;
                this.xp = xp;
                this.att = att;
            }
            attack(target){
                target.hp -= this.att;
            }
        }//class unit

        //객체 리터럴로 주인공 만들기.
        class Hero extends Unit{ //공통 클래스 상속받기.
            constructor(game,name){
                super(game,name,100,10,0) //부모 클래스의 생성자 호출.
                this.lev = 1; //그 외 속성.
                // this.game = game;
                // this.name = name;
                // this.maxHp = 100;
                // this.hp = 100;
                // this.xp = 0;
                // this.att =10;
            }
            //객체의 메서드에서는 function 예약어 생략가능.ex) attack : function(monster)
            attack(target){ //몬스터 공격.
                super.attack(target); //부모 클래스의 attack.
                //부모 클래스의 attack 외의 동작.
                //target.hp -= this.att;
            }
            heal(monster){ //체력 회복.
                this.hp += 20;
                this.hp -= monster.att;
            }
            getXp(xp){
                this.xp += xp;
                if(this.xp >= this.lev * 15){ //경험치를 다 채우면
                    this.xp -= this.lev * 15;
                    this.lev += 1;
                    this.maxHp += 5;
                    this.att += 5;
                    this.hp = this.maxHp;
                    this.game.showMessage(`레벨업! 레벨 ${this.lev}`);
                }
            }
        }//class hero
 
        class Monster extends Unit{ //공통 클래스 상속받기.
            constructor(game,name,hp,att,xp){
                super(game,name,hp,att,xp); //부모 클래스의 생성자 호출.
                // this.game = game;
                // this.name = name;
                // this.maxHp = hp;
                // this.hp = hp;
                // this.xp = xp;
                // this.att = att;
            }
            //attack 메서드를 생성하지 않은 경우, 부모 클래스에 attack 메서드가 존재한다면
            //부모 클래스의 attack 메서드를 대신 호출한다.
            //Hero의 attack 메서드 또한 생략해도 된다.
            // attack(target){
            //     target.hp -= this.att;
            // }
        }//class monster
 
        let game = null;
        $startScreen.addEventListener('submit',(event)=>{
            event.preventDefault();
            const name = event.target['name-input'].value;
            game = new Game(name);
        });
    </script>
</body>
</html>

<!--코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍-->

---

-(도서) Let's Get IT 자바스크립트 프로그래밍

https://thebook.io/

Let's Get IT 자바스크립트 프로그래밍

-(강좌) 렛츠기릿 자바스크립트

https://www.inflearn.com/

[무료] [리뉴얼] 렛츠기릿 자바스크립트 - 인프런 | 강의