TL;DR
- 실제 도로 데이터를 플레이 가능한 팩맨 미로로 바꾸는 프로젝트로, 다섯 살 아들이 즐길 수 있도록 구글 맵스의 만우절 팩맨을 재현한 작품임.
- 도로 미로 생성, 유령·점·파워 점·점수·목숨, 장소 검색, 선택형 주소 프리셋, 브라우저 내 합성 아케이드 오디오를 제공함.
Vite,TypeScript,MapLibre GL JS,OpenStreetMap래스터 타일,Overpass API,Nominatim,Vitest를 사용함.- 정적 프런트엔드 앱으로 별도의 백엔드 서버가 필요하지 않으며, 도로와 지오코딩 데이터를 브라우저에서 가져오므로 클라이언트 네트워크 연결이 필요함.
- 팬 제작 헌정작이며 Google, Namco, Bandai Namco와 제휴·승인 관계가 없고, 원작의 상업용 에셋을 포함하지 않음.
팩맨 온 맵
- Google의 만우절 팩맨 게임인 Ms. PAC-Maps에서 영감을 받은 헌정 리메이크임.
- 다섯 살 아들이 즐길 수 있도록 제작함. 아들이 팩맨에 빠져 유튜브에서 옛 구글 맵스 버전을 발견하고 찾아 달라고 해, 해당 게임이 2015년 만우절 이벤트였으며 더는 플레이할 수 없다는 사실을 확인한 뒤 비슷한 경험을 제공하는 프로젝트를 만듦.
- 프로젝트 대부분을 AI와 함께 바이브 코딩 방식으로 제작함. 진지한 프로덕션 시스템으로 다루지 않았으며, 시니어 엔지니어로서도 재미와 아이를 위한 작업에 초점을 둠. 완벽하지 않고 모든 엔지니어링 세부 사항에 집착하지 않았지만, 작동하고 아이를 기쁘게 했다는 점이 목표임.
- 게임 플레이
- 실제 도로를 플레이 가능한 팩맨 보드로 바꾸며, 동네를 선택하고 도로 미로를 생성해 지도 위에서 바로 플레이하는 방식임.
기능
- 실제 도로 데이터를 이용한 플레이 가능한 팩맨 배치 생성
- 유령, 점, 파워 점, 점수, 목숨
- 영어와 정체자 중국어 지원
- 장소 검색 및 선택형 주소 프리셋 불러오기
- 브라우저에서 생성하는 아케이드풍 오디오
데모 진행 방법
- 플레이할 지역으로 지도를 이동함.
Generate Road Maze를 클릭함.Play를 누름.- 화살표 키 또는
WASD를 사용함.
기술 스택
ViteTypeScriptMapLibre GL JSOpenStreetMap래스터 타일Overpass API와NominatimVitest
로컬 개발
npm install로 의존성을 설치하고npm run dev로 개발 서버를 실행함.http://localhost:5173에서 앱을 엶.
빌드
npm run build로 빌드하고npm run preview로 미리 봄.- 프로덕션 파일은
dist/에 생성됨.
배포
- 정적 프런트엔드 앱이며 별도의 맞춤형 백엔드 서버가 필요하지 않음.
dist/를 다음 서비스에 배포할 수 있음.- GitHub Pages
- Netlify
- Vercel
- Cloudflare Pages
- 기타 정적 호스팅 또는 콘텐츠 전송 네트워크(CDN)
- 앱이 브라우저에서 공개 서비스에 직접 접속해 도로 데이터와 지오코딩 데이터를 가져오므로 클라이언트 측 네트워크 연결이 필요함.
선택형 주소 프리셋
public/addresses.txt가 있으면 드롭다운에 프리셋 장소를 불러옴.- 파일이 없으면 해당 선택 항목을 화면에서 숨김.
- 지원 형식은 다음과 같음.
LabelLabel|Search QueryLabel|lat|lng
테스트
npm run test로 테스트를 실행함.- 현재 테스트는 도로 자르기, 지도 생성, 충돌, 연속 점수 획득, 승리·패배 흐름을 다룸.
참고 사항
- 팬 제작 헌정 프로젝트임.
- Google, Namco, Bandai Namco와 제휴하거나 이들의 승인을 받은 프로젝트가 아님.
- 원작 팩맨의 상업용 에셋을 번들에 포함하지 않음.
- 번들에 포함된
level-intro.mid의 출처는 Khinsider임. - 포크해 개선하는 것은 환영하지만, 저장소의 모든 부분이 세련된 엔터프라이즈급 코드일 것으로 기대하지 말라는 안내임.
- 이 리메이크가 세계 어딘가의 길모퉁이에서 아이 한 명을 웃게 한다면 목적을 다한 것임.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요