[JS/연습/객체/OOP] TextRPG 설계하기

HTML,CSS,JS를 이용해서, 간단한 TextRPG를 구현해볼겁니다.

구현할 기능 떠올리기 -> 순서도(내부로직) -> WireFramming(화면 구성) -> 코드작성 -> 코드 수정의 단계로 해보겠습니다.

구현할 기능(Needs)

입력은 버튼 / input 태그를 통해서 받게 됩니다.

캐릭터 생성 : 캐릭터 닉네임을 받고 , 초기값을 설정해줍니다.

 

모험하기 : 몬스터와 전투하는 모드입니다. 공격하기, 회복하기, 도망가기 3가지의 분기가 나타납니다.

• 공격하기 : 몬스터를 공격하고, 몬스터의 공격력만큼 HP가 감소합니다. 선공권은 항상 Player에게 있습니다.
  • 몬스터 처치시, 드롭아이템과 경험치를 획득합니다.
  • 레벨 업시 , 최대 HP와 공격력이 성장합니다.
• 회복하기 
  
  • 체력을30 회복하고, 몬스터의 공격력 만큼 HP가 감소합니다. (회복 후, 공격받음)
• 도망가기
  • 몬스터에게서 도망칩니다. (무적권 도망칠수 있게 합시다)

휴식하기 : 최대 HP 만큼 회복합니다. 

 

종료하기 : 캐릭터 생성창으로 돌아갑니다.

순서도 그리기

화면 별로 순서도를 그려보았습니다. 시작화면 , 메인화면 , 배틀화면 3가지 화면으로 구성이 되고,  내부 로직은 순서도에 나타난 것과 같습니다.

 

WireFramming 

3가지 화면에 대해서 설계하는 과정입니다. 간단하게 설계해보겠습니다! 

 

시작화면/메인화면

배틀화면

추가하고 싶은 기능

• 플레이 종료시, 해당 플레이어의 정보를 저장하고 싶습니다. 또, 해당 플레이어의 닉네임이 저장되어 있을 경우, 플레이어의 정보를 그대로 불러오고 싶습니다.
• 캐릭터 생성 과정에서, 이상한 닉네임들은 filtering 하고 싶습니다.
• 캐릭터는 각자 인벤토리를 갖고 있습니다.
• 직업 만들기  

 

 

refer 

제로초님의 Lets Get It 자바스크립트

제로초님의 자동 텍스트 RPG 만들기