mobile-gaming

Mobile Gaming은 모바일 게임 광고 스타일에서 영감을 얻은 브라우저 기반의 퍼즐, 아케이드 및 시뮬레이션 게임 컬렉션입니다. 모든 게임은 오픈 웹에서 실행되며, 2D 게임플레이에는 Phaser 3를, 3D 렌더링에는 Three.js를 사용합니다. 라이브 빌드는 mobile-gaming.pages.dev에 게시되어 있으며, 게임 선택 허브 페이지가 각 타이틀을 실행하는 로비 역할을 합니다. 현재 이 세트는 크게 세 가지 그룹으로 나뉘어 총 13종의 게임을 제공합니다. 퍼즐 게임: - Brain Teaser — 무게별 아이템 분류, 미로 탐색, 논리 문제 등 10개 이상의 수제 레벨이 포함된 수평적 사고 퍼즐입니다. - Water Sort — 튜브 사이에 색깔 액체를 부어 분류하는 게임으로, 색상과 튜브 수가 늘어남에 따라 난이도가 상승합니다. - Parking Escape — 빨간색 자동차의 경로를 확보하기 위해 차량들을 옆으로 밀어내는 언블록(unblock) 스타일의 퍼즐입니다. - Pull the Pin — 물리 기반의 핀 퍼즐로, 장애물을 피하고 보상을 수집하며 공을 목표 지점으로 안내합니다. - Save the Character — 판단력과 반사 신경을 테스트하는 다지선다형 생존 시나리오입니다. - Bus Jam — 승객을 일치하는 버스에 분류하는 색상 매칭 퍼즐로, 경로 계획과 버스 정원 채우기가 핵심입니다. - Merge Games — 일치하는 타일을 병합하여 목표 티어에 도달하는 게임으로, 효율적인 병합을 위한 계획이 필요합니다. 아케이드 게임: - Crowd Runner — 수학 게이트를 통해 인원을 늘려 장애물을 피하고 보스를 물리쳐야 하는 오토 러너 게임입니다. - Bridge Race — 블록을 수집하고 AI 경쟁자와 경주하는 다리 건설 메커니즘의 3D 오토 러너입니다. - Giant Runner — 일치하는 오브를 수집해 보스전을 위한 파워업을 하는 3D 성장 중심 러너입니다. - Jelly Shift — 젤리 덩어리의 모양을 변경하여 벽을 통과하는 모양 변형 3D 러너입니다. - Makeover Run — 업그레이드 스테이션, 스타일 아이템, 런웨이 피날레가 포함된 패션 테마의 3D 오토 러너입니다. 시뮬레이션: - Satisfying Clean — 스와이프로 청소하는 ASMR 스타일의 휴식 게임입니다. 로컬 실행을 위해서는 Node와 npm이 필요합니다. 문서화된 명령어로 의존성 설치를 위한 npm ci, 개발 서버 시작을 위한 npm run dev, 프로덕션 빌드를 위한 npm run build, 빌드 미리보기를 위한 npm run preview가 있습니다. 테스트는 Vitest 단위 테스트를 위한 npm test, Playwright E2E 테스트를 위한 npm run test:e2e, 레벨 검증을 위한 npm run test:levels로 실행됩니다. 개발 서버는 http://localhost:5173/에서 작동하며 src/games/*/ 경로에서 게임을 자동으로 검색합니다. 프로젝트 구조는 src/games 하위의 각 게임별 디렉토리에 index.html, game.js, state.js, renderer.js, input.js, styles.css, levels.json 파일을 배치합니다. src/hub 디렉토리는 메인 로비와 선택기를 포함하며, src/shared에는 오디오, 점수 및 라이프사이클 처리를 위한 공유 유틸리티가 들어 있습니다. 별도의 levels/, public/, tests/, docs/ 디렉토리는 각각 레벨 JSON 파일, 매니페스트/서비스 워커/리다이렉트와 같은 정적 자산, 테스트 스위트 및 프로젝트 문서를 보관합니다. 테스트와 관련하여 README에는 게임 로직, 상태 관리 및 점수 계산을 다루는 121개의 단위 테스트 파일과 모바일 Chrome 및 Safari에서 실행되는 Playwright E2E 테스트가 있다고 명시되어 있습니다. 번들 크기는 JavaScript 3000KB, CSS 150KB 예산으로 제한되며, 레벨 검증 단계에서 모든 게임은 최소 3개의 레벨을 가져야 합니다. 배포는 프로덕션 URL인 Cloudflare Pages를 대상으로 하며, iad-ci 클러스터의 Argo Workflows가 CI/CD를 구동합니다. main 브랜치에 푸시하면 자동으로 빌드가 트리거되어 npm ci, npm test, npm run test:levels, npm run build가 순차적으로 실행됩니다. 재사용 가능한 빌드 및 배포 정의는 별도의 공개 GitOps 저장소인 jedarden/declarative-config에 저장되어 있습니다. 사용된 기술 스택은 2D 퍼즐 게임을 위한 Phaser 3, 3D 아케이드 러너를 위한 Three.js, 핫 모듈 교체(HMR) 기능을 갖춘 빌드 도구 Vite, 단위 테스트를 위한 Vitest, 크로스 브라우저 E2E 테스트를 위한 Playwright입니다. 또한 이 프로젝트는 프로그레시브 웹 앱(PWA)으로, 서비스 워커를 통한 오프라인 캐싱과 앱 매니페스트를 통해 모바일 기기에 설치하여 오프라인으로 플레이할 수 있으며, 모든 화면 크기에 대응하는 반응형 디자인이 적용되었습니다. 본 프로젝트는 MIT 라이선스 하에 배포됩니다.