슬라이드 퍼즐 (Slide Puzzle)

퍼즐 · 이미지 분할 복구 · 순수 JavaScript

슬라이드 퍼즐은 분할된 이미지를 빈칸 이동 규칙으로 원래 위치에 복구하는 게임입니다. 난이도를 고를 수 있고, 이동 횟수가 적을수록 높은 점수를 받는 구조입니다.

게임 시작 흐름

• 시작 모달에서 난이도 버튼(.diff-btn)을 선택합니다.
• 선택한 난이도로 보드를 초기화하고, 랜덤 이미지가 6종 중 하나 선택됩니다.
• 이미지 로딩이 끝날 때까지 스피너를 보여 준 뒤 퍼즐을 생성합니다.

보드와 조각 구성

• 보드 크기는 gridSize x gridSize이며 마지막 칸은 빈칸 (empty)으로 둡니다.
• 각 조각은 원본 위치(data-orig-pos)와 현재 위치( data-curr-pos)를 별도로 가지고 이동 판정을 합니다.
• 배경 이미지는 backgroundSize와 backgroundPosition으로 조각별 위치를 정확히 나눠 표시합니다.

이동 규칙과 셔플

• 클릭한 조각이 빈칸과 상하좌우 인접(맨해튼 거리 1)일 때만 이동합니다.
• 이동 시 조각 위치와 빈칸 위치를 서로 교환하고 이동 횟수(moves)를 1 올립니다.
• 셔플은 빈칸 기준 이웃 조각을 무작위로 여러 번 이동시키는 방식( gridSize * gridSize * 15)이라 실제 플레이 가능한 상태를 유지합니다.

힌트(썸네일/미리보기)

• 썸네일(hintThumb)과 확대 미리보기(hintPreview)에 동일 이미지를 연결합니다.
• 터치 환경에서는 힌트 컨테이너 클릭으로 미리보기 토글이 가능하고, 바깥 클릭 시 닫힙니다.

클리어 판정과 점수

• 모든 조각의 원래 위치와 현재 위치가 일치하면 클리어입니다.
• 점수 공식: max(10, gridSize * gridSize * 1000 - moves * 15)
• 즉, 같은 난이도에서는 이동 수를 줄일수록 점수가 높고, 최소 10점은 보장됩니다.

랭킹과 재시작

• 클리어 모달에서 닉네임(최소 2자) 입력 후 saveGameScore("puzzle", nickname, finalScore)로 저장합니다.
• 등록 성공 시 시작 모달로 돌아가며, 「처음으로 돌아가기」도 시작 모달로 복귀합니다.

플레이 팁

• 초반엔 모서리와 가장자리 조각부터 고정하면 중반 난이도를 크게 줄일 수 있습니다.
• 힌트는 자주 보기보다 막히는 구간에서만 확인해야 이동 횟수 손실을 줄이기 좋습니다.
• 빈칸을 한쪽 영역에 오래 고립시키지 말고 주기적으로 중앙으로 되돌리면 풀이 루트가 넓어집니다.