브릭스택 (Brick Stack)

퍼즐 · 캔버스 2D · 순수 JavaScript

브릭스택은 12x20 보드에서 블록을 쌓아 가로줄을 지우는 퍼즐 게임입니다. 다음 블록 미리보기와 고스트 블록 표시를 활용해 낙하 위치를 계산하는 것이 핵심입니다.

조작 방법

• 키보드: 좌/우 이동, 아래 소프트 드롭, 위 회전, 스페이스 하드드롭.
• 모바일: 좌/우/아래 버튼은 길게 누르면 120ms 간격으로 연속 입력됩니다.
• 방향키·스페이스 기본 스크롤은 preventDefault로 막혀 플레이 중 화면이 움직이지 않습니다.

블록과 보드 구조

• 보드는 createMatrix(12, 20)로 생성됩니다.
• 블록은 I, L, J, O, Z, S, T 7종이며 색상이 각각 고정되어 있습니다.
• 현재 블록은 player.matrix, 다음 블록은 nextPiece로 관리하고, 우측 미리보기 캔버스에 표시합니다.

핵심 로직

• 자동 낙하는 dropInterval = 1000ms 기준으로 동작하며, 프레임 루프는 requestAnimationFrame(update)입니다.
• 회전은 전치+뒤집기 방식이며, 벽에 걸리면 좌우 오프셋을 바꿔가며 보정(벽 킥)합니다.
• 하드드롭은 충돌 직전까지 즉시 내린 뒤 고정합니다.
• 고스트 토글이 켜지면 현재 블록의 착지 예상 위치를 반투명으로 그립니다.

점수와 게임 오버

• 가득 찬 줄을 지울 때 rowCount * 10 점수로 누적되고, 연속 줄 클리어는 배수 보너스가 적용됩니다.
• 새 블록 스폰 직후 충돌하면 즉시 게임 오버 모달이 뜹니다(조용한 리셋 없음).
• 랭킹 등록은 saveGameScore("brickstack", nickname, finalScore)로 저장되며 닉네임 최소 2자입니다.

플레이 팁

• 고스트 블록을 켜고 하드드롭을 쓰면 실수를 크게 줄일 수 있습니다.
• 너비 12 보드는 중앙 정렬보다 양쪽 빈칸 관리가 중요합니다.
• 연속 라인 보너스를 노릴 때는 소프트 드롭보다 하드드롭 타이밍을 먼저 잡는 편이 유리합니다.