JavaScript 입문 : textRPG 만들기 - this를 이용하여 사냥메뉴 만들기

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

지난시간까지 전체 RPG의 기본프레임 즉, 게임이 동작할 수 있는 구조를 미리 구성 하였습니다. 오늘은 자바스크립트의 중요한 요소인 this를 이용하여 사냥메뉴에서 상호간 공격하는 롤플레이 형태의 코딩을 공부해 보고자 합니다. 

 

this를 알아야하는 이유중 하나는 this를 이용하여 향후 지금과 같은 형태의 코딩에서 중요항목별 묶는 클래스 기능을 사용할 때 아주 유용하게 사용할 수 있습니다. 

 

1. this (자바스크립트)

 

자바스크립트에서 this는 다음과 같이 우선 기억해 두면 편합니다. 

 

" 자바스크립트 객체안에 this는 객체 자기 자신을 가리키며, 객체.메소드(  ) 형태가 되어야 this가 객체 자신을 카리킵니다. "

 

사실 이러한 정의는 글로 읽기만 한다면 알 수가 없습니다. 기초적인 내용을 정리한 ths를 아래 링크시키도록 하겠습니다. 

 

2022.09.02 - [컴퓨터 알아가기/JavaScript] - JavaSCript 입문 : 자바스크립트에서 this는 무엇인가? - 1\

JavaSCript 입문 : 자바스크립트에서 this는 무엇인가? - 1

 

2. this를 이용한 사냥메뉴 코딩

 

게임의 중요 움직임은 헌터와 동물의 대결입니다. 따라서 헌터 객체내에서 공격하고 동물로 부터 힘을 뺏어오는 함수를 정의합니다. 역시 동물도 헌터를 공격할 수 있는 함수를 객체내에  배정함으로 상호간 공격이 가능하도록 만듭니다. 

 

① 헌터 객체 내용 추가 : attack(animal) 함수 만들기 

 

지금까지의 헌터는 기본적인 최초 공격수치만 기록이 되어 있습니다. 이 곳에 헌터가 동물을 공격하는 함수를 만듭니다.

 

 

②  사냥메뉴 중 상호간 공격 

 

이제는 헌터와 동물이 상호간 공격하는 함수를 지정하였기 때문에 사냥메뉴에서 본격적으로 공격 항목을 코딩할 수 있습니다. 여기서는 각각 최대 체력을 표시해 주고 상호간 공격을 하면서 얼마만큼 데미지를 주고 받았는지 표시를 하면 이해하기가 쉬울 듯 합니다. 

 

 

브라우저로 사냥모드에서 실행하면 다음과 같이 작동은 됩니다.

 

 

※ 고려할 점

 

그런데 앞으로 게임을 더 진행시키고 코드가 복잡해지면서 코드 사이를 서로 빈번하게 왔다갔다 하는 현상이 벌어집니다. 그동안 기본적인 코드 규칙은 위에서 아래로 순서대로 맞추어 줘야 하는데 항목별로 에러가 나지 않으면서 코드를 작성할 필요가 있습니다. 

 

이러한 문제들을 해결하기 위하여 좀 더 정확히 말하면 이해하기 쉽고 순서와 상관없이 하나의 항목으로 묶어서 코드를 진행할 수 있게 하기 위하여 2015년 이후 자바스크립트에서는 신문법이 개발이 되었습니다. 

 

이렇게 처리할 수 있게 하는 방법을 클래스라고 합니다. 

 

어떻게 다른지 클래스 방식을 사용하여 현재까지 만든 코드를 재구성 하도록 하겠습니다.