수리검이 화면을 벗어나면 삭제시키기위해 히어로의 위치를 알기 위해 만들었던 position을 그대로 사용하여 알아내고 if문을 사용하여 화면이 벗어나는데 만드는데 이때 간단하게 수리검의 왼쪽 위치나 오른쪽의 위치가 스크린의 넒이 보다 크다면 수리검을 삭제하게 만드는데 and대신 ||연산자를 사용하여 if문을 짰다.
그리고 공격키를 누르고 있을때 히어로의 모션을 정지 시키기 위해 고칠려고 하니 히어로가 공격을 한번 하면 공격모션이 무한 반복되고 있기에 css에서 히어로의 어택 애니메이션에서 Infinity 속성을 한번만 실행되게 1로 바꾸었다.
이때 Infinity는 무한대를 상징하는 숫자값이다.
다른 애니메이션 기본 움직임이나 다른 움직임은 Infinity를 사용하여 반복시킨다.
그리고 수리검의 방향 전환을 위해 히어로의 위치를 direction으로 구해준다음 수리검클래스로 가서 if문을 사용하여 히어로가 보고 있는 위치라면 distance값에 히어로의 스피드를 더하면 수리검이 맞게 움직인다.
하지만 이때 히어로를 기본 위치가 오른쪽이기에 왼쪽으로 날리면 수리검이 뒤집어져서 날아간다.
이때 수리검에서 setRotate를 사용하여 고치는데 setRotate는 SVGTransform내부의 구성 요소 변환 중 하나에 대한 인터페이스이다.
그리고 180도를 돌리기 위해 180deg를 사용하는데 deg는 도를 나타낸다.
이때 또 다른 문제는 수리검이 나갈때 히어로의 위치를 바꾸면 수리검이 다시 초기화되어 히어로의 위치에서 쌓이게 된다.
이 문제를 해결하기 위해서는 수리검이 나갈때 수리검의 방향을 정하면 된다는 쉬운 방법이 존재한다.
물론 이것도 새로 방향을 선언해줘서 만들어야한다.
이 방법은 굉장히 많이 사용중인데 히어로의 방향을 체크 후 그 방향을 수리검에 넣어준다, 이때도 if문을 사용한다.
그리고 이미지를 불러올때 수리검에서 resize를 사용하면 수리검의 간격이 일정해 진다, 이때 resize는 document view의 크기가 변경될 때 사용된다.
window.onresize 속성(어트리뷰트)을 사용하거나,
window.addEventListener('resize', ...)를 사용하여, 이벤트 핸들러에 resize 이벤트를 등록할 수 있다.
이번에는 배경을 만들기 위해 backgrond에 넣어주는데 가로 값은 background-repeat를 사용하여 반복시켜주고,사이즈는 100%로 잡아주고 auto를 사용하여 화면 높이 기준 배경이 꽉차도록 만들어준다.
background-repeat은 배경을 무한히 반복시켜주는 것이다.
이때 배경 엘리먼트 값의 크기를 임의로 크게 정해주는데 정해준 자식엘리먼트 크기가 부모 엘리먼트 크기 보다 크기에 부모 엘리먼트에 hidden속성을 사용하여 오류가 생기지 않게 해준다.
퍼렐럭스 효과를 적용한다는데 parallax는 시차라는 뜻으로 천문학에서 사용하는 용어이다.
즉 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 현상을 의미한다.
이 현상을 이용하면 입체감, 실체감을 높여서 보다 인상적인 디자인을 할 수 있다.
이 프로젝트를 하면서 내가 사용한 parallax효과는 단순히 pararllaxValue를 만들어 배경이 히어로가 움직이면 배경은 음수 히어로는 양수로 처리하여 배경이 무한히 반복되는 것 처럼 만들었다.
이것을 위배경에도 적용하여 만들면 배경이 완성된다.
