브릭마스터 (Brick Master)

아케이드 · 캔버스 2D · 순수 JavaScript

벽돌 깨기 스타일의 게임입니다. 패들로 공을 튕겨 모든 벽돌의 status를 0으로 만들면 스테이지 클리어이며, 스테이지는 총 3단계입니다. 마지막 스테이지까지 벽돌을 모두 없애면 올 클리어로 처리됩니다. 공이 바닥으로 다 빠져 나가면 게임 오버입니다.

조작 방법

• 키보드: ArrowLeft / ArrowRight(또는 Left/Right 키)를 누르는 동안 패들이 좌우로 이동합니다. 키를 떼면 멈춥니다.
• 모바일: 화면의 좌·우 버튼은 pointerdown / pointerup / pointerleave로 같은 플래그(leftPressed, rightPressed)를 켜고 끕니다.

스테이지와 벽돌

• 스테이지 배열 stages는 단계마다 행·열 개수와 벽돌 색이 다릅니다. 1단계 rows: 3, cols: 6 (#00e5ff), 2단계 4 × 7 (#bb86fc), 3단계 5 × 8 (#ff007b).
• 벽돌 한 칸의 높이는 20px, 가로는 canvas.width / cols - 10에 맞춰 계산되고, 칸 사이 간격은 코드상 10px 패딩으로 배치됩니다. 모서리는 roundRect로 둥글게 그려집니다.
• 공이 벽돌 영역 안에 들어오면 해당 벽돌은 status: 0이 되고, 점수는 벽돌당 +10입니다.

공·패들·충돌

• 메인 루프는 requestAnimationFrame(draw)로 돌아갑니다. 시작 시 공 하나는 대략 하단 중앙에서 위로 향하며 dx: 3, dy: -3, radius: 7입니다.
• 좌·우 벽과 상단에 닿으면 속도 성분이 반전됩니다. 하단은 패들이 받아줍니다.
• 패들은 높이 10px, 기본 너비 90px, 한 프레임당 최대 7px씩 이동합니다. 캔버스 밖으로 나가지 않도록 경계가 잘려 있습니다.
• 패들에 맞을 때 dy가 반전되고, 10% 확률( Math.random() < 0.1)로 duplicateBall이 호출될 수 있습니다. 이때 dx만 반대인 복제 공이 추가되며, 화면 위 공은 최대 3개(balls.length < 3)까지 입니다.
• 벽돌과의 충돌 판정은 공 중심이 벽돌의 직사각형 안에 들어왔는지로 처리되며, 맞으면 dy만 반전됩니다.
• 패들을 놓쳐 공이 아래로 빠지면 해당 공은 배열에서 제거됩니다. 공이 0개가 되는 순간 게임 오버 모달이 뜹니다.

클리어 흐름과 랭킹

• 현재 스테이지 벽돌이 전부 파괴되면(every로 status === 0 확인) currentStage가 1 올라갑니다. 아직 남은 스테이지가 있으면 스테이지 클리어 모달이 뜨고, 「다음 단계로」를 누르면 다음 배치로 이어집니다.
• 마지막(3단계)까지 모두 깨면 ALL CLEAR! 모달과 함께 최종 점수가 표시됩니다. 게임 오버·올 클리어 모두에서 랭킹 등록이 가능하며, 닉네임은 공백 제외 최소 2자입니다.
• Firestore 전송 시 게임 ID는 brickmaster이며, saveGameScore 규칙(동일 닉네임일 때 최고 점수만 갱신 등)이 그대로 적용됩니다. 다시 시작은 점수·스테이지를 초기화한 뒤 바로 플레이를 재개합니다.

플레이 팁

• 공이 여러 개가 되면 패들 위치를 가장 위험한 공 쪽으로 먼저 맞추는 편이 안전합니다.
• 스테이지가 올라갈수록 행·열이 늘어나 벽돌이 많아지므로, 초반보다 모서리·측면을 먼저 줄이면 공이 아래로 떨어질 여지가 줄어듭니다.
• 랭킹을 남길 계획이면 올 클리어 직전에도 닉네임 입력이 필요하므로, 미리 쓸 이름을 정해 두면 편합니다.