vue-몬스터와의 전투게임 완료

시연영상(쇼츠)

기초적인 설명

몬스터와의 간단한 전투게임.
Attack, SpecialAttack, Heal, Surrender 총 4개의 선택지가 있다.
SpecialAttack은 3턴마다 사용할 수 있으며 Surrender를 제외한 모든 선택지에서 몬스터가 반격한다.
모든 BattleLog는 화면 아래에 구현된다.
전투가 끝나면 승패(혹은 무)를 알리는 메시지가 뜨고 게임을 다시 시작할 수 있다.

---

나름 간단한 게임을 만드는데도 오류를 몇 번 겪었다.

1. 체력이 0이 되어도 게이지가 0으로 바뀌지 않는 문제

 computed: {
    monsterBarStyle() {
      if (this.monsterHealth < 0) {
        return { width: "0%" };
      }
      return { width: this.monsterHealth + "%" };
    },
    playerBarStyle() {
      if (this.playerHealth < 0) {
        return { width: "0%" };
      }
      return { width: this.playerHealth + "%" };
    },

위와 같이 체력이 0보다 작아지면 width 0%를 return 하게 하여 해결

---

2. heal을 했을 때, 체력이 100이 넘어가버리는 문제

healPlayer() {
      this.currentRound++;
      const heal = randomValue(8, 20);
      if (this.playerHealth + heal > 100) {
        this.playerHealth = 100;
      } else {
        this.playerHealth += heal;
      }
      this.addBattleLog("player", "heal", heal);
      this.attackPlayer();
    },

현재 플레이어의 체력 + 힐량 > 100 일시, 플레이어의 체력을 100으로 나타내는 것으로 해결

---

정리

이 게임을 만들면서 많은 것을 복습하게 되었다.
특히 v-if, else 와 v-for 에 대해서 더 자세히 배우는 시간이 되었다.
처음 만들기 전에 생각으로는 엄청 간단하게 만들것 같다고 생각했는데,
생각보다 신경써야할 부분이 많고 버그나 오류같은게 생겼을 때는 너무 당황했다.

깃허브

https://github.com/Aaron-Kim33/learnVue