Java Script 객체지향 텍스트RPG 실습과 기능 추가

오늘은 JavaScript 객체지향 실습을 하기로 했다

실습 소스코드 게시글 : https://www.zerocho.com/category/JavaScript/post/573d876380f0b9102dc370b8  

 

객체지향을 실습해볼 수 있으며, 추가 기능을 통해 JavaScript의 객체지향 프로그래밍을 연습 해 볼 수 있다.

먼저 게시 되어 있는 소스를 직접 작성해보면서 작성자분의 빌드 화면이 나오도록 만들었다.

 

<기존 : 소스코드>

index.html

script.js //첫번쨰 : html file에 text작성 함수와 Character 객체 생성

script.js //두번쨰 : Character를 상속받은 Hero 객체 선언, prototype으로 function 추가.

script.js //세번쨰 : Character를 상속받은 Monster 객체 선언, Monster 랜덤생성 함수, 게임 시작부분

 

 

< 기존 : Build 화면 >

이름을 입력하면 결과가 나온다.

 

그럼 이제부터 기능추가를 해보겠다.

 

 

----------------------------------------------------------------------------------------------------------------

 

< 추가할 기능 목록 >

1. Monster의 아이템 소유 (랜덤하게)

2. 아이템 소유한 Monster를 죽였을 때 Hero가 아이템 Get!

3. Hero가 현재 소유한 아이템의 개수 표시. (console)

4. 아이템 목록:

  - potion : hp 30

  - cake : hp 50

5. 공격하는 몬스터의 att가 내 체력보다 클 경우 죽게 되므로 소유한 아이템 먹기.

 

< 기능 추가한 전체 코드 >

- Hero객체에 itemBox 라는 Hero가 얻는 Item들을 담을 객체를 만들어주었다.

 

 

- Hero가 Monster를 공격했을 때 (attack), 몬스터가 죽게 되면, 아이템 소유 여부를 확인하여 getItem하게 하였다.

 

- Hero가 Monster에게 공격 당했을 때 (attacked), 몬스터의 공격력보다 나의 체력이 조금 남았을 경우엔 소유한 아이템을 사용한다. potion보다 cake의 hp가 더 크기 때문에 cake의 개수가 더 많을 경우나 같을 경우엔 cake을 소비하는 식으로 작성해보았다.

 

 

- Hero가 Item을 얻을 때와 Item을 사용할 때를 각각 함수를 만들었다. 

  두 함수 모두 item을 매개변수로 받는데 이는 몬스터가 소유했었던 item object이며 item.type으로 구분한다.

 

- getItem 에서 numOfPotion과 numOfCake를 1씩 올려주고, item이 한개도 없었을 경우엔 할당해준다.

 

- useItem에선 numOfPotion과 numOfCake를 1씩 감소시키고, 감소시킨 후에 0개가 되면 다시 기본Object로 할당한다.

  또, Hero의 hp가 item이 소유한 hp 만큼 증가되게 하였다.

 

- makeMonster에서 랜덤으로 생성한 몬스터와 아이템 소유 여부가 매개변수로 들어왔다.

  hasItem == true인 경우 아이템생성자를 통해 아이템을 만들어주고 this로서 객체 고유의 것으로 만들었다.

 

 

- Item도 type과 hp라는 정보를 갖는 객체로 만들어 주었다. 

 

- Item은 몬스터가 50:50의 확률로 가질 수도 있고 가지지 못할 수도 있다. 

  makeMonster (몬스터 생성)에서 hasItem이라는 변수를 이용해 생성되는 몬스터의 아이템 소유 여부를 넣어주었다.

 

- makeItem에서는 두가지 타입의 아이템을 생성하여 역시 랜덤한 Item을 리턴해주었다. 아이템 객체의 매개변수가 type과 hp 이므로 배열의 첫번째 index와 두번째 index로 구분하여 생성하였다.

 

-itemBox 는 Hero가 소유한 아이템상자이며, potion, cake를 기본 객체로 초기화 하였다. Hero가 getItem하게 될 경우   potion, cake에 각 Item object가 할당된다.

 numOfPotion과 numOfCake는 소유한 아이템 개수이다.

 

 

- 메인과 같은부분, logMessage 에 <br>을 추가함으로서 가독성을 높였다.

 

 

< 기능 추가 : Build 화면 >

아이템 소유 확인과 획득

 

아이템 사용

 

 

20-01-23, 20-01-28 (2일 진행)