내 게임에는 이미지나 사운드 파일이 하나도 없음. Opus가 코드로 카드 100장과 우주선 22대를 그렸고, 음악은 비행에 맞춰 실시간으로 작곡됨

Star Hop은 원탭 우주 게임이야. 네 우주선이 행성 주위를 돌다가, 화면을 탭해서 다음 행성 궤도로 착륙시키는 방식이지. 브라우저에서 무료로 즐길 수 있고, 가입도 필요 없어: https://www.star-hop.app/?utm_source=reddit&utm_medium=post&utm_campaign=claudeai-code

이 게임에는 이미지나 사운드 파일이 단 하나도 안 들어갔어. 모든 그림과 소리는 전부 Claude가 짠 코드야:

• 100장의 수집 가능한 파일럿 카드. Opus가 먼저 작은 SVG 키트(별, 하늘, 행성, 우주선, 엔진 자국, 불꽃)를 만들고, 각 카드를 3개의 시차 레이어와 프레임 밖으로 튀어나오는 주인공 캐릭터로 구성했어. 100장 전부 합쳐서 코드 용량이 152kB밖에 안 돼.

• 캔버스 패스로 그린 우주선 22대와, 색상을 바꿔주는 페인트 작업 19종.

• 브라우저에서 실시간으로 합성되는 생성형 음악 스코어 2개. 신나는 버전에서는 콤보가 쌓일 때마다 레이어(킥, 베이스, 박수, 아르페지오, 리드)가 추가되고, 하이퍼드라이브를 쓰면 전체 편곡이 나오며, 충돌하면 음악이 뭉개지면서 2마디 동안 연주가 빠지고, 섹터를 지날 때마다 템포가 올라가.

• 게임 전체 용량은 gzip 압축 기준으로 폰트 포함해서 0.5MB 정도야.

음악 관련 프롬프트(체코어로 썼던 걸 번역한 거야):

게임 음악을 좀 개선해볼까 해. 지금은 너무 우울하거든. 더 역동적이고 재밌게 만들고 싶어. 설정에서 원곡이랑 신나는 버전 중 하나를 고를 수 있게 하면 어떨까? Beat Saber 같은 느낌을 상상하고 있어. 게임 상황에 반응해서 음악이 빨라지고, 보너스도 나오고, 충돌하면 반응하는 그런 거. 무슨 말인지 알지? 어떻게 구현할 수 있을까? ElevenLabs 같은 걸 써야 하나?

Claude가 옵션을 쭉 나열해주길래 내가 "그냥 코드로 다 짜버리자"고 했더니, 30분 만에 바로 프로덕션에 적용됐어.

처음엔 잘 안 됐던 것도 있어: 카드에 SVG 필터(난기류 구름, 블러)를 썼더니 폰에서 기울일 때마다 계속 다시 렌더링하더라고. 그래서 지금은 각 레이어를 캔버스에 한 번씩만 그리게 바꿨어. 별이 깔린 배경도 안드로이드용 Firefox에서 비슷한 문제가 있어서 WebGL로 옮겼지.

Claude Code로 만든 1인 프로젝트야. 어떻게 만들었는지 궁금한 거 있으면 물어봐. 그리고 게임 할 때 꼭 소리 켜고 해봐. 네 콤보 소리가 들리나?