조작된 3D 인형 뽑기 기계와 사기 블랙잭 테이블을 166KB HTML 파일 하나로 만들었습니다
I made a rigged 3D claw machine + crooked blackjack table into a single 166 KB HTML file
핵심 요약
Claude와 협업하여 물리 엔진과 블랙잭 로직을 포함한 166KB 용량의 웹 게임을 개발했습니다.
- 게임 메커니즘 — 인형 뽑기로 얻은 아이템으로 블랙잭 규칙을 유리하게 변경함
- 기술 스택 — 외부 에셋 없이 Three.js, Cannon.js, WebAudio를 사용하여 런타임에 생성
- 개발 방식 — Claude와 대화하며 설계, 몬테카를로 시뮬레이션으로 밸런스 조정
- 최적화 기법 — Cannon.js의 충돌 감지 패치를 통해 연산 부하를 획기적으로 줄임

Clawtastrophe - 브라우저에서 무료로 플레이하기: https://pgskizzes.itch.io/clawtastrophe
15달러 들고 오락실에 들어갔다. 인형 뽑기 기계에는 에너지 드링크, 위스키, 담배, 니코틴 파우치, 댑 펜, 즉석 복권, 현금 뭉치 같은 편의점 잡동사니들이 가득하다. 옆에는 6:5 배당에 소프트 17에서 히트하고, 절대 돈을 잃지 않는 블랙잭 테이블이 있다. 5,000달러를 모으면 기계를 살 수 있다. 그다음엔 야구 방망이를 챙겨라.
게임 방식
이 인형 뽑기는 진짜처럼 조작되어 있다. 한 판에 1달러. 대부분은 집게 힘이 약해서 올리다가 상품을 떨군다. 몇 번 하다 보면 가끔 제대로 잡힌다. 흔들리는 건 실제 진자 운동이라, 상품을 출구 쪽으로 흔들어서 떨어뜨리는 게 핵심이다. 상품마다 효과가 있다. 위스키, 파우치, 댑 펜은 운을 올려준다. 운이 좋으면 내가 버스트 당할 카드나 딜러의 좋은 카드를 다시 덱으로 돌려보낸다. 담배는 더블 다운, 스플릿, 서렌더를 해금해준다. 에너지 드링크는 히트한 걸 취소할 수 있게 해준다. 즉석 복권은 보통 아무 일도 안 일어난다. 룰 브레이커. 희귀 상품 5개를 모으면 테이블 규칙이 영구적으로 바뀐다. 3:2 블랙잭, 딜러가 소프트 17에서 스탠드, 홀 카드를 앞면으로 공개, 비기면 승리, 그리고 자동 셔플러가 진짜 덱으로 교체된다. 하이 리밋 룸. 입장료는 1,500달러고, 판돈이 더 크며 싱글 덱을 사용한다.
기본 테이블은 플레이어에게 -4%로 설계되어 있다. 기계에서 제대로 된 쓰레기들을 뽑아내야만 이길 수 있다.
기술 스택
index.html 파일 하나로 끝이다. 빌드 단계도, 번들러도, 에셋 파일도 없다. 렌더링은 three.js r128을 썼다. 원근감 전환이 가능한 정투영 등각 카메라를 사용했고, 4개의 카메라 프리셋과 자유 회전 기능을 넣었다. 모든 모델은 코드상에서 기본 도형으로 만들었고, 모든 텍스처(라벨, 펠트, 카드, 칩)는 런타임에 캔버스에서 직접 그린다. 물리 엔진은 cannon.js 0.6.2를 썼다. 집게 머리는 힌지가 달린 동적 갈고리가 있는 키네마틱 바디고, 리턴 스프링이 달린 토크 서보로 작동한다. 상품은 복합 구체 바디다. 좁은 범위 패치도 적용했다. cannon의 접촉 생성 방식이 기계가 꽉 찼을 때 단계당 15ms나 잡아먹길래, 단계당 한 번씩 도형의 월드 위치를 캐싱하도록 패치해서 기계가 안정됐을 때 0.2ms 정도로 줄였다. 사운드는 전부 WebAudio다. 모든 효과음과 두 가지 배경 음악(오락실, 카지노 라운지)은 오디오 파일 없이 전부 합성해서 만든다. 세이브는 localStorage를 쓴다. 블랙잭 엔진은 DOM이나 돈 관련 로직 없이 순수 모듈로 짰다. 게임과 Node 시뮬레이터가 같은 코드를 공유하니까, 내가 밸런스 잡은 확률 그대로 게임을 즐기면 된다.
제작 과정
Claude랑 대화하면서 만들었다. 디자인, 방향성, 밸런스 조정, 그리고 수많은 플레이 테스트는 내가 했고, 코드는 대부분 Claude가 짰다. 다음 몇 가지가 결정적이었다.
조사, 제안, 구현. 합의된 접근 방식 없이는 코드를 한 줄도 안 짰다. 덕분에 1,700줄짜리 코드가 스파게티가 되는 걸 막았다. 헤드리스 테스트. 소프트웨어 WebGL을 쓴 Playwright로 실제 게임을 돌렸다. 상품을 출구로 떨어뜨리고, 덱을 조작해서 핸드를 플레이하고, 변경 사항이 있을 때마다 콘솔 에러를 체크했다. 밸런스를 위한 몬테카를로 시뮬레이션. 수정할 때마다 수십만 번의 핸드를 시뮬레이션해서, 모든 운 수치와 규칙 변경이 하우스 엣지에 미치는 영향을 측정했다. 예를 들어, 댑 펜 하나당 플레이어에게 약 +1.6%의 이득이 있고, 3개를 모으면 기본 테이블의 손익분기점을 넘긴다. 언급할 만한 진짜 버그들. 카드가 잘못 펼쳐져서 구석 인덱스를 가리는 바람에 9가 6으로 읽히는 버그가 있었다. 카메라 팬은 프레임 레이트에 묶여 있었다. 인형들이 벽을 두껍게 만들고 가드가 다시 집어넣기 전까지는 유리창을 뚫고 계속 탈출했다.

