NEON CIRCUIT

빠르게 달리는 것보다 코너를 읽는 게임

NEON CIRCUIT은 여섯 대의 차량이 세 바퀴를 도는 레이싱 게임입니다. 직선에서는 속도를 올리고, 코너에서는 도로 밖으로 밀려나지 않도록 조향과 감속을 함께 사용합니다. 부스트는 무제한 가속 버튼이 아니라 남은 게이지와 현재 속도를 함께 고려하는 자원입니다.

자동 가속을 켜면 조향에 집중하기 쉽습니다. 코너의 변화를 먼저 익힌 뒤 수동 가속으로 바꾸면, 같은 길에서 입력을 하나 더 관리할 때 판단이 어떻게 달라지는지 비교할 수 있습니다.

화면과 주행 계산을 나누어 읽기

dist/game.js에는 Race 클래스, 키 입력, 화면 상태와 오디오 연결이 들어 있습니다. dist/renderer.js는 도로와 차량을 그리는 역할을 맡습니다. index.html은 메뉴·기록판·버튼, style.css는 배치를 담당합니다.

화면이 원근감 있게 보이더라도 차량의 진행 거리는 별도의 수치입니다. distance는 트랙 진행, x는 좌우 위치, speed는 속도를 나타냅니다. 먼저 이 세 값이 언제 바뀌는지 읽으면 도로 그림을 모두 이해하지 않아도 조작의 원리를 따라갈 수 있습니다.

가속보다 중요한 것은 제한 조건

Race의 maxSpeed 기본값은 2200입니다. 이 값은 내부 계산 단위이며 화면에 표시되는 km/h와 같은 숫자가 아닙니다. curveAt()은 진행 거리에 해당하는 커브를 구하고, step()은 가속·브레이크·노면 밖 감속과 차량 간 상호작용을 처리합니다.

주행 거리가 결승선을 넘었는지를 검사할 때도 한 프레임의 위치만 보는 대신 이전 거리와 새 거리를 비교합니다. 빠른 이동에서 특정 지점을 건너뛰는 문제를 다루는 예로 읽어볼 만합니다.

직접 바꿔볼 과제: 빠른 차가 더 쉬울까요?

1. 원본 복사본을 보관하고 maxSpeed만 소폭 올린 버전을 만듭니다.
2. 같은 코너에서 도로를 벗어나는 빈도와 조향 여유를 비교합니다.
3. 다음에는 속도 대신 트랙 생성 부분의 곡률 계수 하나만 바꿉니다.

속도와 곡률을 동시에 바꾸면 무엇이 주행감을 바꿨는지 구분하기 어렵습니다. 화면의 기록만 보는 대신 코너 진입 직전의 속도와 조향 방향을 함께 메모해 보세요.

실행하면서 확인할 부분

시작 카운트다운 뒤 가속이 되는지, 일시정지 중 기록이 멈추는지, 재시작 시 랩과 시간이 초기화되는지 확인합니다. 최고 기록은 브라우저의 neon-circuit-best 저장 항목을 사용하므로 다른 기기와 공유되는 온라인 순위가 아닙니다.

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