이 게임의 규칙 한눈에 보기
패들 볼은 1970년대 아케이드 게임 퐁(Pong)의 방식을 따른 대결형 게임입니다. 화면은 480×320 픽셀의 캔버스이고, 컴퓨터는 왼쪽(검은 패들), 나는 오른쪽(파란 패들)을 맡습니다. 패들은 가로 10px, 세로70px로 화면 높이의 약 21.9%를 덮고, 공은 반지름 7px의 원입니다. 공이 상대 쪽 끝선을 완전히 지나가면 내가 득점하고, 내 쪽 끝선을 지나가면 컴퓨터가 득점합니다. 위·아래 벽은 득점 구역이 아니라 공이 반사되는 벽입니다. 5점을 먼저 낸 쪽이 이기므로 한 판은 최소 5번, 최대 9번(5:4)의 득점으로 끝납니다.
- 조작: 캔버스 위에서 마우스를 움직이면 패들의 중심이 커서의 높이를 따라갑니다. 터치 화면에서는 캔버스를 누른 채 위아래로 끌면 같은 방식으로 움직입니다. 키보드는 ↑/↓ 키를 누르는 동안 한 프레임(1/60초 기준)에 6px씩 움직입니다.
- 서브: 판이 시작되거나 득점이 나면 공은 화면 중앙에 놓이고 약 0.7초 뒤에 움직입니다. 공은 득점한 쪽을 향해 날아오므로, 내가 점수를 얻으면 다음 공은 내 쪽으로, 컴퓨터가 얻으면 컴퓨터 쪽으로 갑니다.
- 일시정지: 버튼, P 키, Esc 키로 멈출 수 있고, 다른 탭으로 이동하면 자동으로 멈춥니다.
- 새 게임: 점수와 공을 처음 상태로 되돌립니다. 최고 기록 같은 것은 저장하지 않으며 브라우저에 아무 것도 기록하지 않습니다.
공은 랠리가 길어질수록 빨라진다
처음 서브의 가로 속도는 1/60초당 4px입니다. 패들에 공이 맞을 때마다 가로 속도가 3%씩 커지는데, 내 패들이든 컴퓨터 패들이든 상관없이 모든 타격에 적용됩니다. 따라서 "랠리 횟수"가 곧 난이도입니다. 속도는 최대 12px까지만 커지도록 제한해 두었고, 이 한계는 38번째 타격에서 도달합니다. 아래 표는 두 패들 앞면 사이(426px)를 공이 가로지르는 데 걸리는 시간을 코드의 상수로 계산한 것입니다.
| 누적 타격 수 | 가로 속도(px/프레임) | 초당 이동(px, 60fps) | 패들 사이 통과 시간(ms) |
|---|---|---|---|
| 0회 | 4.00 | 240 | 1775 |
| 1회 | 4.12 | 247 | 1723 |
| 3회 | 4.37 | 262 | 1624 |
| 5회 | 4.64 | 278 | 1531 |
| 10회 | 5.38 | 323 | 1321 |
| 15회 | 6.23 | 374 | 1139 |
| 20회 | 7.22 | 433 | 983 |
| 30회 | 9.71 | 583 | 731 |
| 38회 | 12.00 | 720 | 592 |
처음에는 공이 반대편까지 가는 데 약 1.8초가 걸리지만, 20번 타격이 오가면 1초가 채 되지 않고 30번째에는 0.7초대로 줄어듭니다. 이 게임에서는 서브가 새로 시작될 때마다 속도가 처음 값으로 돌아갑니다. 속도 변화가 완만해서 처음엔 쉽게 느껴지지만, 긴 랠리 끝에 점수가 갈린다는 점을 기억해 두세요.
패들의 어디에 맞히느냐가 각도를 정한다
패들에 공이 맞으면 가로 방향은 반대로 뒤집히고, 세로 속도에는 "공이 맞은 높이 − 패들 중심 높이"를 패들 길이(70px)로 나눈 값에 4를 곱한 만큼이 더해집니다. 값을 새로 정하는 것이 아니라 기존 세로 속도에 누적한다는 점이 중요합니다. 맞은 위치별로 더해지는 세로 속도는 다음과 같습니다(위쪽이면 위로, 아래쪽이면 아래로 향하는 방향입니다).
| 패들 중심에서 떨어진 거리(px) | 더해지는 세로 속도(px/프레임) |
|---|---|
| 0 | 0.00 |
| 10 | 0.57 |
| 20 | 1.14 |
| 30 | 1.71 |
| 35 | 2.00 |
한 번의 타격으로 더해지는 세로 속도는 최대 ±2입니다. 하지만 누적되기 때문에 같은 방향으로 끝부분 타격이 이어지면 세로 속도는 커지고, 그대로 두면 공이 거의 수직으로 오가게 되므로 세로 속도는 ±7를 넘지 못하게 제한했습니다. 반대로 중앙에 맞히면 세로 속도가 바뀌지 않으므로 공의 궤적이 안정됩니다. 위쪽 끝에 맞힌 뒤 공이 위로 올라가다 벽에 한 번 튕겨 내려오는 각도를 만들면, 같은 공이 상대 쪽에 도착할 때 높이를 예측하기가 훨씬 어려워집니다.
컴퓨터를 이기는 방법
컴퓨터 패들은 공의 높이를 항상 따라가되, 한 프레임에 최대 3.4px(초당 약 204px)까지만 움직입니다. 비교하면 키보드 조작은 한 프레임에 6px(초당 360px)로 컴퓨터보다 빠르고, 마우스와 터치는 커서 위치로 곧바로 이동하므로 속도 제한이 없습니다. 컴퓨터는 공의 현재 높이만 보고 따라가며, 공이 어디로 갈지 예측하지는 않습니다. 이 구조에서 이길 수 있는 근거는 한 가지로 정리됩니다. 공의 세로 속도가 3.4px/프레임을 넘으면 컴퓨터 패들이 공의 높이를 따라잡지 못하고 뒤처진다는 것입니다.
- 서브 직후 공의 세로 속도는 -2~+2 사이 무작위 값이므로, 이것만으로는 컴퓨터를 앞지르기 어렵습니다.
- 같은 방향으로 끝부분 타격을 반복해 세로 속도를 3.4 이상으로 키우는 것이 핵심입니다.
- 위·아래 벽 반사는 방향만 바꿀 뿐 속도는 그대로입니다. 벽 반사 뒤에도 세로 속도가 유지되므로, 빠른 세로 속도를 한 번 만들어 두면 컴퓨터가 계속 뒤처진 채로 쫓아오게 됩니다.
- 키보드로 플레이할 때는 패들을 끝까지 옮기는 데 약 42프레임(약 0.7초)이 걸립니다. 미리 중앙 쪽에서 대기하세요.
- 수비는 공이 날아오는 선 앞에서 패들 중심이 아닌 원하는 부분으로 받는다는 생각으로 움직여야 합니다. 받는 위치가 곧 각도입니다.
컴퓨터가 뒤처지기 시작하는 세로 속도 표
컴퓨터는 매 프레임 공의 높이를 향해 최대 3.4px씩 움직입니다. 공의 세로 속도가 그보다 빠르면 프레임마다 차이가 쌓이고, 그 차이가 패들 길이의 절반(35px)을 넘으면 공의 중심이 패들 범위 밖으로 벗어나 막을 수 없게 됩니다. 아래 표는 벽에 튕기지 않고 직선으로 갈 때 이 한계에 이르기까지의 프레임 수입니다. 실제로는 벽 반사가 있으면 방향이 바뀌면서 차이가 일부 줄어들기도 해서, 어디까지나 계산상 어림값입니다.
| 공의 세로 속도(px/프레임) | 컴퓨터보다 빠른 정도 | 35px 뒤처지는 데 걸리는 프레임 | 걸리는 시간(ms) |
|---|---|---|---|
| 3.4 | 0.0 | 해당 없음 | 해당 없음 |
| 4.0 | 0.6 | 58.3 | 972 |
| 5.0 | 1.6 | 21.9 | 365 |
| 6.0 | 2.6 | 13.5 | 224 |
| 7.0 | 3.6 | 9.7 | 162 |
세로 속도 5에서는 약 22프레임(0.4초 안팎)이면 컴퓨터가 막지 못하는 위치까지 벌어지고, 패들 사이를 건너는 데 이미 약 100프레임이 필요하므로 충분한 시간입니다. 반면 3.4 이하의 완만한 각도는 컴퓨터가 계속 따라붙습니다.
한 판은 얼마나 걸리나
공이 패들 사이를 건너는 시간을 속도 증가 규칙으로 누적하면 랠리 길이별 소요 시간을 어림할 수 있습니다. 표의 값은 건너는 횟수만큼의 이동 시간 합이며, 서브 대기 0.7초와 패들 반응 여유는 포함하지 않았습니다.
| 가로지른 횟수 | 누적 이동 시간(초) |
|---|---|
| 1회 | 1.8 |
| 5회 | 8.4 |
| 10회 | 15.6 |
| 20회 | 27.2 |
| 30회 | 35.8 |
| 40회 | 42.3 |
예를 들어 5점 대 4점까지 가는 9득점 승부에서 각 랠리가 평균 5번만 오간다면 이동 시간만으로도 대략8.4초 × 9 ≈ 76초이고, 서브 대기가 9번이면6.3초가 더해집니다. 한 판이 보통 몇 분 안쪽에 끝난다는 뜻이므로 짧은 휴식 시간에 하기 좋습니다.
상황별 플레이 예시
랠리 초반(1~5번째 타격). 가로 속도가 4~4.64px로 느려서 패들 끝부분으로 일부러 받아 각도를 만드는 연습을 하기 좋은 구간입니다. 여기서 세로 속도를 3.4 이상으로 올려 두면 속도가 빨라지는 중반부에서 컴퓨터가 이미 뒤처진 상태가 됩니다.
랠리 중반(10~20번째 타격). 패들 사이 통과 시간이 10번째 타격 때 1321ms, 20번째 타격 때983ms로 줄어듭니다. 이때는 새로운 각도를 만들기보다 이미 만든 세로 속도를 잃지 않고 이어 가는 것이 중요합니다. 중앙으로 받아 세로 속도를 유지하면 공이 같은 궤적으로 오갑니다.
키보드만 쓸 때. 패들이 프레임당 6px로 움직이므로 위에서 아래 끝까지 가는 데 약0.7초가 걸립니다. 공이 빠른 구간에서는 이 이동 시간이 통과 시간보다 길어질 수 있어, 미리 중앙에 위치하고 짧은 이동만으로 받는 습관이 필요합니다.
흔한 실수
- 마우스를 캔버스 밖으로 벗어나게 두기: 마우스 이동 이벤트는 캔버스 안에서만 받으므로, 커서가 캔버스를 벗어나면 패들이 마지막 위치에서 멈춥니다.
- 매번 중앙으로만 받기: 안전하지만 각도가 바뀌지 않아 컴퓨터가 쉽게 막습니다. 안정적인 수비와 공격적인 끝부분 타격을 섞으세요.
- 공만 쳐다보고 속도 변화를 놓치기: 랠리가 길어질수록 반응 시간이 줄어듭니다. 앞의 표처럼 20회째에는 통과 시간이 1초 아래로 내려옵니다.
- 일시정지 중에 마우스를 움직이면 패들이 이동한다고 오해하기: 일시정지 중에도 마우스·터치 이벤트는 패들 위치를 갱신하지만 공은 멈춰 있습니다. 다시 시작하는 순간 위치가 달라져 있을 수 있으니 계속하기 전에 커서 위치를 확인하세요.
- 서브 직후 공이 바로 안 움직인다고 멈춘 것으로 착각하기: 득점 뒤에는 약 0.7초의 대기 시간이 있습니다. 이 사이에도 패들은 움직일 수 있으니 미리 위치를 잡아 두세요.
- 모바일에서 화면이 스크롤되는 것: 캔버스 위에서는 스크롤이 막혀 있지만, 캔버스 바깥을 만지면 페이지가 움직입니다.
이 게임의 한계
한 명이 컴퓨터를 상대하는 단일 모드만 있고, 난이도 선택이나 2인 대전은 없습니다. 속도는 시간 기준으로 보정해 화면 주사율이 60Hz가 아니어도 비슷한 속도로 진행되지만, 입력 지연이나 기기 성능에 따라 느낌은 다를 수 있습니다. 공의 처음 방향과 세로 속도는 Math.random으로 정해지는 단순 난수이며 보안용이 아닙니다. 점수와 승패는 저장되지 않습니다.
다른 아케이드 게임도 즐겨보세요
패들로 공을 튕겨 벽돌을 깨는 게임은 벽돌깨기 게임, 마우스로 퍽을 밀어 골대에 넣는 대결은 에어하키 게임, 공이 튀는 물리를 즐기려면핀볼 게임, 반응 속도를 측정하려면반응속도 테스트를 이용해 보세요. 움직이는 대상을 받아내는 연습에는바구니 받기 게임도 어울립니다.
자주 묻는 질문
컴퓨터가 너무 강하지 않나요?
컴퓨터 패들의 이동 속도는 한 프레임에 3.4px로 제한되어 있어서, 세로 속도가 그보다 빠른 공은 따라잡지 못합니다. 패들 끝부분으로 받아 세로 속도를 키우는 연습을 해 보세요.
모바일에서도 조작할 수 있나요?
네, 캔버스를 터치한 채로 위아래로 드래그하면 패들이 손가락 높이를 따라갑니다. 캔버스 안에서는 화면이 스크롤되지 않습니다.
공이 왜 점점 빨라지나요?
패들에 맞을 때마다 가로 속도가 3%씩 커지는 규칙 때문입니다. 서브가 새로 시작되면 처음 속도로 돌아가고, 속도는 프레임당 12px에서 더 커지지 않습니다.
방향키로 하면 페이지가 같이 움직이지 않나요?
게임이 진행되는 동안에는 ↑/↓ 키의 기본 동작(스크롤)을 막아 두었습니다. 게임이 끝나면 일반 스크롤이 다시 가능합니다.
점수나 기록이 저장되나요?
저장하지 않습니다. 새 게임을 누르거나 페이지를 새로 고치면 0:0에서 다시 시작합니다.
공이 패들 모서리에 걸쳐 지나가는 경우는 어떻게 판정되나요?
충돌은 공의 중심 높이가 패들의 위 끝과 아래 끝 사이에 있을 때만 성립합니다. 공의 반지름(7px)은 높이 판정에 포함되지 않으므로, 공이 패들 모서리를 살짝 스치는 것처럼 보여도 중심이 범위 밖이면 그대로 지나갑니다.
득점 뒤 공이 처음 속도로 돌아가는 이유는 무엇인가요?
득점이 나면 공을 새로 만들면서 가로 속도를 처음 값 4px/프레임으로 되돌립니다. 긴 랠리에서 쌓인 속도가 다음 판에 이어지지 않으므로, 점수를 잃어도 다시 천천히 시작할 수 있습니다.
탭을 바꿨다 돌아오면 게임이 어떻게 되나요?
다른 탭으로 이동하면 자동으로 일시정지되고, 돌아와서 계속하기 버튼이나 P 키로 다시 진행합니다. 프레임 사이 간격이 너무 길어도 한 번에 반영하는 이동 폭을 제한해서 공이 순간 이동하지 않도록 했습니다.
소리가 나지 않으면 어떻게 하나요?
효과음은 브라우저가 소리 재생을 허용한 뒤에 나옵니다. 기기가 무음이거나 브라우저에서 사이트 소리가 차단되어 있으면 들리지 않을 수 있으며, 소리가 없어도 게임 진행에는 영향이 없습니다.