게임을 만들면서 가장 처음으로 들은 것은 해상도와 fps를 알아보았다.
fps는 초단 그려질 프레임 수를 나타낸것으로 초당 프레임은 for,whilt,setlnterval,requestAnimationFrame문으로 나타낸다.
for문은 반복문으로 사용이 되며 while문은 조건문이 참일때 나타내는 반복문이다.
setlnterval은 지정을 하면 그 지정한 수만큼 주기적으로 실행한다.
마지막으로 requestAnimationFrame은 new data를 이용하여 타이머를 정하고 반복하는 것으로 시작지점과 끝나는 지점을 저장해 반복시키는 것이다.
그 후 스플라이트 이미지를 이용하여 캐릭터들의 기본적인 동작을 구현하는데 여기서는 css애니메이션으로 구현하였다.
맨 처음 알려준 코딩을 사용하면 동작이 첫번째 동작밖에 안나오지만 여기서 keyframe을 사용하여 이미지 이동을 시켜 다른 동작도 나오게 하였다.
-377px만큼 10번 움직이게 하여 큰 이미지로 한번 돌때 0.7초동안 돌게 만들었다.
keyframe은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게한다.
그리고 이런 게임을 만들때 캐릭터들의 위치를 조절하여야 하기 때문에 각 각 스크린의 높이와 캐럭터의 값을 로그로 알아보고 그걸 이용하여 구한다.
게임을 만들면서 캐릭터의 높이와 화면의 높이 등 여러가지를 고려해야되어서 그때 사용되는것이 screenHeight나 Window.innerHeight 등 인터페이스의 창 내부 높이를 픽셀로 나타내는 것 들이 있는 것을 알았다.
객체 초기자를 이용하여 공격할때 나갈 수리검을 만드는데 여기서 객체 초기자는 init를 사용하였다. init에는 딱히 의미가 없다고 한다.
그 후 수리검 클래스의 인스턴스를 생성해서 인스턴스가 생성되었을때 나아가게 만들면 된다.
이 때 init에 parentNode를 사용하여 생성된 수리검을 추가하여 준다.
하지만 이렇게 하여도 수리검은 그냥 화면 바닥에서 생성될뿐이기에 무언가를 더 해야한다.
히어로한테서 수리검을 나가게 하기 위해 getBoundingClientRect를 이용하여 히어로의 위치를 알아볼 수 있지만 offsetWidth와 offsetHeigh 를 이용하여 넓이와 높이 값을 알아낼 수 있다.
이때 Element.getBoundingClientRect은 엘리먼트의 크기와 위치를 알려주는 객체이고 Element.offsetWidth와 Element.offsetHeigh은 엘리먼트의 각 각 높이와 넓이를 알려준다.
