동네북 · 골목 대모험

조작은 하나, 결정은 두 번

동네북은 앞으로 자동으로 달립니다. 사용자는 언제 점프하고, 공중에서 두 번째 점프를 쓸지만 결정합니다. 첫 점프를 일찍 쓰면 낮은 장애물을 편하게 넘을 수 있지만, 두 번째 점프까지 연달아 사용하면 다음 장애물에 대응할 여유가 줄어듭니다.

코인은 달리는 길에 놓여 있고 획득하면 점수에 반영됩니다. 멀리 가는 목표와 코인을 모으는 목표가 겹치면서, 단순한 점프에도 경로 선택의 의미가 생깁니다.

네 파일로 살펴보는 구성

dist/game.js가 이동·점프·충돌·그리기·입력을 관리하고, dist/dongnebook.png가 캐릭터 이미지입니다. index.html은 시작과 점프 버튼, style.css는 화면 크기에 따른 배치를 맡습니다.

이미지 파일 이름만 바꾸면 캐릭터가 표시되지 않을 수 있습니다. 새 이미지를 적용하려면 이미지 로딩 경로뿐 아니라 캐릭터를 그리는 영역과 실제 충돌 판정을 함께 확인해야 합니다. 눈에 보이는 크기와 판정 범위가 다르면 점프 타이밍을 이해하기 어려워집니다.

자동 이동과 점프가 만나는 지점

코드의 start()는 점수, 코인, 장애물 배열과 속도를 새 게임 값으로 되돌립니다. 기본 속도는 280이며 player의 vy는 세로 속도, jumps는 점프 사용 횟수입니다. 착지와 공중 상태를 구분해야 두 번째 점프까지만 허용할 수 있습니다.

장애물과 코인은 한 번에 전부 그려 둔 배경이 아닙니다. 진행 시간에 따라 생성되고 화면을 지나갑니다. 따라서 속도를 올릴 때는 캐릭터 동작뿐 아니라 다음 장애물을 판단할 수 있는 시간도 함께 달라집니다.

직접 바꿔볼 과제: 여유 있는 골목 만들기

1. start() 안의 속도 초기값을 조금 낮추고 기존 버전과 비교합니다.
2. 점프 횟수는 그대로 둔 채 장애물 생성 간격을 살펴봅니다.
3. 코인을 따라가려는 동선과 장애물을 피하는 동선이 충돌하는 구간을 기록합니다.

처음부터 점프 높이·중력·속도를 모두 바꾸지 마세요. 같은 장애물을 넘는 장면으로 한 가지 변경의 영향을 비교하는 편이 원인을 찾기 쉽습니다.

화면 크기가 바뀔 때 볼 것

PC와 좁은 화면에서 캐릭터가 보이는 구간, 코인의 위치, 점프 버튼의 접근성을 확인합니다. 이미지 로딩 전에는 시작 버튼이 준비 상태이므로 캐릭터 PNG를 이동하거나 빠뜨리지 않아야 합니다. 게임 종료 후 다시 시작했을 때 이전 장애물과 점수가 남지 않는지도 함께 확인하세요.

python3 -m http.server 8080 --bind 127.0.0.1 --directory dist