공의 움직임부터 이해하기
이 벽돌깨기는 공이 단 하나이고, 공의 방향이 늘 가로 3px·세로 3px 조합이라는 점이 가장 큰 특징입니다. 공은 벽이나 벽돌, 패들에 닿을 때 한 축의 부호만 뒤집을 뿐 속도를 바꾸지 않으므로 이동 경로는 언제나 45도 대각선입니다. 패들의 가운데에 맞든 끝자락에 맞든 되튀는 각도가 같고, 공이 점점 빨라지지도 않습니다. 그래서 이 게임에서 패들 조작의 목표는 "각도 조절"이 아니라 "공이 내려올 자리를 미리 읽어 거기에 서 있기"입니다. 화면은 480×400 캔버스이고 게임은 초당 60번 갱신되며, 모니터 주사율이 달라도 속도는 같습니다.
코드에서 읽은 물리 수치
| 항목 | 값 |
|---|---|
| 공이 한 프레임에 가는 거리 | 가로 3px, 세로 3px (대각선 약 4.24px) |
| 초당 이동 거리 | 각 축 180px, 대각선 약 255px |
| 키보드 패들 속도 | 5px/프레임 = 초당 300px |
| 패들이 화면 끝에서 끝까지(키보드) | 80프레임 = 1.33초 |
| 공이 좌우 벽 사이를 한 번 건너는 시간 | 156프레임 = 2.60초 |
| 패들 높이에서 천장까지 올라가는 시간 | 약 125프레임 = 2.08초 |
| 공이 패들 폭(80px)을 가로지르는 시간 | 약 26.7프레임 |
키보드 패들 속도(초당 300px)가 공의 가로 속도(초당 180px)보다 빠르기 때문에 키보드만으로도 공의 낙하 지점을 늘 따라갈 수 있습니다. 마우스나 터치는 패들 중심이 포인터 위치로 즉시 이동하므로 속도 제약이 없습니다. 패들은 화면 밖으로 나가지 않도록 양쪽 끝에서 멈춥니다.
벽돌 배치와 도달 시간
벽돌은 8열×5줄, 모두 40개이고 한 개당 1점이라 만점은 40점입니다. 한 번 맞으면 사라지며 내구도가 2 이상인 벽돌이나 아이템은 없습니다. 벽돌 한 칸은 52×18px이고 사이에 4px 틈이 있으며, 전체 폭은 444px로 왼쪽 18px에서 시작해 오른쪽 462px에서 끝나 양쪽 여백이 같습니다. 아래 표는 공이 패들에서 튕긴 뒤 각 줄의 아랫면에 이르기까지의 시간입니다(공 중심 기준, 벽에 부딪히지 않고 직진한다고 가정).
| 위에서부터 | 색 | 세로 범위(px) | 도달 프레임 | 도달 시간(초) |
|---|---|---|---|---|
| 1번째 줄 | 빨강 | 40 ~ 58 | 108 | 1.79 |
| 2번째 줄 | 주황 | 62 ~ 80 | 100 | 1.67 |
| 3번째 줄 | 노랑 | 84 ~ 102 | 93 | 1.54 |
| 4번째 줄 | 초록 | 106 ~ 124 | 86 | 1.42 |
| 5번째 줄 | 파랑 | 128 ~ 146 | 78 | 1.30 |
공의 판정은 반지름 6px의 원이 아니라 중심점만 사용합니다. 중심이 벽돌 사각형 안에 들어와야 맞은 것으로 처리되므로 공이 벽돌 모서리를 살짝 파고든 뒤 튕겨 나오는 것처럼 보일 수 있습니다. 패들도 마찬가지로 공의 중심이 패들 폭(80px) 안에 있어야 받아낸 것으로 보고, 공이 패들 위로 겨우 걸친 정도라도 중심이 밖이면 놓친 것입니다.
판정 규칙 정리
- 공이 벽돌을 맞히면 그 벽돌이 사라지고 점수가 1 오릅니다. 이전 위치에서 공이 벽돌의 좌우 범위 밖에 있었다면 옆면을 맞은 것으로 보아 가로 방향이 뒤집히고, 범위 안에 있었다면 세로 방향이 뒤집힙니다. 한 프레임에 벽돌을 여러 개 걸쳐도 방향은 한 번만 바뀝니다.
- 좌우 벽과 천장에서는 해당 방향이 뒤집힙니다. 바닥은 벽이 아니라 구멍입니다.
- 공이 패들 높이에 이르렀을 때 중심이 패들 폭 안이면 위로 튕기고 효과음이 납니다. 아니면 계속 떨어져 바닥에 닿는 순간 기회가 하나 줄어듭니다.
- 기회는 3개입니다. 하나를 잃으면 공이 화면 아래 중앙에서 다시 시작해 항상 오른쪽 위 방향으로 올라가고, 패들도 가운데로 돌아옵니다. 벽돌은 그대로 남습니다.
- 벽돌을 모두 깨면 승리, 기회가 0이 되면 패배입니다. 이 게임은 최고 기록을 저장하지 않으며 브라우저에 아무 데이터도 남기지 않습니다.
- P 키나 일시정지 버튼으로 멈출 수 있고, 탭이 가려지는 동안에도 게임이 진행되지 않습니다. 진행 중에는 방향키로 페이지가 스크롤되지 않습니다.
패들을 얼마나 일찍 움직여야 하는가
공의 가로 속도는 프레임당 3px, 키보드 패들은 프레임당 5px입니다. 패들 중심이 낙하 지점에서 좌우 40px 안에만 있으면 받아내므로, 공이 13.3프레임 동안 가로로 이동하는 거리(= 40px)가 곧 허용 오차입니다. 아래 표는 패들이 키보드로 일정 거리를 움직이는 데 걸리는 시간과, 그 시간 동안 공이 가로로 가는 거리입니다. 마우스와 터치는 포인터 위치로 바로 이동하므로 이 표가 적용되지 않습니다.
| 패들 이동 거리(px) | 키보드 소요 프레임 | 소요 시간(초) | 그동안 공의 가로 이동(px) |
|---|---|---|---|
| 60 | 12 | 0.20 | 36 |
| 120 | 24 | 0.40 | 72 |
| 200 | 40 | 0.67 | 120 |
| 300 | 60 | 1.00 | 180 |
| 400 | 80 | 1.33 | 240 |
표에서 읽을 수 있는 것은, 패들이 공보다 항상 빠르다는 사실입니다. 같은 시간에 패들은 공보다 약 1.7배 멀리 갑니다. 그래서 낙하 지점이 패들에서 300px 떨어져 있어도 60프레임이면 도착하는데, 맨 아랫줄을 맞고 되돌아오는 가장 짧은 왕복도 156프레임이 걸립니다. 실제로 놓치는 경우는 속도 부족보다 낙하 지점을 잘못 읽었거나 입력 방식이 섞였을 때가 대부분입니다.
기회를 잃은 뒤 첫 경로
기회를 잃으면 공은 항상 (240, 370) 위치에서 가로 +3, 세로 -3으로 출발합니다. 이 경로를 코드의 갱신 순서(충돌 검사, 벽 반사, 이동)대로 계산하면, 공은 83프레임째에 오른쪽 벽(중심 x=474)에 한 번 닿은 직후 8열 4번째 줄의 벽돌을 처음 맞힙니다. 벽돌 8열의 오른쪽 끝은 462px이고 공이 올라가는 길은 그보다 오른쪽이라 맨 아랫줄에서는 막히지 않고 지나갑니다. 즉 기회를 잃은 직후 첫 벽돌은 늘 같은 자리에서 깨지므로, 이 시간(약 1.4초) 동안은 공을 걱정하지 않고 패들을 다음 낙하 지점 쪽으로 옮겨 둘 수 있습니다. 위 83프레임은 해당 벽돌이 남아 있고 그 앞 경로의 벽돌이 모두 있는 경우이며, 이미 깬 벽돌이 많을수록 경로가 달라집니다.
예시로 확인하는 공략
- 반응 시간 계산. 맨 아랫줄(벽돌 5번째 줄)을 맞고 돌아오는 공은 패들에서 이 줄까지 올라간 시간 1.30초만큼 걸려 돌아옵니다. 가장 빠른 왕복 시간이 약 2.6초라는 뜻이며, 이 시간 안에 가로로 약 468px를 이동한 공을 받아야 합니다.
- 키보드로 따라갈 수 있는가. 위 왕복 동안 키보드 패들은 최대 780px까지 움직일 수 있어 공의 가로 이동량보다 넉넉하므로 (벽에 튕기면 이동 거리는 더 줄어듭니다) 키보드만으로도 막을 수 있습니다.
- 점수 구성. 만점은 5줄×8열 = 40점이고 줄마다 점수 차이가 없습니다. 위쪽 줄이 더 비싸지 않으므로 아래쪽 줄부터 깨는 것이 위험이 적습니다.
실전 전략
- 공이 45도로만 움직이므로 두 번의 벽 반사를 머릿속으로 이어 그리면 낙하 지점을 예측할 수 있습니다. 벽 반사는 "펼쳐서" 계산하세요. 공이 벽에서 꺾이지 않고 직진한다고 보고 이동한 가로 거리를 공 중심이 움직일 수 있는 폭 468px 주기로 접어 넣으면 실제 위치가 나옵니다.
- 한 열을 위까지 뚫어 길이 생기면 공이 벽돌 위쪽 빈 공간으로 올라가 한동안 돌아오지 않습니다. 이때는 공이 천장과 벽에서 반사되는 경로를 따라 패들을 미리 이동시켜 둘 시간이 생깁니다.
- 공이 패들 높이에 닿기 전에 패들 중심을 낙하 지점에 먼저 맞춰 두세요. 공의 중심이 패들 폭 안에만 있으면 되므로 패들 가운데에 맞추면 좌우로 각각 40px의 여유가 생깁니다.
- 기회를 잃은 직후에는 공이 가운데에서 우상향으로 출발합니다. 이 방향을 알고 있으므로 첫 반사 지점은 항상 같은 쪽입니다.
- 마지막 한두 개 벽돌이 구석에 남으면 시간이 오래 걸립니다. 남은 벽돌의 위치에 따라 공이 오는 쪽을 미리 계산해 패들을 한쪽에 치우쳐 두는 편이 낫습니다.
입력 방식별로 달라지는 플레이
- 마우스. 포인터가 캔버스 위에 있는 동안 패들 중심이 포인터를 따라 즉시 이동합니다. 가장 정밀하지만 캔버스 밖으로 나가면 갱신이 멈추므로, 판 도중 커서가 경계를 넘지 않게 주의해야 합니다. 일시정지 중에는 포인터를 움직여도 패들이 움직이지 않습니다.
- 터치. 손가락을 누르는 순간과 끌고 가는 동안 같은 방식으로 패들이 따라옵니다. 손가락이 패들을 가리기 때문에 공 쪽을 보며 패들 가운데가 아니라 손가락 아래에 패들 중심이 있다고 생각하고 움직이면 됩니다.
- 키보드. 방향키를 누르고 있는 동안 프레임당 5px씩 이동합니다. 화면 끝에서 끝까지 1.33초이므로 짧은 거리를 정확히 맞출 때는 키를 짧게 끊어 누르는 편이 낫습니다. 창이 포커스를 잃으면 눌려 있던 키 상태가 해제되어 패들이 저절로 계속 움직이는 일은 없습니다.
흔한 실수와 한계
- 마우스를 캔버스 밖으로 벗어나면 패들이 마지막 위치에 멈춥니다. 캔버스 안에서 움직이세요.
- 키보드와 마우스를 동시에 쓰면 마지막 입력이 패들 위치를 덮어씁니다. 한 가지 방식으로 통일하세요.
- 패들 중앙으로만 받아도 각도가 달라지지 않으므로 "끝으로 쳐서 각도를 만든다"는 클래식 벽돌깨기의 요령이 통하지 않습니다.
- 레벨, 공 속도 증가, 파워업, 여러 개의 공은 없습니다. 이기면 끝이며 다음 단계로 이어지지 않습니다.
- 효과음은 벽돌을 깰 때, 패들로 받아낼 때, 승리와 패배 때 나옵니다. 소리를 켜 두기 곤란한 곳에서는 기기 음량을 줄이고 하세요. 벽이나 천장에 튕길 때는 소리가 나지 않으니 소리만으로 공의 위치를 파악하기는 어렵습니다.
- 난수는 쓰지 않습니다. 같은 입력이면 항상 같은 경로로 진행되는 결정적 게임입니다.
벽돌깨기의 유래
벽돌깨기 장르는 1976년 아타리(Atari)가 내놓은 아케이드 게임 "브레이크아웃(Breakout)"에서 널리 알려졌습니다. 패들, 공, 벽돌이라는 단순한 구성은 이후 수많은 변형과 모방작으로 이어졌습니다. 이 페이지의 게임은 그 원형을 단순화한 형태입니다.
자주 묻는 질문
모바일에서도 즐길 수 있나요?
네, 캔버스 위를 손가락으로 터치하거나 좌우로 드래그하면 패들이 따라옵니다. 캔버스 위에서는 화면 스크롤이 일어나지 않도록 막아 두었으니 스크롤은 캔버스 바깥에서 하세요.
공의 속도가 점점 빨라지나요?
아니요, 공은 처음부터 끝까지 같은 속도(각 축 프레임당 3px)로 움직입니다. 벽돌을 많이 깨도 빨라지지 않습니다.
패들의 어느 부분에 맞아도 같은 방향으로 튕기나요?
네, 공의 세로 방향만 뒤집히고 가로 속도는 그대로여서 패들의 위치와 관계없이 각도가 같습니다. 방향을 결정하는 것은 공이 오던 방향뿐입니다.
일시정지는 어떻게 하나요?
일시정지 버튼이나 P 키를 누르면 멈추고 다시 누르면 이어집니다. 다른 탭으로 이동해도 게임 시간이 흐르지 않습니다.
점수나 기록이 저장되나요?
저장되지 않습니다. 점수는 화면에만 표시되고 새로고침하면 처음부터 시작하며, 브라우저에 지울 데이터도 없습니다.
새 게임 버튼을 누르면 무엇이 초기화되나요?
점수 0, 기회 3개, 벽돌 40개 전부, 공과 패들의 위치가 모두 처음 상태로 돌아가고 일시정지도 풀립니다. 승리나 패배 뒤에도 같은 버튼으로 다시 시작합니다.
벽돌을 한참 못 깨고 공만 돌아다닐 때가 있는데 정상인가요?
정상입니다. 공은 항상 45도로 움직이고 패들에서 되튀는 각도도 일정하므로, 벽돌이 몇 개 남지 않으면 공이 남은 벽돌을 비껴 지나가는 경로가 이어질 수 있습니다. 이 게임에는 패들 위치로 각도를 바꾸는 규칙이 없지만, 받아낸 시점의 공 위치가 달라지면 이후 경로도 평행하게 옮겨지므로 같은 경로가 반복될 때는 공을 받는 가로 위치가 달라진 만큼 다음 경로도 달라집니다. 벽돌 하나가 사라질 때마다 판이 달라진다는 점도 함께 기억해 두세요.
화면 크기가 작은 휴대폰에서는 판정이 달라지나요?
캔버스는 480×400 내부 좌표를 쓰고 화면에서는 폭에 맞춰 줄어들 뿐이므로 게임 규칙과 속도는 같습니다. 터치 위치는 줄어든 비율만큼 보정해 내부 좌표로 바꿔 쓰므로 손가락 아래에 패들 중심이 놓입니다.
다른 클래식 게임도 즐겨보세요
뱀을 조종해 먹이를 먹는 스네이크 게임, 공을 튕겨 상대 쪽에 넣는 퐁 바운스 게임, 퍽을 쳐서 골을 노리는 에어하키 게임, 색 구슬을 쏘아 맞히는 버블 슈터 게임도 해 보세요.