직소 퍼즐 (Jigsaw Puzzle)

퍼즐 · 드래그 앤 드롭 · 순수 JavaScript

직소 퍼즐은 흩어진 이미지 조각을 끌어다 정확한 위치에 맞추는 복원형 퍼즐입니다. 난이도에 따라 조각 수가 달라지고, 완성 시간과 조각 수를 기반으로 점수가 계산됩니다.

게임 시작 흐름

• 시작 모달에서 난이도 버튼을 선택합니다(.diff-btn).
• 랜덤 이미지 6종 중 하나를 고른 뒤 로딩 스피너를 표시합니다.
• 이미지 로딩 완료 후 캔버스를 표시하고 게임을 초기화합니다.

보드/조각 구조

• 조각 데이터는 원본 영역(sx, sy, sw, sh)과 목표 위치( destX, destY), 현재 위치(x, y)를 함께 가집니다.
• 퍼즐 영역은 캔버스의 약 80%(가로) x 60%(세로)에 맞춰 가운데 정렬됩니다.
• 난이도별 조각 수는 gridSize x gridSize로, UI에 pieceDisplay로 표시됩니다.

드래그 조작과 스냅 판정

• 마우스/터치 시작 시 가장 위에 있는 미완성 조각부터 선택합니다.
• 드래그 중 조각이 캔버스 밖으로 완전히 나가지 않도록 이동 범위를 제한합니다.
• 놓을 때 목표 위치와 오차가 30px 이내면 자동 스냅되어 고정됩니다.
• 고정된 조각은 isSolved = true가 되어 다시 움직이지 않습니다.

진행률·렌더링·완성

• 배경에는 목표 슬롯 가이드 라인을 그려 조각 위치를 유도합니다.
• 조각이 맞춰질 때마다 solvedCount를 올리고, progressDisplay를 퍼센트로 갱신합니다.
• 진행률이 100%(모든 조각 고정)일 때 퍼즐 완성으로 처리합니다.

점수 계산과 랭킹

• 플레이 시간은 1초 단위 타이머(timeElapsed)로 측정됩니다.
• 최종 점수 공식: max(10, gridSize * gridSize * 1000 - timeElapsed * 20)
• 클리어 모달에서 랭킹 등록 시 saveGameScore("jigsaw", nickname, finalScore)를 사용합니다.
• 닉네임은 최소 2자이며, 등록 성공 또는 「처음으로」 선택 시 시작 모달로 돌아갑니다.

플레이 팁

• 외곽(모서리) 조각부터 맞추면 중앙 조각 기준점이 생겨 완성 속도가 빨라집니다.
• 비슷한 색 영역은 목표 슬롯 가이드 위로 가져가 경계선을 먼저 확인하는 것이 효과적입니다.
• 점수는 시간 페널티 기반이므로, 조각을 오래 들고 헤매기보다 빠른 재배치가 유리합니다.