캐릭터메신저구현기 - getBoundingClientRect, offsetTop(Left), clientWidth(Height)

캐릭터 이동을 할 때 필요했던 값은

캐릭터의 위치를 계산해

1. 첫위치 값

2. 제한된 구역을 더이상 이동 못하게 할 기준값

두 가지가 필요했다.

 

---

1. clientWidth

 

clientWidth, clientHeight

 

clientWidth와 clientHeight 값은 

배경이 되는 크기가 어느 정도인지 확인이 가능하다. 

 

배경이 되는 값을 먼저 계산한 뒤

캐릭터 크기를 빼면

 

캐릭터가 갈 수 있는 거리를 알 수 있다.

 

예를 들면 다음과 같다.

 

캐릭터는 80 x 80

높이는 300이다

 

 

캐릭터가 최대로 갈 수 있는 높이 거리는

300 - 80 = 220이다. 

 

position: absolute로 하는 경우

부모는 relative로 잡았을 때

top:0, left:0의 좌표는 좌상단이다. 

 

따라서 

위로 갈 수 있는 최대값은 

top: 0

 

아래로 갈 수 있는 최대 값은

top: 220px

 

 

const person = document.querySelector('.person');
person.offsetTop;

 

 

offsetTop은

부모만큼에서 얼마만큼 떨어져있냐의 값이다.

이 값으로 220이 넘는지 체크 후 

이동제한을 할 수 있다.

 

---

2. getBoundingClientRect

 

얘는 부모고 뭐고

viewport 기준으로 잡아준다. 

 

viewport 기준으로 xy좌표 얼마만큼 떨어져있나 확인가능... 

getBoundingClientRect