이 설계는 데스크탑 및 모바일 환경에서 플레이 가능한 간단한 게임을 구현하는 것을 목표로 합니다. 게임은 캐릭터 조작, 시간 및 점수 집계, 레벨 안내 기능을 포함하며, Over Engineering을 피하고 최소한의 복잡도로 구현됩니다. npm run build 시 발생할 수 있는 오류는 개발 과정에서 자동으로 해결하여 안정적인 빌드가 이루어지도록 합니다.
-
UC1: 게임 시작 및 종료
- 사용자는 게임을 시작할 수 있습니다.
- 게임은 정해진 시간 또는 사용자 조작에 의해 종료될 수 있습니다.
- 게임 종료 시, 최종 점수와 플레이 시간이 표시됩니다.
-
UC2: 캐릭터 조작
- 사용자는 데스크탑(키보드) 및 모바일(터치) 환경에서 캐릭터를 조작할 수 있습니다.
- 캐릭터는 게임 화면 내에서 이동하거나 특정 행동을 수행할 수 있습니다.
-
UC3: 시간 및 점수 집계
- 게임이 진행되는 동안 플레이 시간이 실시간으로 집계됩니다.
- 게임 내 특정 이벤트(예: 아이템 획득, 적 처치) 발생 시 점수가 집계됩니다.
-
UC4: 레벨 안내
- 게임 종료 시 플레이 시간에 따라 현재 달성한 레벨과 다음 레벨까지 남은 시간을 안내합니다.
- 레벨 기준은 미리 정의된 시간에 따라 결정됩니다.
다음은 게임을 구성하는 주요 모듈과 각 모듈의 역할입니다.
- 역할: 게임의 전반적인 상태 관리, 게임 루프(Loop) 제어, 시간 및 점수 집계, 게임 시작/종료 로직을 담당합니다.
- 주요 기능:
- 게임 초기화 및 설정
- 메인 게임 루프 실행 (업데이트, 렌더링 호출)
- 플레이 시간 및 점수 업데이트
- 게임 오버 처리 및 결과(시간, 점수) 반환
- 레벨 시스템 관리 (현재 레벨 계산 및 다음 레벨 안내)
- 역할: 데스크탑(키보드) 및 모바일(터치) 입력을 처리하고, 이를 게임 로직이 이해할 수 있는 형태로 변환하여
Player모듈에 전달합니다. - 주요 기능:
- 키보드 이벤트 리스너 등록 및 처리
- 터치 이벤트 리스너 등록 및 처리
- 입력 이벤트를 추상화하여 게임에 필요한 액션(예: '위로 이동', '공격')으로 매핑
- 역할: 플레이어 캐릭터의 상태(위치, 속도, 애니메이션 등)를 관리하고,
InputHandler로부터 받은 입력에 따라 캐릭터의 움직임 및 행동을 제어합니다. - 주요 기능:
- 캐릭터의 물리적 속성(위치, 충돌 박스) 관리
- 입력에 따른 캐릭터 이동 및 행동 로직
- 캐릭터 애니메이션 상태 관리
- 다른 게임 오브젝트와의 상호작용 처리
- 역할: 게임의 시각적인 요소를 화면에 그리는 역할을 담당합니다. 이는 데스크탑/모바일 환경 모두에서 작동하도록 웹 표준 기술(Canvas, SVG, WebGL 등)을 활용합니다.
- 주요 기능:
- 게임 오브젝트(캐릭터, 배경, UI) 렌더링
- 애니메이션 프레임 관리
- 다양한 화면 크기와 해상도에 대한 반응형 처리
- 역할: 게임 내 사용자 인터페이스(UI) 요소를 관리하고 표시합니다. 현재 점수, 남은 시간, 게임 오버 화면, 레벨 안내 등 모든 UI 요소를 포함합니다.
- 주요 기능:
- 점수, 시간 표시 업데이트
- 게임 시작/종료 버튼 관리
- 게임 오버/클리어 화면 표시
- 레벨 안내 팝업/화면 표시
graph TD
A[GameCore] --> B(InputHandler)
B --> C(Player)
A --> C
A --> D(Renderer)
A --> E(UIManager)
C --> D
C --> A
E --> A
GameCore는 게임의 중심 허브 역할을 하며, InputHandler로부터 사용자 입력을 받아 Player의 행동을 지시하고, Renderer를 통해 화면에 그립니다. UIManager는 GameCore의 상태 변화에 따라 UI를 업데이트합니다.
npm run build 시 발생할 수 있는 오류를 해결하기 위한 방안은 다음과 같습니다.
- 정적 분석 도구 활용: ESLint, TypeScript 등을 사용하여 빌드 전 잠재적인 오류를 미리 감지하고 수정합니다.
- 단위 테스트 및 통합 테스트: 각 모듈 및 모듈 간 상호작용에 대한 테스트 코드를 작성하여 변경 사항이 기존 기능에 영향을 주지 않도록 합니다.
- 자동화된 CI/CD 파이프라인: 빌드 스크립트에 오류 발생 시 자동 재시도 및 로깅 기능을 포함하여 문제 해결 시간을 단축합니다.
- 의존성 관리: package.json의 의존성 버전을 명확히 관리하고, 취약점 검사를 통해 잠재적인 빌드 오류를 방지합니다.
- 언어: JavaScript (ES6+)
- 렌더링: HTML Canvas API (또는 Phaser.js, Pixi.js와 같은 경량 게임 프레임워크)
- 번들링: Webpack 또는 Vite
- 정적 분석: ESLint
- 테스트: Jest
다음 요구사항을 구현하기위한 개발 설계 진행하라.
통과 조건