javascript. 게임 만들기 - double jump 구현😵

유튜브에서 바닐라 자바스크립트 canvas를 이용해 장애물을 피해 달리면서 점수를 얻는 게임 프로젝트 영상을 봤다.

https://youtu.be/7JtLHJbm0kA <-참고영상

워우 canvas를 처음 써봐서... 처음에 따라가기 어려웠는데 그냥 canvas사이즈에 맞게 안에 2d로 객체를 생성해서 

사용자의 키 입력, 오브젝트들의 무빙, 충돌 탐지, requestAnimationFrame함수를 이용한 초당 애니메이션 효과를 구현하는 내용!!

어찌어찌 따라했는데... 더블점프를 구현하고 싶었다ㅜㅜ 구글링을 해보니1. jumpCount, maxJump 변수를 이용해 jumpCount가 2번 이상(maxJump)이면 초기화 시키기. 2. doubleJump = true/false 변수를 이용해 플레이어 캐릭터가 땅에있으면 true, 공중이면 false하기.두가지 방법이 있었다. 처음엔 1번 방법을 이용해 구현을 하려고했는데

    onGround(){
      return this.y >= (this.gameHeight - this.height) - 40;
    }

이미 코드에 땅에 있는 상태를 리턴하는 함수가 있어서 2번을 이용해 코드를 짰다!

  class InputHandler {
    constructor(){
      this.keys = [];
      window.addEventListener('keydown', e => {
        if(!this.keys.includes(e.key)){
          this.keys.push(e.key);
        }
      });
      window.addEventListener('keyup', e => {
        if(this.keys.includes(e.key)) {
          this.keys.splice(this.keys.indexOf(e.key), 1);
        }
      });
    }
  }

일단 사용자의 키 입력은 이 클래스를 통해 받는다. keydown이면 키를 눌렀을때, keyup이면 뗐을 때.this.keys배열에 이벤트 속성 값(키 입력 값)을 push! 떼면 배열에서 지운다.

doubleJump = true로 플레이어 클래스에 변수를 선언하고

      if(!this.onGround()){
     	this.vy += this.weight;
        this.maxFrame = 0;
        this.frameY = 0;
        this.doubleJump = false;
      } else {
        this.maxFrame = 9;
        this.frameY = 1;
        this.doubleJump = true;
      }

 

 

이런식으로 코드 짠 담에 사용자가 ↑을 누르고, onGround이고, doubleJump가 true이면 vy+= -20 을 누적하는걸로 짜봤는데 아니 글쎄 겜 캐릭터가 계속 위로 날라가버리는거 아닝가!!!!!! 

그래서 계속 수정하고 머리굴리고 해서 doubleJump변수를 불리언으로 지정하지않고 0으로 할당 후

	if(this.onGround()){
        this.doubleJump = true;
        this.maxFrame = 9;
        this.frameY = 1;
        if(input.keys.indexOf('ArrowUp') > -1 ){
          this.vy = -20;
          this.doubleJump = 1;
        }
      } else {
        this.vy += this.weight;
        this.maxFrame = 0;
        this.frameY = 0;
        window.addEventListener('keydown', e => {
          if(e.key === 'ArrowUp' && this.doubleJump === 1){
            this.vy = -22;
            this.doubleJump = 0;
          }
        });
      }

이렇게 구현했다. 짜놓고 나서도 뭔가 코드가 더러워서(ㅠㅠ) 만족스럽진 않지만 됐을때 와!!!!🎉🎉하며 소리쳤다.

else에 왜 만들어놨던 input클래스의 keys배열을 안썼냐...? 안먹는다! 왜 안먹냐??? 지나가던 고수 개발자님들이 알려주면 좋겠다.

더블점프 했을 때 vy도 뛴 만큼 누적 this.vy -= 20 하면 될 것 같아서 시도해봤는데 너무 많이 날라가서... -22로 했더니 적당했다.

 

이것저것 게임적인 요소를 추가해보며 더 연구를 해야겠다.