Project
[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_n..
[JS/연습/객체/OOP] Text RPG 구현 -2
메인 페이지화면 구현하기 View(HTML,CSS)구현 See the Pen TextRPG_view(2) by Doge (@DogeIsFree) on CodePen. DOM 객체선언하기 JS로 HTML을 컨트롤 해야하므로 , 필요한 DOM객체들을 선언해주도록 하자. 화면태그 DOM // ScreenTag (view) const $startPage = document.querySelector("#startpage"); const $mainPage= document.querySelector("#mainpage"); 버튼태그DOM //buttonTag const $btn_adventure = document.querySelector(".adventure"); const $btn_rest = document.q..
[JS/연습/객체/OOP] Text RPG 구현하기 -1
캐릭터 생성화면 구현하기 View(HTML,CSS)구현 See the Pen TextRPG by Doge (@DogeIsFree) on CodePen. 캐릭터 생성과정 구현하기 input으로 받은 정보를 닉네임으로 생성한다. 고민해야할 것 Player의 정보를 어떻게 나타낼까 Player의 정보는 "객체"로 나타내보자. {name,level,hp,maxHp,exp,atk} 6개의 정보를 갖고있는 객체이다. 공격하기, heal하기 2가지 method를 가진다. class Player{ constructor(name){ this.name=name; this.level=1; this.maxHp=500; this.hp=500; this.exp=0; this.atk=50; } attack(target){ targ..
[JS/연습/객체/OOP] TextRPG 설계하기
HTML,CSS,JS를 이용해서, 간단한 TextRPG를 구현해볼겁니다. 구현할 기능 떠올리기 -> 순서도(내부로직) -> WireFramming(화면 구성) -> 코드작성 -> 코드 수정의 단계로 해보겠습니다. 구현할 기능(Needs) 입력은 버튼 / input 태그를 통해서 받게 됩니다. 캐릭터 생성 : 캐릭터 닉네임을 받고 , 초기값을 설정해줍니다. 모험하기 : 몬스터와 전투하는 모드입니다. 공격하기, 회복하기, 도망가기 3가지의 분기가 나타납니다. 공격하기 : 몬스터를 공격하고, 몬스터의 공격력만큼 HP가 감소합니다. 선공권은 항상 Player에게 있습니다. 몬스터 처치시, 드롭아이템과 경험치를 획득합니다. 레벨 업시 , 최대 HP와 공격력이 성장합니다. 회복하기 체력을30 회복하고, 몬스터의 공..