구름이 닿지 않는 판은 왜 나오지 않을까

2026년 10월 25일 · 게임 디자인 · English

구름 점프는 병아리가 저절로 통통 튀고 사람은 좌우로만 움직이는 게임이다. 구름은 무작위로 놓이지만, 닿을 구름이 없어서 멈춰 서는 판은 규칙상 나오지 않는다. 운이 아니라 구름을 놓는 규칙에 한계를 걸어 두었기 때문이다.

구름 점프는 브라우저의 <canvas> 요소에 2D 그리기 API 로 그린다. 판은 가로 360, 세로 600 픽셀이고, 위로 갈수록 세로 좌표가 작아진다. 높이는 10px 을 1m 로 센다. 점프는 위로 튀는 속도와 아래로 당기는 중력으로 계산해서, 구름을 밟을 때마다 같은 속도로 튀어 오른다.

위로 올라가는 게임에서 구름 사이의 높이 간격을 마음대로 정하면, 가끔 점프로 닿지 않는 간격이 생긴다. 그러면 그 판은 거기서 끝난다. 사람이 못 한 것이 아니라 게임이 못 하게 만든 판이다. 플레이한 사람은 이유를 알 수 없고, 그냥 불공평했다고 느낀다.

해결 방법은 두 가지다. 구름을 다 놓은 뒤에 길이 이어져 있는지 검사하고 끊겼으면 다시 놓는 방법이 있다. 아니면 처음부터 끊길 수 없는 규칙으로 놓는 방법이 있다. 구름 점프는 뒤쪽으로 갔다.

병아리는 구름을 밟을 때마다 같은 속도로 튀어 오른다. 이때 올라가는 최대 높이는 간단한 식으로 나온다. 위로 튀는 속도가 800이고 중력이 1500이면 최고점 높이는 속도의 제곱을 중력의 두 배로 나눈 값이다.

const G = 1500, JUMP = -800;
// peak height = JUMP * JUMP / (2 * G) = about 213px

그러니 위쪽 구름이 지금 구름보다 213px 이내에 있어야 점프만으로 닿을 수 있다. 판의 크기는 가로 360, 세로 600이고 10px 이 1m 로 계산되는 높이 단위다. 213px 은 이 판에서 상당히 높은 편이다.

구름을 한 층 더 놓을 때, 아래 구름과의 높이 간격을 이렇게 정한다. 게임 코드에서 줄인 것이다.

topY -= rand(55, Math.min(150, 85 + height / 12));

간격의 최솟값은 55px 이다. 최댓값은 처음에는 85px 이고, 높이가 올라갈수록 조금씩 늘어난다. 높이가 780m 쯤에서 150px 에 닿고, 그 뒤로는 150px 에서 멈춘다. 이 150px 이 213px 보다 작은 한 어떤 판에서도 위의 구름은 점프로 닿는다. 한계를 걸어 두었으므로 검사해서 다시 놓는 과정이 필요 없다.

높이가 올라갈수록 간격이 넓어지게 한 것은 난이도 때문이다. 처음에는 구름이 촘촘해서 쉽고, 올라갈수록 듬성듬성해져서 좌우 조작이 정확해야 한다. 다만 어디까지 어려워져도 닿을 수 있다는 보장은 유지된다.

간격의 상한을 점프 높이와 똑같이 잡지 않고 63px 정도 낮춰 둔 데에는 이유가 있다. 점프의 최고점에서는 병아리가 거의 멈춰 있다. 최고점에 아슬아슬하게 걸치는 구름은 사람이 좌우로 방향을 맞출 시간이 부족하다. 상한을 점프 높이보다 낮춰서 이 여유를 확보한 것이다. 213px 이라는 한계는 물리에서 정해지고, 150px 은 그 안에서 고른 값이다.

이 규칙으로 놓은 구름 위를 직접 올라가 볼 수 있다. 회색 구름처럼 밟으면 떨어지는 구름은 길과 따로 놓는데, 이 이야기는 다른 글에서 적었다.

참고한 문서

• GDC 2016, Math for Game Programmers: Building a Better Jump (Kyle Pittman): https://gdcvault.com/play/1023148/Math-for-Game-Programmers-Building
• Wikipedia, 등가속도 운동 공식 (Equations of motion): https://en.wikipedia.org/wiki/Equations_of_motion
• Wikipedia, Procedural generation: https://en.wikipedia.org/wiki/Procedural_generation

이 글과 관련된 게임

구름 점프구름을 밟고 통통 튀어 하늘 높이 올라가세요. 회색 구름은 밟으면 흩어지고, 천둥구름은 위에서 밟아야 해요! 해 보기