1차로 4~5일간 만든 Ghost Defense 게임. 누군가에게 보여줄 수 있을 만큼 제대로 완성도 있게 마무리한 게임은 이번이 처음이다. 그만큼 한 번 완성한 것에서 그치지 않고 한 번 더 코드를 뜯어보고, 단순한 기능 구현이 아닌 코드 자체에 대한 고민을 조금 더 깊이있게 하는 시간을 꼭 가지고 싶었다. 💎 Refactoring - point 1. bullet class를 따로 생성해 hero class와 분리하자. hero의 동작으로 인해 bullet이 작동했기 때문에 hero안에 포함시켜놓았는데, hero와 bullet의 상호작용으로 동작이 일어나기 때문에 각각의 클래스를 지니는 것이 더 자연스러울 수 있기 때문 2. ghost class를 활용해 인스턴스를 독립적으로 구성하자. 지금까지는 Ghost class 내부에서 여러개의 ghost를 만들었다. init.js에서 ghost 인스턴스를 만든 뒤 createRandomGhost()를 호출해

innerHeight ghostField안에 ghost가 랜덤으로 생성되고 나면, ghostField를 좌우로 흔들며 아래로 움직여 ghost들을 위에서 아래로 함께 내려가는 것처럼 보이도록 만들었다. 이 때 모든 ghost가 hero를 지나가 화면 밖으로 이동하고 나면, 이동을 끝내고 해당 라운드의 게임을 멈춰야 한다. 이전에는 임시로 화면 밖으로 가도록 800이라는 숫자를 주었다. transition이 끝날때마다 getBoundingClientRect.top()을 이용해 ghostField의 현재위치를 받아오고, 800보다 커지면 ghostField를 translate으로 움직이고 있던 setInterval함수를 clearInterval로 중단시켰다. 그러나 게임을 하는 사용자의 브라우저 창의 크기를 알 수 없기 때문에, 어떤 사람은 ghost가 모두 지나간 뒤 한참 후에야 다음 게임으로 넘어간다고 느낄 수도 있고, 어떤 사람은 ghost가 모두 지나가기도 전에 다음