innerHeight
ghostField안에 ghost가 랜덤으로 생성되고 나면, ghostField를 좌우로 흔들며 아래로 움직여 ghost들을 위에서 아래로 함께 내려가는 것처럼 보이도록 만들었다.
이 때 모든 ghost가 hero를 지나가 화면 밖으로 이동하고 나면, 이동을 끝내고 해당 라운드의 게임을 멈춰야 한다.
이전에는 임시로 화면 밖으로 가도록 800이라는 숫자를 주었다.
transition이 끝날때마다 getBoundingClientRect.top()을 이용해 ghostField의 현재위치를 받아오고, 800보다 커지면 ghostField를 translate으로 움직이고 있던 setInterval함수를 clearInterval로 중단시켰다.
그러나 게임을 하는 사용자의 브라우저 창의 크기를 알 수 없기 때문에,
어떤 사람은 ghost가 모두 지나간 뒤 한참 후에야 다음 게임으로 넘어간다고 느낄 수도 있고,
어떤 사람은 ghost가 모두 지나가기도 전에 다음 게임으로 넘어간다고 느낄 수 있다.
조금 더 유연한 기준을 적용하자.
innerHeight을 사용해 현재 브라우저 창의 가장 아래에 도달하면 다음 게임으로 넘어가도록 만들었다.
cache variables to initialize
..그냥 내가 만든 말이다..
게임을 한 사용자의 경험을 바탕으로 피드백을 받을 때마다 게임의 요소를 빠르게 변경해야 할 때를 생각해보자.
변경할 수 있는 요소는 다음과 같다.
- 랜덤으로 생성되는 ghost의 수
- ghost가 좌우로 움직이는 폭과 속도, 아래로 이동하는 속도
- level이 업그레이드 될 때마다 증가하는 ghost의 수와
- hero의 보폭 (한번 화살표 키를 눌렀을 때 이동하는 거리)
- hero가 쏘는 총알의 사정거리와 속도
- life의 갯수
앞으로 game builder pattern을 사용해 한번 더 리팩토링 하고 싶지만, 다른 공부할 것도 많으니..! 일단은 이 시점에서 마무리 한 뒤 하나의 게임을 구현하는 데 필요한 전체적인 과정을 완료하는데에 집중했다. 시간이 나는대로 한번 도전해봐야겠다.
이것만 해도 갯수가 많은데, 다른 많은 변수들과 함께 섞여있는 상태에서 고려해야 할 점은 게임 재시작 시의 변수 초기화였다.
다음 라운드로 넘어가면서 게임 레벨, ghost의 수와 속도 등은 전역에서 할당값이 증가된 상태인데, play again버튼을 눌러 게임을 재시작하면 이 변수들을 처음에 설정했던 값으로 다시 되돌려주어야 한다.
문제는!
내가 원하는 건 처음에 필요한 변수의 값을 지정해주고 수정을 편하게 할 수 있는 것인데, handleNextGame()과 handleLevelUp()등 다음 라운드로 넘어갈 때 변수값을 증가시키는 함수를 찾고... 무슨 변수가 바뀌었는지 보고... restartGame()에서 변경한 초기값을 똑같이 할당하도록 또 코드를 수정해주고... 할 수는 없었다.
하나의 변수를 또 만들었다.
네이밍은 -Cache로 했다.
예를 들어보자.
export class ghost{
constructor() {
this.speed = 50;ghost class에서 ghost가 움직이는 속도를 50으로 지정해주었다.
게임이 다음 라운드로 넘어가면서 ghost는 점점더 빠르게 움직여야 하기 때문에 speed는 변화한다.
게임이 끝나고 나서 speed는 마지막 라운드에서 할당한 20이라는 값이 할당되어있다. 다시 처음부터 게임을 시작할 때는 초기값을 다시 할당해주어야 한다.
function restartGame() {
ghost.speed = 50;이렇게 코드를 작성하면, 나중에 처음부터 ghost가 너무 빠른 것 같다. 1라운드 부터 조금 더 느리게 움직이도로고 하자! 라고 생각했을 떄,
export class ghost {
construnctor() {
this.speed = 70;restartGame()에서 ghost.speed를 50으로 할당하고 있기 때문에 play again을 누르면 ghost의 스피드는 70 이 아닌 50으로 시작하게 된다. 즉, 처음 게임을 시작하면 50의 속도로 움직이는데 게임을 다시 시작하면 70의 속도로 움직인다.
따라서 restartGame까지 내려와 speed를 똑같이 70으로 변경해주어야 한다.
function restartGame() {
ghost.speed = 70;이렇게 하나하나 찾아서 입력하는 건 효율적이지 않다.
이렇게 바꾸기
ghost class로 인스턴스를 생성하고 나면, 별도의 변수에 초기값을 저장한다.
ghost = new Ghost();
ghostSpeedCache = ghost.speed;모든 게임이 끝나고나면 매 라운드 때마다 증가했던 ghost.speed는 처음과 다른 값을 가지고 있지만, ghostSpeedCache는 처음과 동일한 값을 갖고 있다.
게임을 재시작할 때 이 ghostSpeedCache의 값을 다시 ghost.speed에 할당해준다.
function restartGame() {
ghost.speed = ghostSpeedCache;이렇게 하면 이후에 ghost.speed의 초기값을 어떻게 변경하든 한번만 변경해주면 게임플레이에 아무런 이상이 없다.
