## 프로젝트 개요 HTML, CSS, JavaScript와 Canvas를 사용해 만드는 벽돌깨기 게임 레시피입니다. 패들을 좌우로 움직여 공을 튕기고, 모든 벽돌을 제거하면 클리어하는 단순하지만 완결성 있는 구조로 구성합니다. ## 필수 기능 * Canvas 기반 게임 화면 구현 * 패들 좌우 이동 구현 * 공의 이동, 반사, 속도 처리 * 벽돌 배열 생성 및 개별 충돌 판정 * 점수와 목숨 시스템 * 게임 시작 / 진행 / 종료 상태 관리 * 재시작 기능 ## 선택 기능(보너스) * 공 속도 점진적 증가 * 벽돌 색상/내구도 차등화 * 효과음 추가 * 난이도 단계 추가 * 스테이지별 벽돌 배치 변경 ## 학습 목표 * Canvas 렌더링과 애니메이션 루프 이해 * AABB 충돌 또는 원-사각형 충돌 처리 이해 * 상태 기반 게임 설계 이해 * 입력 처리와 프레임 갱신 구조 이해 ## 제약 조건 * 바닐라 HTML, CSS, JavaScript 사용 * 외부 게임 엔진 사용 금지 * 최소한의 라이브러리만 허용 * 모바일에서는 터치 입력을 선택 지원 ## 구현 상세 ### 1\. 화면 크기와 초기값 * 캔버스는 480x640 또는 반응형 기준으로 시작 * 패들 너비와 높이를 고정값으로 두고 시작 * 공은 작은 원 형태로 정의 * 벽돌은 행/열 기반 그리드로 생성 ### 2\. 상태 관리 * `ready`, `playing`, `paused`, `gameover`, `clear` 상태 분리 * 게임 시작 전 공은 패들 위에 고정 * 시작 버튼 또는 스페이스바로 진행 ### 3\. 패들 로직 * 좌/우 화살표 또는 A/D 키 입력 처리 * 패들이 화면 밖으로 나가지 않도록 clamp 처리 * 이동 속도는 프레임마다 누적 ### 4\. 공 로직 * 공은 x/y 좌표와 vx/vy 속도를 가짐 * 벽과 충돌 시 x 또는 y 속도 반전 * 패들과 충돌 시 y 속도 반전, 충돌 위치에 따라 x 속도 조정 * 바닥에 떨어지면 목숨 1 감소 ### 5\. 벽돌 로직 * 벽돌마다 `alive` 상태 또는 `hp` 값 부여 * 공과 벽돌 충돌 시 벽돌 제거 * 점수 증가 및 효과 표시 * 모든 벽돌이 제거되면 클리어 ### 6\. UI 로직 * 점수, 목숨, 상태 문구 표시 * 시작/재시작 버튼 제공 * 모바일용 최소 안내 문구 추가 ### 7\. 난이도 조정 * 공 속도는 클리어 스테이지마다 증가 * 벽돌 수를 스테이지별로 늘리거나 배치를 바꿈 * 패들 너비를 점차 줄이는 방식도 가능 ## 기대 결과 * 패들을 움직여 공을 정확히 튕길 수 있음 * 벽돌이 하나씩 파괴되며 점수가 증가함 * 목숨이 0이 되면 게임 오버가 됨 * 모든 벽돌을 제거하면 클리어 상태가 됨 ## 프롬프트 레시피 ### STEP 1 - 게임 골격 만들기 Canvas, 패들, 공, 벽돌 배열, 점수, 목숨 UI가 있는 벽돌깨기 게임의 기본 골격을 만들어주세요. 바닐라 HTML, CSS, JavaScript로 작성하고, 외부 엔진은 사용하지 마세요. 게임 상태는 ready, playing, gameover, clear로 나누고, 시작 버튼을 누르면 진행되도록 해주세요. ### STEP 2 - 충돌과 점수 구현 공이 벽, 패들, 벽돌과 충돌하는 로직을 구현해주세요. 공이 패들에 맞으면 반사되도록 하고, 벽돌은 충돌 시 제거되며 점수가 올라가야 합니다. 바닥에 공이 떨어지면 목숨이 줄어들고, 목숨이 0이면 게임 오버가 되도록 해주세요. ### STEP 3 - 완성도와 재시작 재시작 버튼을 추가하고, 게임 오버 또는 클리어 후 다시 시작할 수 있게 해주세요. 공 속도 증가, 벽돌 배치 변화, 간단한 효과음 또는 색상 변화 같은 보너스 요소도 추가해주세요. 모바일에서는 터치로 패들을 움직일 수 있으면 좋습니다.