• [JS] Text RPG 만들기

    2019. 11. 12.

    by. 나나 (nykim)

     

    zerocho님의 글을 보고 따라 만들어본 Text RPG 스크립트입니다 :>

    이런저런 기능을 쉽게 추가할 수 있을 거라 생각했는데 예상보다 시간이 더 걸림ㅋㅋㅋㅋ

    그래도 게임은 게임인지라 재미있었던 작업이었어요!!

     

    못 넣은 기능도 많고 리팩토링은 하지도 못했지만ㅋㅋㅋㅋ

    (밸런스는 엉망이고 버그는 고이 접어 나빌레라)

    일단 직접 짜봤다는 거에 만족하며 일단락!

     

     

    Codepen 링크

    See the Pen Text RPG (19.11.12) by NY KIM (@nykim_) on CodePen.

     

     

     

     


     

    var makeMonster = function (lv) {
      var lv = lv || 0;
      var newMonster = new Character();
      var random = getRandom(0, (monsterList[lv].length - 1));
      Character.apply(newMonster, monsterList[lv][random]);
      return newMonster;
    }
    
    monster = makeMonster(lv);
    log(`👻 ${monster.name}이(가) 나타났다...!`, "appear");

     

    이번 작업에서 배운 점은 역시 프로토타입 활용하기죠!

    몬스터를 생성할 때 var newMonster = new Character()로 새 객체를 만든 뒤,

    Character.apply(newMonster, ["이름", 레벨, HP..]);로 인자를 넘겼습니다.

    세상에나 이렇게 하니까 너무 편하더라구여!!!

     

    또 메서드로 해놓으니 player.attack()이나 monster.attack()처럼 필요할 때 쇽쇽 호출할 수 있어서 좋았어요.

     

     

    Character.prototype.attack = function (target, type) {
    
      var self = this;
      var isCritical = function () {
        var criRate = 2;
        if (getRandom() <= (self.luk - target.luk) * criRate) {
          return true;
        }
      };
      
      ....
    }

     

    그리고 this 바인딩에 대해서도 복습할 수 있는 기회였습니당 >.<

    함수 내의 this는 호출한 대상에 바인딩된다는 걸 몰랐다면 저기서 '엌 this.luk을 왜 못찾지ㅠㅠ' 이랬을 거에요.....

     

     

     

    그밖에

    - 로그를 찍을 때 setTimeout 말고 효율적인 건 없을까?

    - UI에 hp나 경험치 정보를 업데이트할 때 어떻게 하면 더 효율적으로 삽입할 수 있을까?

    등 좀 더 배우고 싶은 게 많지만

     

    JS랑 더 친해지면 다시 보는 걸로 하고 쎄굿빠 ヾ( ~▽~)ツ

     

     


     

     

    See the Pen Text RPG (19.11.12) by NY KIM (@nykim_) on CodePen.

     

     

    댓글 0