[달리는 까까] 달리면서 젤리 먹기

• 파일 구조

- 로비

index.html

lobby.js

lobby.css

 

- 게임

game.html: 인게임 엘리먼트

game.js: 인게임 데이터, 프레임에 따른 동작, 로드시 초기화 등을 담당

class.js: 스테이지, 쿠키, 젤리, 아이템, 장애물 등의 클래스

stage.js: 스테이지별로 거리와 장애물, 젤리패턴 등의 정보를 저장(game.js를 통해 class.js의 Stage 클래스에 전달)

game.css: 인게임 엘리먼트 디자인, 각종 애니메이션

 

• 쿠키 애니메이션

쿠키가 달려가는 것처럼 보이려면 애니메이션을 추가해야 한다. 아무런 움직임 없이 위치만 바꾸면 자연스럽지 않기 때문이다.

달리기, 점프, 슬라이드 등 쿠키의 움직임을 구현할 스프라이트 이미지를 저장하고 css animation과 keyframe을 이용해 살아 움직이는 쿠키를 만든다. 일정 간격으로 이미지를 잘라 짧은 시간동안 반복해서 보여주며 쿠키가 뛰는 것 같은 효과를 내는 것이다.

쿠키에 해당하는 엘리먼트 구조는 다음과 같다.

    <div class="game_app">
		...
        <div class="game">
        	<!-- 쿠키를 담을 엘리먼트 -->
            <div class="cookie_box">
            	<!-- 이 엘리먼트에 클래스를 추가해 쿠키의 상태를 변경 -->
                <div class="cookie run"></div>
            </div>
            <!-- 쿠키가 밟고 뛰어다니는 땅 (실감나는 애니메이션을 위해) -->
            <div class="ground"></div>
        </div>
        ...
    </div>

 

쿠키 클래스는 기본적으로 "cookie run"이고, 여기에 클래스를 추가해 키모션에 따른 애니메이션을 보여주도록 한다.

늘어나는 클래스

 

실제 쿠키의 이동 거리는 Cookie 클래스에서 movex로 저장한다. 매 프레임마다 cookie.movex += cookie.speed해 업데이트한다.

 

• 배경과 땅 처리

대부분의 러닝게임과 마찬가지로 캐릭터는 왼쪽 아래에 고정시켜 놓고 배경을 움직여 쿠키가 앞으로 나아가는듯 보이게 했다. game.js에서 배경 움직임을 처리한다.

쿠키의 속도를 이용한 수식으로 배경 이동량을 처리한다. .game 클래스를 gameBox로 받아 처리하는데 이때 .ground도 gameBox에 포함되어 있기 때문에 배경과 땅이 같은 속도로 움직이게 된다.

const setGameBackground = () => {
  let parallaxValue = Math.min(0, (cookie.movex - gameProp.screenWidth / 5) * -1);
  gameBackground.gameBox.style.transform = `translateX(${parallaxValue}px)`;
};

쿠키가 화면의 1/5지점에 오는 시점부터 배경을 이동시키는 코드다.

 

• 젤리 먹기

Jelly 객체는 자신의 위치와 type(=젤리 종류)를 가진다.

class Jelly {
  constructor(x, y, type) {
		...
  }
  	...
}

 

쿠키와 젤리의 위치를 비교해 둘이 겹칠 때 젤리 엘리먼트를 삭제하고 점수를 업데이트 한다. 점수 업데이트는 Jelly 클래스에서 하며, 먹은 젤리가 갖고 있는 점수 프로퍼티를 totalScore에 더한 후 score_box의 innerText를 업데이트하는 방식이다. renderGame에서 현재 스테이지에 존재하는 모든 젤리에 대해 충돌을 반복해서 체크한다.

 

---

🔻모든 코드 보기🔻

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

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

🔻게임 하기🔻

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

DAL GGA