[달리는 까까] 아이템 추가

• 아이템 클래스

아이템 타입을 받아 그에 맞는 메서드를 호출한다. 쿠키와의 충돌 체크는 젤리와 동일한 방식으로 한다.

 

• 질주

  blast() {
    document.querySelector(".cookie").classList.add("blast");
    cookie.speed *= 2;
    cookie.superCookie = true;

    setTimeout(() => {
      document.querySelector(".cookie").classList.remove("blast");
      if (!document.querySelector(".cookie").classList.contains("giant")) {
        document.querySelector(".cookie").classList.add("supper");
      }
      cookie.speed /= 2;
    }, 1500);
    setTimeout(() => {
      cookie.eatenItem--;
      if (cookie.eatenItem === 0) {
        document.querySelector(".cookie").classList.remove("supper");
        cookie.superCookie = false;
      }
    }, 3000);
  }

1.5초동안 쿠키의 속도가 2배가 되며 질주 상태동안은 쿠키가 장애물에 부딪히지 않는다. 질주 상태가 끝나면 1.5초간 무적 상태가 유지된다. 이때 쿠키가 깜빡거리며 무적 상태임을 나타내도록 했다.

지금 보니까 슈퍼 철자 틀렸다.. 왜그랬지?

 

• 거대화

  giant() {
    document.querySelector(".cookie").classList.add("giant");
    cookie.superCookie = true;

    setTimeout(() => {
      document.querySelector(".cookie").classList.remove("giant");
      if (!document.querySelector(".cookie").classList.contains("blast")) {
        document.querySelector(".cookie").classList.add("supper");
      }
    }, 2000);
    setTimeout(() => {
      cookie.eatenItem--;
      if (cookie.eatenItem === 0) {
        document.querySelector(".cookie").classList.remove("supper");
        cookie.superCookie = false;
      }
    }, 3500);
  }

2초간 쿠키의 크기가 1.5배 커지며 역시 아이템 지속 시간동안 무적 상태다. 거대화가 끝나고 1.5초간 무적 상태가 지속된다.

쿠키의 크기가 커진 동안 다른 모션(점프, 슬라이드)의 이미지 크기도 조절해줬다.

 

• 코인매직

  coinMagic() {
    allObstacleComProp.arr.forEach((arr) => {
      if (arr.x < cookie.movex + (gameProp.screenWidth / 5) * 4 && arr.x > cookie.movex - gameProp.screenWidth / 5) {
        arr.coinMagicObstacle();
      }
    });
  }

현재 쿠키의 위치를 기준으로 화면 안의 모든 장애물이 코인으로 변한다. 장애물을 코인으로 변환시키는 과정은 장애물 클래스의 coinMagicObstacle에서 처리하며 장애물의 높이와 너비 기준으로 계산했다.

 

• 자석

  magnet() {
    allJellyComProp.arr.forEach((arr) => {
      if (arr.x < cookie.movex + (gameProp.screenWidth / 5) * 4 && arr.x > cookie.movex - gameProp.screenWidth / 5) {
        arr.magnet = true;
      }
    });
  }

역시 쿠키의 현재 위치를 기준으로 화면 안의 모든 젤리들이 끌려온다. 젤리의 magnet에 true가 되면 쿠키와 젤리간의 거리를 계산해 프레임마다 끌려오게 된다. game.js의 renderGame에서 젤리의 충돌을 검사할 때 함께 처리한다.

 

• 생명물약

생명물약은 따로 메서드 없이 쿠키 클래스의 plusHp 메서드를 호출해 처리한다. 큰 생명물약은 500, 작은 생명물약은 50만큼 쿠키 체력이 추가된다.

 

---

🔻모든 코드 보기🔻

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

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

🔻게임 하기🔻

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

DAL GGA