[달리는 까까] 점프, 슬라이드로 장애물 피하기

• keyMotion

쿠키 클래스에는 키눌림에 반응하도록 하는 메서드 keyMotion()이 있다. 이 메서드는 game.js의 renderGame에서 무한히 호출됨으로써 딜레이 없이 키눌림에 즉각 반응하도록 했다.

  keyMotion() {
    if (!gameProp.paused && !gameProp.gameOver && !gameProp.gameClear) {
      // 슬라이드
      if (this.jumpState === 0 && key.keyDown["slide"]) {
        this.el.classList.add("slide");
      }
      if (!key.keyDown["slide"]) {
        this.el.classList.remove("slide");
      }

      //점프
      if (this.jumpState > 0) {
        //jumpState = 1 or 2 or 3일 때

        //점프 타임 만료 시 내려오기
        if (this.jumpTimer >= this.jumpTime) {
          // debugger;
          this.el.classList.remove("double");
          this.el.classList.add("down");

          if (this.movey < 0) {
            // 땅에 닿기 전까지 내려오기
            this.movey += this.jumpSpeed;
          } else if (this.movey === 0) {
            //다 내려오면 점프 상태 초기화, 타이머 초기화
            this.el.classList.remove("jump");
            this.el.classList.remove("down");

            this.jumpState = 0;
            this.jumpTimer = 0;
          }
        } else {
          //점프 타임 만료 전, 즉 점프 중일 때 위로 이동
          if (this.jumpState === 1) {
            this.el.classList.add("jump");
          }
          if (this.jumpState === 2) {
            this.el.classList.add("double");
            this.el.classList.remove("down");
          }
          this.movey -= this.jumpSpeed;
          this.jumpTimer++;
        }
      }
    }
  }

이 게임을 만들면서 제일 고생했던 부분이다.. 바로 점프와 이단점프ㅠㅠ

 

점프를 구현하는 원리는

jumpTime이 jumpTimer미만인 동안 프레임당 jumpSpeed만큼 movey 증가(화면 위쪽 기준이기 때문에 코드상에선 감소) -> jumpTimer 만료시 movey 바닥까지 감소

였는데, 문제는 점프 횟수였다.

 

완벽한 점프 구현을 위해선 다음과 같은 처리가 필요했다.

• 달리는 중 점프 키를 누르면 1단 점프
• 1단 점프 중 점프 키를 누르면 2단 점프
• 2단 점프 중 어떤 키를 눌러도 변화 없음(3단, 4단 점프 등 안돼야 함) <- 이 부분이 문제: 무한 점프
• 다음 스테이지 시작 시 점프 상태 초기화(점프 상태로 게임이 끝났을 경우) <- Stage 클래스에서 처리

 

이 문제를 해결하기 위해 현재 상태와 점프 가능 여부를 저장하는 jumpState라는 변수를 도입했다.

최종 점프 매커니즘은 다음과 같다.

• jumpState

     0: 점프 가능(점프 안하는중)

     1:1단 점프중

     2: 2단 점프중(점프 불가능)

     3: 2단 점프중인데 또 눌렀을 때

 

• 점프 키 눌렀을 때

     jumpState: 0->1, 1이상 -> 2 (윈도우 이벤트에서 완료)

 

• keyMotion

     jumpState = 0일 경우

     달리기

     jumpState = 1일 경우
     점프 타이머 만료 전: 1단 점프
     점프 타이머 만료 후: 내려오기

     jumpState = 2일 결경우
     점프 타이머 만료 전: 2단 점프
     점프 타이머 만료 후: 내려오기

     jumpState 1 or 2면 점프타이머 ++ (2면 윈도우이벤트에서 타이머 초기화)

 

슬라이드 키가 눌리면 쿠키 클래스에 slide 클래스를 추가한다. 점프 중 슬라이드를 눌렀을 경우에는 반응하지 않는다.

 

• 장애물 추가

Obstacle 객체는 자신의 위치와 데미지, className(=장애물 종류)를 가진다.

class Obstacle {
  constructor(x, y, damage, className) {
		...
  }
	...
}

 

쿠키와 장애물의 충돌은 쿠키와 젤리의 충돌을 체크할 때와 같은 방식으로 구현했다.

쿠키가 장애물에 충돌하면 cookie의 crashed가 true로 변해 1초간은 추가 피해를 받지 않으며 장애물이 가진 데미지만큼 체력이 깎인다. 체력이 0 이하로 내려가면 쿠키가 죽고 게임이 끝난다.

 

---

🔻모든 코드 보기🔻

https://github.com/mkthebea/CCKK_Run.git

GitHub - mkthebea/CCKK_Run: A fangame of [CookieRun: Ovenbreak]

🔻게임 하기🔻

https://mkthebea.github.io/CCKK_Run/

DAL GGA