prompt.txt

HTML5 Canvas를 사용하여 보석 매칭 퍼즐 게임을 제작하라. 다음의 상세 요구사항을 모두 구현할 것:

1. 게임 보드 구성
    - 8x8 크기의 기본 게임 보드 구현
    - 6가지 다른 모양과 색상의 보석 생성 (루비-빨강/사파이어-파랑/에메랄드-초록/다이아몬드-흰색/토파즈-노랑/자수정-보라)
    - 각 보석은 고유한 디자인과 반짝이는 애니메이션 효과 적용
    - 보석이 없는 빈 공간은 자동으로 위에서 새로운 보석이 떨어져 채워짐

2. 게임 메커닉스
    - 마우스 드래그로 인접한 보석끼리 위치 교환 가능
    - 수평 또는 수직으로 3개 이상 같은 보석이 연결되면 터지면서 점수 획득
    - 보석이 터진 후 상단의 보석들이 중력에 따라 자연스럽게 떨어지는 애니메이션
    - 연쇄 반응 발생 시 추가 점수 보너스 지급
    - 한 번의 이동으로 여러 개의 매치가 동시에 발생할 경우 콤보 점수 적용

3. 특수 효과
    - 4개 매칭: 특수 보석 생성 (주변 보석 모두 제거)
    - 5개 매칭: 무지개 보석 생성 (같은 색상 모두 제거)
    - T자 또는 L자 모양 매칭: 라인 클리어 보석 생성
    - 특수 보석들의 화려한 폭발 이펙트 구현

4. 시각적 요소
    - 보석별 반짝임 효과와 회전 애니메이션
    - 매칭 성공 시 반짝이는 파티클 효과
    - 콤보 발생 시 화면에 콤보 카운트 표시
    - 부드러운 보석 이동 및 교체 애니메이션
    - 보석 터지는 효과의 부드러운 페이드아웃

5. 사운드 시스템
    - 보석 이동/교체 시 효과음
    - 매칭 성공 시 효과음 (매칭된 보석 수에 따라 다른 사운드)
    - 특수 보석 생성/사용 시 특별한 효과음
    - 배경 음악 (옵션으로 켜고 끄기 가능)

6. 게임 시스템
    - 목표 점수 달성 방식의 레벨 시스템
    - 제한 시간 또는 제한 이동 횟수 선택 가능
    - 현재 점수, 목표 점수, 남은 시간/이동 횟수 표시
    - 하이스코어 저장 및 랭킹 시스템

7. UI/UX 요소
    - 시작 화면과 게임 설명
    - 일시정지 기능과 재시작 버튼
    - 현재 진행 상황 표시 (점수/레벨/목표)
    - 게임 오버 및 클리어 화면
    - 설정 메뉴 (사운드 조절, 난이도 설정)

8. 추가 기능
    - 힌트 시스템 (일정 시간 동안 움직임이 없을 경우 가능한 매치 표시)
    - 셔플 기능 (가능한 매치가 없을 경우 자동 셔플)
    - 연속 매칭 시 격려 메시지 표시
    - 게임 진행 상황 자동 저장

기술 요구사항:
- 모든 애니메이션은 requestAnimationFrame 사용하여 부드럽게 구현
- 터치스크린 지원을 위한 모바일 대응
- 브라우저 리사이즈에 대응하는 반응형 레이아웃
- 로컬 스토리지를 활용한 게임 데이터 저장

성능 최적화:
- 스프라이트 시트를 활용한 이미지 최적화
- 캔버스 더블 버퍼링으로 깜빡임 방지
- 오디오 리소스 프리로딩
- 불필요한 리렌더링 최소화"