[Project-유령게임] 반성문인가 작업로그인가...

구현하려고 하는 게임 방식

1. 시작 전엔 캐릭터도 움직이지 않음
2. 스타트를 누르면 스타트버튼이 사라지고 점수표가 뜨면서 시작
3. 유령이 내려오고 캐릭터와 부딪히면 점수가 올라감
4. 잡을수록 유령의 스피드가 올라가고 나오는 간격이 짧아짐
5. 유령이 땅에 닿게되면 게임이 끝

게임 실행부터 작업 시작!

• start버튼이나 점수표에 hide클래스를 className을 사용하여 btnclass btnclass hide 처럼 넣고 빼고 했었는데, classList.toggle()을 사용
  => (토글사용하며 재시작 구현을 하려고 했었으나... 아직은 무리인듯 싶다)

키보드로 캐릭터 움직이기

• 캐릭터는 X방향(왼쪽, 오른쪽)으로만 움직이니 offsetLeft로 캐릭터의 위치값을 구하고, style.left를 수정하는 방식으로 작업
  => 캐릭터의 방향 이동시에 캐릭터 모습이 바뀌도록 css 클래스를 변경
  => keydown 이벤트 사용

  document.addEventListener('keydown', (e) => {
    if( e.key === 'ArrowLeft' ) {
      //내용
    } else if ( e.key === 'ArrowRight' ) {
      //내용
    } else {
      return;
  })

• 캐릭터가 배경을 넘어가지 않도록 if문으로 return시켜서 막아주었다.

내려오는 유령

1마리 잡을때마다 1점씩 올라가게 하면서 5점마다 round를 올라가게 하였다.
round 올라갈때마다 변하는건? 유령의 스피드와 생성속도!

테스트하려고 게임을 실행하다가 깜짝놀랐다
setInterval 값을 감소만 시켜줬더니 0이 되서 쏟아져 나왔나보다....

if문으로 속도와 생성시간의 min값을 설정해 주었다
++ 라운드의 짝수(스피드) / 홀수(생성속도)를 나눠서 변경되도록 추가

작업 중 제일 큰 어려움을 겪은 문제점들...

유령이 땅에 닿았을 때(game over)

유령이 내려가는 동작을 실행하는 인터벌의 clearInterval만 적용이 안되서
종료 후에도 끝나는 상황에 내려오고 있던 유령들이 계속 내려와서
땅에 닿았을 때 실행되는 코드들을 작동시킨다...
( 화면에 남아있는 내려오는 유령의 수만큼 game over의 반복 ㅠㅠ )

=> 야매(?)로 현재 DOM에 남아있는 유령들의 element를 remove()해줘도 setInterval이 유령처럼 진행되서 땅에 박는 현상으로 위와 같이 동작되었다

class문으로 작업 해 보는것도 처음이었고,
계속 생성되는 setInterval을 각각 어떻게 clear해주어야 하는지 모르는게 문제였던 것 같다.

this.intervalName = setInterval() 해준값을 console로 확인했을 때 왜 숫자가 나오는가 의문을 갖고 뭔가 값이 중간에 꼬였다고 생각하고 넘어갔었다.
몇시간을 헤메다 야매로도 해결이 안되서 결국 다시 되돌아가서 console을 찍어보다 이 숫자에 대해 큰 의문이 생겨 검색을 해보니..

내가 setInterval에 대해 잘 몰랐었던것

setInterval은 숫자타입의 아이디를 반환 한다는 것!!!
해당 숫자 아이디는 인터벌함수를 호출할 때 마다 숫자가 올라가진다.
생성될 때마다 실제로 콘솔에 찍어보니
그럼 어떻게 해결하면 좋을까?? 생각을 해 보았다.

1. 유령이 땅에 닿을 때, 해당 인터벌의 값을 this.moveEnemy로 보내준다
2. 현재 DOM에 있는 enemy의 length를 구한다
3. for문으로 length만큼 돌면서 clearInterval(this.moveEnemy + i) 해준다
   => + i 는 현재 땅에 닿은 유령은 for문 밖에서 바로 실행 해 줬고, 이 유령 이후에 생성된 유령들을 정지시켜 줘야 하기 때문에

결과적으로 진행중인 유령이 멈추는긴 했다... ㅎ

추가 공부해봐야 할 것

• setinterval 말고도 어떤것들로 인해 interval ID가 늘어나는 것인지?
  인터벌을 여기저기 써서인지 아이디의 숫자가 1씩 올라가지 않아고 2씩 올라가서 for문을 돌아야하는 횟수가 2마리까지는 괜찮지만 3마리일땐(4번) 4마리일땐(6번) .... 늘어난다
• 이번엔 애매한 미완성으로 끝냈지만 나중에는 해당기능들 구현과, 추가기능들 있는 것도 만들어 보고싶어졌다

찐~허게 배운것

• class문 : init에서 new Name(this)로 다른 claas에서 사용이 가능하다는 것을 알게 되었다
• setInterval의 반환값은 숫자 형식의 id 값!
• 각각의 좌표값 구해서 충돌감지

깃허브 : https://github.com/sseung-i/enemy-rain-game

공부하며 정리&기록하는 ._. 씅로그