픽셀 매치 (Pixel Match)

퍼즐 · 3매칭 스택 · 순수 JavaScript

픽셀 매치는 보드 위의 아이콘 타일을 선택해 하단 스택에 모으고, 같은 타일 3개를 맞춰 소거하는 퍼즐 게임입니다. 제한 시간과 스택 한도를 동시에 관리해야 하며, 스테이지가 올라갈수록 타일 수가 빠르게 증가합니다.

기본 규칙

• 보드에서 타일을 클릭하면 하단 스택으로 이동합니다.
• 스택 내부는 타입 기준 정렬(localeCompare)되고, 같은 아이콘 3개가 모이면 자동 제거됩니다.
• 3매칭 성공 시 +300점이 즉시 반영됩니다.

스택/타이머 제한

• 최대 스택 크기: MAX_STACK = 7
• 스택이 가득 차면 게임 오버입니다.
• 스테이지 제한 시간: 항상 90초
• 타이머가 0이 되면 시간 초과! 사유로 즉시 게임 오버 처리됩니다.

스테이지 증가 구조

• 타일 종류는 8개 이모지(TILE_TYPES)를 사용합니다.
• 각 스테이지에서 타입당 생성량은 (stage + 1) * 3개로 증가합니다.
• 즉 1단계는 타입당 6개, 2단계는 9개... 식으로 늘어나며 전체 밀도가 빠르게 높아집니다.

렌더링/선택 판정

• 게임 영역 크기에 맞춰 캔버스를 동적으로 리사이즈합니다.
• 타일은 layer 랜덤값으로 깊이 정렬되어 겹친 상태로 배치됩니다.
• 클릭 판정은 뒤에서 앞으로 순회해 “가장 위 타일”부터 선택되도록 처리합니다.
• 하단 스택 영역은 고정 박스로 표시되고 중앙 정렬로 타일이 채워집니다.

점수 계산과 클리어

• 보드 타일이 전부 사라지고 스택이 비어 있으면 스테이지 클리어입니다.
• 클리어 시 시간 페널티를 적용합니다: penalty = (TIME_LIMIT - timeLeft) * 10
• 최종 점수는 max(0, score - penalty)로 보정됩니다.
• 클리어 모달에서 랭킹 등록 후 종료하거나, 다음 단계로 계속 진행할 수 있습니다.

랭킹 등록

• 클리어/게임오버 모두 saveGameScore("pixelmatch", nickname, score)를 사용합니다.
• 닉네임은 최소 2자입니다.
• 게임 오버에서 “처음부터” 선택 시 1단계로 재시작하고 점수도 초기화됩니다.

플레이 팁

• 스택 한도 7이 핵심 리스크이므로, 같은 타일 2개가 모였을 때는 3번째를 우선 탐색하는 운영이 안정적입니다.
• 초반에 점수를 많이 확보해 두면 후반 시간 페널티를 받아도 누적 점수를 방어하기 쉽습니다.
• 겹친 타일은 상단 레이어부터 제거되므로, 막힌 조합을 풀기 위해 주변 상층 타일부터 정리하는 것이 좋습니다.