[JS/연습/객체/OOP] Text RPG 구현 -3

배틀 페이지화면 구현하기

View(HTML,CSS구현)

See the Pen Untitled by Doge (@DogeIsFree) on CodePen.

 

 

DOM객체 선언

화면 DOM

const $adventurePage=document.querySelector("#adventurePage");

버튼 DOM

//buttonTag
const $btn_bt_attack = document.querySelector(".ad_attack");
const $btn_bt_heal = document.querySelector(".ad_heal");
const $btn_bt_run = document.querySelector(".ad_run");

Monster DOM

//monsterTag
const $monster_name= document.querySelector(".monsterName");
const $monster_hp = document.querySelector(".monsterHp");
const $monster_Exp = document.querySelector(".monsterExp");
const $monster_Img = document.querySelector(".monsterImg");
const $monster_atk = document.querySelector(".monsteratk");
const $message = document.querySelector(".message");

AttackHandler()

• 배틀을 담당하는 Callback함수입니다.
• 플레이어가 먼저 몬스터를 공격하고, 몬스터가 플레이어를 공격합니다.
• 몬스터 처치 시 LevelUp여부를 처리해야합니다. 몬스터에게 공격당했을 때, 플레이어의 사망을 확인해야합니다.
• 변경된 몬스터의 hp와 player의 hp 모두 화면에 반영해줘야합니다.

  attackHandler= (e)=>{
    e.preventDefault();
    const {player,monster} =this;
    player.attack(monster);
    /*몬스터를 죽였는지 check ,level up 메커니즘 넣고, return*/
    if(monster.hp<=0){
      player.exp +=monster.exp;
      //Level up 처리 => 전투 끝나고 난 뒤에 처리해도 되긴함.
      if(player.exp >=20*player.level){
        player.exp -= 20*player.level;
        player.level +=1;
        player.maxHp *=player.level;
        player.atk *=player.level;
      }
      //console.log(player.exp);
      this.changeScreen("main");
      this.updatePlayerStat();
      return
    }
    monster.attack(player);
    this.showMsg(`${player.atk}의 데미지를 주고,${monster.atk}만큼의 데미지를 받습니다!`);
    /*플레이어가 사망했는지 , check. 사망했다면 , return*/
    if(this.charcterDie(player.hp)){
      return
    }
    this.updatePlayerStat();
    this.updateMonsterStat();
  }

runHandler()

• 도망가기 버튼 클릭 시, 발생하는 이벤트 입니다.

  runHandler = (e) =>{
    e.preventDefault();
    this.changeScreen("main");
  }

healHander()

• 회복하기 버튼 클릭 시 ,발생하는 이벤트 입니다.
• 공격받다가 사망할 수 있습니다. 최대 HP를 넘지 못합니다.

  healHandler = (e) =>{
    e.preventDefault();
    const {monster,player} = this;
    (player.hp +30)>=player.maxHp ? player.hp =player.maxHp:(player.hp +=30);
    monster.attack(player);
    this.showMsg(`30을 회복하고, ${monster.atk}만큼의 데미지를 받습니다!`);
    if(this.charcterDie(player.hp)){
      return
    }
    this.updatePlayerStat();
  }

 

완성코드는 제 Github에 있습니다. "코드"만 있습니다. 이미지는 개발하시는 분이 직접 넣어서 사용해주세요~! 감사합니다

 

GitHub주소

https://github.com/ChoboProgrammer/TextRPG_JS