재귀 함수와 배열 셔플 알고리즘으로 만든 자바스크립트 사다리 타기 복불복 게임

작성자:
자바스크립트 사다리 게임 처음 화면

안녕하세요!

18번째 포스팅[스크래치 복권 만들기]와 14번째 포스팅[타자 게임]등과 같이 평소 웹 게임 구현에 관심이 많았던 터라, 이번에는 고전적이면서도 로직의 정교함이 요구되는 ‘자바스크립트 사다리 게임’을 주제로 잡았습니다. 단순히 위에서 아래로 내려가는 게임이 아니라, 대각선 경로가 포함된 복잡한 구조를 어떻게 하면 자바스크립트와 Canvas API로 완벽하게 구현할 수 있을지 고민한 기록을 남겨봅니다.

1. 설계: 사용자 경험(UX) 중심의 레이아웃

가장 먼저 고민한 것은 ‘어떻게 하면 사용자가 복잡한 설정 없이 게임에 몰입하게 할 것인가?’였습니다. 이를 위해 화면을 두 개의 명확한 단계로 분리했습니다.

  • 설정 단계: 참가 인원을 입력하면 실시간으로 이름과 결과값을 넣을 수 있는 입력 란이 생성됩니다. 불필요한 페이지 이동을 줄여 접근성을 높였습니다.
  • 실행 단계: 캔버스(Canvas) API를 활용해 사다리가 그려지는 공간을 확보했습니다. 특히 상단 여백을 최적화하여 모바일이나 데스크톱 어디서든 사다리의 전체 모습이 한눈에 들어오도록 설계했습니다.

2. 자바스크립트 사다리 게임 핵심 로직: 왜 좌표 기반인가?

일반적인 사다리 게임은 2차원 배열의 인덱스만으로 경로를 계산하곤 합니다. 하지만 우리는 한 단계 더 나아가 ‘Y좌표 직접 매핑’ 방식을 채택했습니다. 사다리의 각 가로줄이 시작되는 높이(startYstartY)와 끝나는 높이(endYendY)를 데이터화하여 관리하는 방식입니다.

이 설계의 장점은 명확합니다. 가로줄이 단순히 수평이 아니라 대각선으로 형성될 때, 캐릭터(강조 선)가 따라가야 할 정확한 궤적을 픽셀 단위로 통제할 수 있습니다. ladderData 구조를 { startY, endY } 형태의 객체 배열로 구성함으로써, 어떤 복잡한 대각선 경로에서도 선이 어긋나거나 끊기지 않는 기술적 토대를 마련했습니다.

왜 기존의 방식은 문제가 되었을까?

처음 자바스크립트 사다리 게임을 설계할 때, 저는 가로줄의 유무를 0과 1 같은 단순한 숫자로만 관리했습니다. 하지만 이 방식은 치명적인 단점이 있었죠. 사다리의 가로줄이 직선이 아닌 ‘대각선’이 되는 순간, 시작점과 끝점의 높낮이가 달라지면서 경로를 추적하는 선이 툭툭 끊기거나 엉뚱한 곳을 색칠하게 됩니다.

3. 데이터 구조: Y좌표 기반 매핑

단순히 줄의 유무를 저장하는 것이 아니라, 가로줄이 시작되는 Y좌표와 끝나는 Y좌표를 직접 데이터에 추가하였습니다.

  • 기존: [0, 1, 0] (가로줄 있음/없음만 표시)
  • 변경: { startY: 120, endY: 155 } (선의 시작 높이와 끝 높이를 명시)

이렇게 좌표 정보를 객체 형태로 관리하게 되면, 캔버스에서 lineTo 메서드를 호출할 때 데이터와 100% 일치하는 지점을 연결할 수 있습니다. 결과적으로 대각선 구간에서도 한 치의 오차 없는 경로 추적이 가능해졌습니다.

// Y좌표 기반의 정밀한 데이터 설계
ladderData = [];
const rows = 7; 
for (let i = 0; i < rows; i++) {
    let row = new Array(memberCount - 1).fill(null);
    for (let j = 0; j < row.length; j++) {
        if (Math.random() > 0.6 && (j === 0 || row[j-1] === null)) {
            // 가로줄의 시작 Y와 끝 Y를 다르게 주어 자연스러운 대각선 생성
            const startY = topMargin + (i * rowHeight) + (Math.random() * 20);
            const endY = topMargin + (i * rowHeight) + (Math.random() * 40 + 20);
            row[j] = { startY, endY };
        }
    }
    ladderData.push(row);
}

4. 끊김 없이 부드러운 드로잉 애니메이션

로직의 정확도를 확보한 후에는 시각적인 연출에 집중했습니다. 자바스크립트 사다리 타기 게임은 자신의 결과가 나올 때까지 선을 따라가는 긴장감이 중요합니다. 선이 층별로 툭툭 끊겨서 나타나면 그 몰입감이 반감될 수밖에 없습니다. 저는 이 문제를 해결하기 위해 setInterval을 버리고 requestAnimationFrame과 보간법(Interpolation)을 도입했습니다.

// 프레임 단위로 선을 조금씩 그려나가는 부드러운 애니메이션 함수
function smoothDraw(ctx, x1, y1, x2, y2, color) {
    return new Promise((resolve) => {
        let progress = 0;
        const speed = 0.05; // 붓의 움직임 속도를 결정하는 변수

        function step() {
            progress += speed;
            if (progress > 1) progress = 1;

            // 시작점과 끝점 사이의 좌표를 실시간으로 계산
            const curX = x1 + (x2 - x1) * progress;
            const curY = y1 + (y2 - y1) * progress;

            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(curX, curY); // 프레임마다 계산된 위치까지 선을 연장
            ctx.stroke();

            if (progress < 1) requestAnimationFrame(step);
            else resolve();
        }
        requestAnimationFrame(step);
    });
}

보간법(Interpolation) 활용: 시작점 (x1,y1)(x_{1}, y_{1})에서 끝점 (x2,y2)(x_{2}, y_{2})까지 한 번에 그리는 것이 아니라, 프레임마다 아주 미세한 간격으로 나누어 그려나갑니다.

이 함수를 통해 사다리 경로는 마치 펜으로 종이 위에 직접 선을 긋는 듯한 생동감을 얻었습니다. 세로줄에서 가로 대각선으로 꺾이는 구간도 끊김 없이 물 흐르듯 이어지며 사용자에게 높은 만족감을 줍니다.

5. 자바스크립트 사다리 게임

🎲 사다리 게임

참가 인원:

이번에 자바스크립트 사다리 게임을 만들면서 UI 디자인에도 공을 들였습니다. 인원수를 입력하면 즉시 입력 칸이 생성되는 동적 필드, 페이지 전환 없이 display 속성만으로 구현한 매끄러운 앱 구조, 그리고 모든 게임이 종료된 후 1초 뒤에 나타나는 자동 결과 팝업까지.

직선 뿐만아니라 대각선이라는 변수를 해결하기 위해 좌표 기반 시스템을 도입하고, 부드러운 애니메이션을 위해 프레임 단위의 연산을 고민했던 과정들이 정말 뜻깊었습니다.

단순히 선을 그리는 것을 넘어, 사다리를 타고 내려가는 ‘경로’를 로직으로 구현하는 것이 가장 큰 도전이었습니다. 2차원 배열을 활용해 사다리의 가로줄 정보를 저장하고, 조건문을 통해 좌우 이동 우선순위를 정하는 과정을 통해 알고리즘 설계의 중요성을 깊이 체감했습니다. 랜덤 결과의 공정성을 확보하기 위해 배열 셔플 로직을 도입한 부분도 이 프로젝트의 핵심 포인트입니다.

랜덤 로직의 또 다른 활용법이 궁금하시다면, [자바스크립트 OX 퀴즈] 포스팅에서 다룬 문제 무작위 출제 방식을 함께 살펴보세요.

혹시 사다리 게임 구현 중 경로가 어긋나거나 애니메이션이 부자연스러워 고민 중이신 분들이 있다면, 오늘 소개해 드린 좌표 기반 매핑과 보간법 드로잉 방식을 꼭 적용해 보시기 바랍니다. 긴 글 읽어주셔서 감사합니다!

댓글 남기기