🚇 나는 실수로 브라우저에서 전체 3D Endless Runner 게임을 만들었다 (참고로 KB 단위)

Source: Dev.to – I Accidentally Built a Full 3D Endless Runner Game in the Browser (It’s in KBs btw)

소개

안녕 개발자들, 이샨트입니다 👋

시작하기 전에 간단한 질문:

• 왜 모든 웹 게임이 ~200 MB 정도가 되어야 할까요?
• 게임을 열자마자 내 폰이 제트 엔진 소리처럼 크게 나는 이유는?

그래서 또 다시 무책임한 일을 했어요…!

약 6 시간 동안, 커피와 부실한 판단에 힘입어 Metro Runner를 만들었습니다 — 전체가 브라우저에서 실행되는 풀‑3D 무한 러너입니다.

• Unity 없음.
• Unreal 없음.
• Godot 없음.
• 단지 Three.js, React, and Audacity만 사용했습니다. 💀

📦 Size Flex (Chrome Users Don’t Know This)

Metro Runner는 프로그레시브 웹 앱(PWA)입니다. 이는 다음을 의미합니다:

• Chrome에 이미 렌더링 엔진이 포함되어 있습니다.
• Three.js가 사이트 간에 공유됩니다.
• 모든 에셋은 CSS와 가벼운 리소스로 제공됩니다.

실제 다운로드 크기: 몇 백 KB에 불과합니다(예, KB, MB나 GB가 아닙니다).

다음과 같이 할 수 있습니다:

1. 사이트를 엽니다.
2. PWA를 설치합니다.
3. 홈 화면에서 게임을 실행합니다.

Chrome 사용자는 Chrome만 사용해도 이미 엔진의 절반을 다운로드한 사실을 잘 모르는 경우가 많습니다. (저도 그 중 한 명이에요! 😂)

🎮 Metro Runner란?

Metro Runner는 3D 무한‑러너 브라우저 게임으로 다음과 같은 특징이 있습니다:

• 3레인 이동
• 점프 / 슬라이드 메커니즘
• 진행에 따라 속도 증가
• 코인 및 파워‑업 수집
• 인‑게임 상점에서 업그레이드 가능
• 독특한 시각을 가진 여러 바이옴
• 특이한 UFO 납치 이벤트 (추후 자세히 💀)

Subway Surfers와 비슷하지만:

• 브라우저에서 바로 실행
• 완전 3D 그래픽
• 훨씬 더 미친

👉 플레이하기: [Insert game link] (실제 URL로 교체)

🧠 “게임 엔진을 사용했나요?”

No 😏

It’s built with React Three Fiber (Three.js) and:

• Custom game loop
• Manual collision logic
• Fake speed via world movement (delta‑time‑based motion)

The player barely moves forward; the world rushes toward you—a classic illusion that remains undefeated.

Source:

🚂 트레인, 램프, 그리고 기능이 된 버그 💀

고속일 때, 가끔:

• 플레이어가 트레인 램프에 부딪힘
• 넘어져서 튕겨 나가고 사망 💀

충돌 스위프, 정렬 미세 조정, 불법 속도 디버깅 등을 시도했음.

효과가 있었나요? 아니요.

그래서 모든 정상적인 개발자가 하는 대로 했습니다: 버그를 고칠 수 없으면 — 게임플레이로 승격시키자.

🧠 스토리 업데이트

일부 트레인 램프는 코치와 약간 어긋나 있습니다. 고속에서는 부실한 점프가 스킬 기반 페널티(떨어져서 게임 오버)로 이어집니다.

이제는 버그가 아니라 의도된 요소입니다.

🚂 기차 시스템 (통칭 고통 발생기)

• 일반 기차 – 정지 + 이동
• 트리플‑트레인 램프 구간 (~10%) – 모든 차선 차단, 위에 램프, 대량 코인 보상
• 기차 점프 구간 (~10%) – 차선을 가로질러 기차 사이를 점프; 한 번 놓치면 메뉴로 복귀 💀

기차는 실제 충돌—유령 클리핑 없음.

👽 외계인 납치 이벤트 (여기서 제어를 잃음)

런 중에 발생하는 랜덤 이벤트:

1. UFO 등장
2. 초록빛과 트랙터 빔
3. 화면이 어두워짐
4. 새로운 바이옴으로 텔레포트
5. +25 무료 코인 및 일시적인 무적

현실적인가요? 아니요.
재미있나요? 당연히. 🛸

⚡ 파워‑업 (네, 그 입자들은 실제입니다)

그 입자들(바람 자국, 스피드 라인)은 단순히 “시각 효과”가 아니라 속도 착각을 판매합니다. 제트팩 입자는 제트팩에서 나오는 것이며, 분위기에서 나오는 것이 아닙니다.

🏪 Shop System (I Went Too Far)

• 코인으로 파워‑업을 구매
• 자석 지속 시간 업그레이드 (최대 6단계)
• 시작 파워‑업 선택

인벤토리는 localStorage를 통해 유지됩니다. 탭을 닫았다가 나중에 다시 열면, 당신의 그라인드가 저장됩니다. 😤

🌍 생물군계

• 🚇 지하철
• 🏙️ 도시
• 🌲 숲

생물군계 전환은 강제이며, 따라서 실행이 복사‑붙여넣기처럼 느껴지지 않습니다.

🥚 Easter Egg

메뉴에서 게임 제목을 클릭하세요.
그게 전부예요 😏

🔧 Tech Stack (a.k.a. Bad Decisions)

• React + TypeScript
• Three.js (via React Three Fiber)
• 맞춤 충돌 로직
• 파티클 시스템
• PWA (설치 가능, 오프라인 친화적)
• localStorage를 통한 저장된 상태

엔진도, 물리 라이브러리도 없고—그냥 수학, 타이밍, 그리고 감각만.

🧠 왜 이걸 만들었는가

I wanted to see: 실제 3D 게임이 브라우저에서 편안하게 실행될 수 있을까… 그리고 여전히 좋은 느낌을 줄 수 있을까?

Turns out — yes. And it fits in KBs, which still feels illegal.

🙌 피드백

댓글, 제안 등을 자유롭게 남기거나, 혹은 “와!”라고 말해 주세요.

조롱 환영

플레이한다면:

• 당신이 어디서 죽었는지 알려 주세요.
• 어떤 램프가 당신을 배신했는지 알려 주세요.
• UFO 점프가 당신을 겁먹게 했는지 알려 주세요.

이제 이것이 “그냥 간단한 실험”이었다는 척하면서 양해를 구합니다.

— Ishant 🖤