js에서 css불러오기는 따로 포스팅이 되어있으니 보도록 하자
환경 설정 : 용사가 background안에서 좌, 우로 움직이며 귀신을 잡는 게임이다.
귀신은 용사와 닿았을 때 죽어야 하며, 그냥 바닥으로 내려갔을 때는 그냥 사라진다.
귀신은 x축에서 랜덤으로 내려오며 y축으로는 일직선을 그리며 내려간다.
귀신은 바닥 밑으로 계속 내려가지 않고 배경을 벗어나면 사라진다.
귀신은 이 화면에서 정해진 양 만큼만 생성되며 사라지면 다시 생성될 수 있는 조건이 된다.
용사와 귀신의 다양한 모습에 대해서는 sprite를 사용하여 html에 img를 생성하는 것이 아니라 css에서 background-img: url("")로 생성한 뒤 일정 조건이 되면 다른 class에 background-position: -70px 0;을 준 것을 더해주면서 모습을 바꾸도록한다. sprite의 장점은 이미지가 엄청 많이 넣어줘야 하는 페이지 일 경우 용량이 너무 많아 이미지가 느리게 업로드 된다거나 하는 문제를 줄여준다.
한 개체로 계속 하는 hero의 자바스크립트 파일에서는 함수형으로 진행했고 계속 귀신이 찍혀 나와야 하는 enemy의 자바스크립트에서는 class형 으로 진행하였다.
함수형으로 했을 시,
dom 의 querySelector로 class와 id를 불러왔고 getComputedStyle로 heroImg의 css를 모두 가지고 왔다.
hero를 움직이기 위해 사용자가 키를 누르면 keydown event를 받아서 어떤 키를 누르면 어떤 함수를 실행시킬 지 나누게 했다. 
왼쪽으로 가는 키를 누른다면 10px씩 이동하고 hero의 모습을 바꿔줄 클래스를 추가하고 keyup event를 받아서 가만히 있을 때는 다시 앞모습을 보도록 했다.
오른쪽도 마찬가지!
귀신 class 만들기
class와 setInterval로 계속 찍어내기.
class ghost {
constructor(){
}
makeGhost = () => {
ex.
this.ghost = document.createEelement("div")
this.ghost.classList.add("enemyImg")
}
fallingGhost = () => {
}
}형태로 찍어 냈으며 class 내부에서 const 변수 또는 let 변수 형태로 가면 함수마다 dom 형태로 불러줘야 하지만 class 내에서는 this로 접근할 수 있으니 this를 활용하자.
enemy rain 용사가 귀신잡기(홀짝..)+귀신갯수 관리+ Interval삭제
귀신을 떨어지게 할 때 2px씩 떨어지게 했었다.
용사가 귀신 잡는게 제일 어려웠는데 성혜님과 은미님이 엄청 열심히 설명해주셔서 접근성공!
아무생각없이 귀신이 용사의 범위에 들어가면 귀신의 이미지가 바뀌도록 설정하고 있는데 계속 동작하지 않는 것이다. 세 명의 머리를 모아 원인을 파악하고 있었는데 놀랍게도 2px씩 떨어지게 하고 있었던 거라서 귀신의 top이 495라는 홀수가 되었을 때 라는 조건을 걸면 동작하지 않는 것이었다..........
top이 494일 때 라고 하니 바로 동작했다. ㅜㅜ 이런 홀수 짝수까지 생각하지 못했는데 중요하구나......
귀신 갯수 관리
귀신이 너무 막무가내로 많이 나오는게 보기 싫어서 귀신의 갯수를 관리하고 싶어졌었다.
방법은 아주 간단했다.
맨 위, 즉 enemy.js에 있는 class의 밖에 귀신의 클래스를 불러오는 변수를 하나 만든다.
그리고 constructor에 넣었던 기본 귀신 만들기를 귀신 만드는 함수를 따로 생성해서 그 안에 넣은 뒤 조건을 걸었다.
이렇게 클래스의 length가 10보다 작을 때 귀신이 만들어지는 것을 실행한다고 조건을 걸면 귀신은 9개 이상이 되지 않는다.
오예!
Interval 삭제
인지하지 못했던 문제인데 내 코드에서 div를 지우게 해서 정해진 위치가 되면 귀신이 사라졌었는데 눈에만 안 보일 뿐 console.log로 한 귀신의 top값을 찍어보니 사라진 뒤에도 쭉 내려가고 있었다...
그래서 clearInterval을 사용하기로 했다.
let 과 변수안에 넣으면 다른 함수에서 쓸 수 없기 때문에 this.blabla 형태로 써서 class 내 다른 함수에서도 쓸 수 있게 하자.
이 형태는 마치...영수증과 같다. 환불하려면 이거에 맞는 영수증이 필요한데 이렇게 영수증을 가지고 올 수 있다.
이렇게 다른 함수에서 clearInterval을 쓸 수 있고 객체 각각이 잘 사라진다.
good!
