픽셀 러너 (Pixel Runner)

레이싱 · 런닝 액션 · 순수 JavaScript

픽셀 러너는 자동으로 전진하는 캐릭터를 점프로 제어해 지상/공중 장애물을 회피하는 서바이벌 러닝 게임입니다. 시간이 지날수록 속도와 장애물 압박이 증가하며, 기록은 이동 거리(점수)로 계산됩니다.

기본 구성

• 캔버스 크기: 480 x 270
• 초기 속도: gameSpeed = 5
• 점수는 60프레임마다 +1씩 오르며 거리(m) 형태로 표시됩니다.

조작 방법

• 키보드: Space 또는 ArrowUp 입력으로 점프 플래그를 켭니다.
• 모바일: btnJump를 누르고 있는 동안 점프 입력이 유지됩니다.
• 플레이어는 지면(canvas.height - 20)에 닿아야 다시 점프할 수 있습니다.

플레이어 물리

• 점프 힘 -12, 중력 0.6이 적용되어 포물선 점프를 만듭니다.
• 지면 접촉 시 grounded = true로 전환되어 연속 점프 입력을 다시 받을 수 있습니다.
• 달리기 애니메이션은 animFrame 기반으로 다리 픽셀 일부를 교차 생략해 표현됩니다.

장애물과 난이도 상승

• 장애물은 지상형(ground)과 공중형(air) 두 종류입니다.
• 지상형은 단순 직진, 공중형은 특정 시점(x < 300)에 플레이어를 향해 유도 탄도처럼 추적합니다.
• 장애물 생성 간격은 nextSpawnFrame으로 랜덤화되며, 속도 증가에 따라 체감 간격이 짧아집니다.
• 속도는 300프레임마다 +0.2씩 증가해 장기 생존 난이도가 점점 높아집니다.

아이템(무적) 시스템

• 약 1500프레임마다 무적 아이템이 생성됩니다.
• 획득 시 isInvincible = true, 지속 시간은 350프레임입니다.
• 무적 중에는 플레이어 크기가 1.5배로 커지고, 반짝임(알파 깜빡임) 연출이 적용됩니다.

충돌과 종료 흐름

• 무적이 아닐 때 플레이어와 장애물 AABB 충돌이 발생하면 즉시 게임 오버입니다.
• 게임 오버 시 상태는 CRASHED로 바뀌고, 모달에서 이동 거리(점수)를 보여줍니다.
• 랭킹 저장은 saveGameScore("pixelrunner", nickname, finalScore)를 사용합니다.

플레이 팁

• 공중 추적형 장애물은 너무 늦게 뛰면 회피각이 줄어드니, 화면 중간 전에 점프 타이밍을 잡는 것이 안전합니다.
• 무적 아이템은 후반 난이도 상승 구간에서 생존 시간을 크게 늘려주므로, 리스크가 있더라도 가능하면 챙기는 편이 유리합니다.
• 연속 점프 입력보다 지면 착지 타이밍을 먼저 읽으면 공중형+지상형 복합 패턴 대응이 쉬워집니다.