GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

벽돌깨기 게임 만들기 9가지 — 반사각은 맞은 위치가 정한다

· Godrich · 9종 · 11분 읽기

gameSCSS바닐라 JS클릭게임 · 놀이

벽돌깨기 게임 만들기는 공 하나가 어디에 맞느냐에 따라 결과가 갈리는 아홉 장면짜리 캔버스 데모다. 패들 정중앙이 아니라 끝으로 쳐라 — 맞은 위치 값이 반사각을 정한다.

드래그한 위치를 뒤따라가는 패들01 brick-breaker-paddle-drag-lerp 맞은 위치로 반사각이 갈라지는 공02 brick-breaker-ball-reflect-hit-angle 충돌 판정마다 점수가 오르는 벽돌 줄03 brick-breaker-collision-score 여러 번 맞아야 부서지는 금 가는 벽돌04 brick-breaker-crack-multihit 중력 값대로 떨어지는 아이템을 받는 패들05 brick-breaker-powerup-gravity-catch 속도 값만큼 길어지는 공의 잔상06 brick-breaker-trail-speed-afterimage 연속 타격마다 배수가 오르는 콤보 값07 brick-breaker-combo-multiplier-streak 벽에 닿으면 각도가 뒤집히는 튕김08 brick-breaker-wall-bounce-mirror 벽돌이 모두 사라지면 터지는 입자09 brick-breaker-clear-particle-burst

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 개는 무작위로 늘어놓은 목록이 아니다. 01은 패들이 커서를 뒤따르는 기본 조작을 보여주고, 02는 그 조작으로 친 공이 어디로 튕기는지를 정하는 핵심 규칙이다. 03·04는 그 공이 벽돌에 닿았을 때 점수와 내구력이 어떻게 바뀌는지를, 05·06·07은 아이템·잔상·콤보로 화면에 층을 하나씩 얹고, 08은 좌우 벽에서의 반사를, 09는 레벨이 끝나는 순간을 마무리한다.

맞은 위치 값 하나가 반사각·중력·연속 타격까지 함께 가른다

아홉 개 모두 사각 범위가 겹치는 순간만 보는 aabb 판정과, 범위를 벗어나지 않게 붙잡는 clamp 함수 위에 서 있다. 2D 충돌 감지 문서가 설명하는 사각 판정 방식 그대로이고, 이 두 함수는 css 게임 제작에서 반복해서 재사용되는 조합이다. 이 위에서 02는 패들 중앙과의 거리 값을 반사각으로, 05는 각자의 값을 중력 낙하 속도로, 07은 연속 성공 횟수를 배수로 바꿔 셋 다 "값 하나가 결과를 가른다"는 같은 계산 축 위에 있다.

01드래그한 위치를 뒤따라가는 패들

패들이 커서를 그대로 따라가지 않고, 목표 위치와의 차이 값을 매 프레임 조금씩 줄이며 뒤따라가 관성이 붙은 것처럼 보인다. 게임 인트로에서 조작감을 먼저 보여줄 때 이 지연이 손맛을 만든다.

드래그한 위치를 뒤따라가는 패들
새 창에서 열기

01 · 드래그한 위치를 뒤따라가는 패들 — 측정 누적면적 30.092% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

PADDLE_LERP_FACTORdragGapPxrebuildLevel
  function paddleStep(dt) {
    if (keys.left) paddle.target -= 160 * dt;
    if (keys.right) paddle.target += 160 * dt;
    paddle.target = clamp(paddle.target, WALL + paddle.w / 2, LW - WALL - paddle.w / 2);
    var goal = paddle.target - paddle.w / 2;
    var k = 1 - Math.pow(1 - PADDLE_LERP, dt * 60);
    paddle.x += (goal - paddle.x) * k;
    paddle.x = clamp(paddle.x, WALL, LW - WALL - paddle.w);
  }

측정: 누적면적 30.1% · 강도 평균 80.4 · 23/23 프레임에서 움직였다.

02맞은 위치로 반사각이 갈라지는 공

공이 패들 중앙에 맞을 때와 끝에 맞을 때 반사각 값이 달라져, 같은 속도로 들어와도 맞은 위치에 따라 매번 다른 방향으로 튕겨 나간다. 이 편 전체가 공유하는 핵심 규칙이라 코어 플레이 화면에 어울린다.

맞은 위치로 반사각이 갈라지는 공
새 창에서 열기

02 · 맞은 위치로 반사각이 갈라지는 공 — 측정 누적면적 35.241% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

MAX_REFLECT_ANGLElastHitPosguideTimer
  function onPaddleHit() {
    var hitPos = clamp((ball.x - (paddle.x + paddle.w / 2)) / (paddle.w / 2), -1, 1);
    var angle = hitPos * MAX_REFLECT_ANGLE;
    var speed = Math.sqrt(ball.vx * ball.vx + ball.vy * ball.vy);
    ball.vx = Math.sin(angle) * speed;
    ball.vy = -Math.abs(Math.cos(angle)) * speed;
    ball.y = PADDLE_Y - BALL_R - 0.5;
    spawnFlash(ball.x, PADDLE_Y);
    lastHitPos = hitPos; lastAngle = angle; guideTimer = 0.4;
  }

측정: 누적면적 35.2% · 강도 평균 103.6 · 23/23 프레임에서 움직였다.

03충돌 판정마다 점수가 오르는 벽돌 줄

공의 사각 범위와 벽돌의 사각 범위가 겹치는 순간을 aabb로 판정해 그 벽돌만 사라지고, 점수는 지금까지 파괴한 벽돌 수(cleared)에 벽돌당 점수(SCORE_PER_BRICK)를 다시 곱해 계산된다. 맞을 때마다 그냥 더하는 게 아니라 누적 파괴 수를 기준으로 매번 새로 구하는 값이다.

충돌 판정마다 점수가 오르는 벽돌 줄
새 창에서 열기

03 · 충돌 판정마다 점수가 오르는 벽돌 줄 — 측정 누적면적 30.576% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

SCORE_PER_BRICKscoreaabb
    for (var i = 0; i < bricks.length; i += 1) {
      var b = bricks[i];
      if (b.alive && aabb(ball.x - BALL_R, ball.y - BALL_R, BALL_R * 2, BALL_R * 2, b.x, b.y, b.w, b.h)) {
        ball.vy = -ball.vy;
        onBrickHit(b);
        break;
      }
    }
    if (ball.y - BALL_R > LH) onMiss();

측정: 누적면적 30.6% · 강도 평균 86.5 · 23/23 프레임에서 움직였다.

04여러 번 맞아야 부서지는 금 가는 벽돌

벽돌이 한 번에 사라지지 않고 맞은 횟수 값이 쌓일 때마다 금이 하나씩 더 그어지다가, 그 값이 한계(BRICK_HIT_LIMIT)에 닿으면 완전히 부서진다. 강한 장애물을 표현하고 싶을 때 쓴다.

여러 번 맞아야 부서지는 금 가는 벽돌
새 창에서 열기

04 · 여러 번 맞아야 부서지는 금 가는 벽돌 — 측정 누적면적 30.507% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

BRICK_HIT_LIMITcrackLinesdrawBrick
  function crackLines(b) {
    ctx.strokeStyle = 'rgba(23,20,26,.55)';
    ctx.lineWidth = 1;
    for (var i = 0; i < b.hits; i += 1) {
      var cx = b.x + b.w * (0.25 + i * 0.22);
      ctx.beginPath();
      ctx.moveTo(cx, b.y + 1);
      ctx.lineTo(cx + 3, b.y + b.h / 2);
      ctx.lineTo(cx - 2, b.y + b.h - 1);
      ctx.stroke();
    }
  }

측정: 누적면적 30.5% · 강도 평균 82.2 · 23/23 프레임에서 움직였다.

05중력 값대로 떨어지는 아이템을 받는 패들

벽돌이 사라진 자리에서 아이템이 나타나는데, 파괴 순번(dropSeq)이 짝수일 때만 등장해 벽돌 두 개 중 하나꼴로 떨어진다 — 매번 나오면 화면이 아이템으로 뒤덮이기 때문이다. 중력 가속 값만큼 점점 빠르게 떨어지다 패들 사각 범위와 겹치는 순간 효과가 적용된다.

중력 값대로 떨어지는 아이템을 받는 패들
새 창에서 열기

05 · 중력 값대로 떨어지는 아이템을 받는 패들 — 측정 누적면적 28.728% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

GRAVITY_ACCELpowerupscatchFlash
  function stepExtra(dt) {
    if (catchFlash > 0) catchFlash -= dt;
    for (var i = powerups.length - 1; i >= 0; i -= 1) {
      var p = powerups[i];
      p.vy += GRAVITY_ACCEL * dt;
      p.y += p.vy * dt;
      if (aabb(p.x - 4, p.y - 4, 8, 8, paddle.x, PADDLE_Y, paddle.w, PADDLE_H)) {
        catchFlash = 0.35;
        powerups.splice(i, 1);
      } else if (p.y - 4 > LH) {
        powerups.splice(i, 1);
      }
    }
  }

측정: 누적면적 28.7% · 강도 평균 82.1 · 23/23 프레임에서 움직였다.

06속도 값만큼 길어지는 공의 잔상

공의 속도 값이 커질수록 뒤에 남는 잔상 개수와 길이가 함께 늘어나, 느릴 때는 잔상이 거의 없다가 빨라지면 꼬리처럼 길어진다. 빠른 구간에서 속도감을 강조하고 싶을 때 쓴다.

속도 값만큼 길어지는 공의 잔상
새 창에서 열기

06 · 속도 값만큼 길어지는 공의 잔상 — 측정 누적면적 31.421% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

SPEED_STEPtrailpushTrail
  function pushTrail() { trail.push({ x: ball.x, y: ball.y }); }
  function stepExtra(dt) {
    pushTrail();
    var speedNow = Math.sqrt(ball.vx * ball.vx + ball.vy * ball.vy);
    var count = Math.round(clamp((speedNow - BASE_SPEED) / (SPEED_MAX - BASE_SPEED), 0, 1) * (TRAIL_MAX - 3)) + 3;
    while (trail.length > count) trail.shift();
  }

측정: 누적면적 31.4% · 강도 평균 82.5 · 23/23 프레임에서 움직였다.

07연속 타격마다 배수가 오르는 콤보 값

벽돌을 끊기지 않고 연속으로 맞히는 동안 comboCount 값이 한 단계씩 오르고, 한 번이라도 놓치면 그 값이 처음으로 되돌아간다. 점수 배율 UI를 강조하는 화면에 어울린다.

연속 타격마다 배수가 오르는 콤보 값
새 창에서 열기

07 · 연속 타격마다 배수가 오르는 콤보 값 — 측정 누적면적 30.928% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

COMBO_MULT_STEPcomboCountresetCombo
  function onBrickHit(b) {
    spawnFlash(b.x + b.w / 2, b.y + b.h / 2);
    b.alive = false; cleared += 1; comboCount += 1;
    if (cleared >= bricks.length) { onLevelClear(); }
  }
  function onMiss() {
    spawnFlash(ball.x, LH - 4);
    resetCombo();
    resetBall();
  }

측정: 누적면적 30.9% · 강도 평균 87.1 · 23/23 프레임에서 움직였다.

08벽에 닿으면 각도가 뒤집히는 튕김

공이 좌우 벽에 닿는 순간 가로 방향 각도 값의 부호만 반전되고 세로 방향 값은 그대로 남아, 들어간 각도 그대로 튕겨 나온다. 경계 충돌 물리를 보여주는 자리다.

벽에 닿으면 각도가 뒤집히는 튕김
새 창에서 열기

08 · 벽에 닿으면 각도가 뒤집히는 튕김 — 측정 누적면적 30.296% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

mirrorWallBounceWALL_MARGINmirrorFlashTimer
  function onWallHit(side) { spawnFlash(ball.x, ball.y); mirrorFlashSide = side; mirrorFlashTimer = 0.3; }
  function mirrorWallBounce(side) {
    ball.vx = side === 'left' ? Math.abs(ball.vx) : -Math.abs(ball.vx);
    onWallHit(side);
  }
  function onPaddleHit() {
    var hitPos = clamp((ball.x - (paddle.x + paddle.w / 2)) / (paddle.w / 2), -1, 1);
    var angle = hitPos * MAX_REFLECT_ANGLE;
    var speed = Math.sqrt(ball.vx * ball.vx + ball.vy * ball.vy);
    ball.vx = Math.sin(angle) * speed;
    ball.vy = -Math.abs(Math.cos(angle)) * speed;
    ball.y = PADDLE_Y - BALL_R - 0.5;
    spawnFlash(ball.x, PADDLE_Y);

  }

측정: 누적면적 30.3% · 강도 평균 93.6 · 23/23 프레임에서 움직였다.

09벽돌이 모두 사라지면 터지는 입자

남은 벽돌 개수 값이 0에 닿으면 코트 중앙 한 점에서 입자 36개가 사방으로 퍼져 나가며 다음 레벨로 넘어가는 것을 알린다. 화면 가장자리가 아니라 중앙에서 발산하는 방식이라 시선이 한 곳으로 모인다.

벽돌이 모두 사라지면 터지는 입자
새 창에서 열기

09 · 벽돌이 모두 사라지면 터지는 입자 — 측정 누적면적 29.451% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

PARTICLE_COUNTspawnBurstparticles
  function spawnBurst() {
    for (var i = 0; i < PARTICLE_COUNT; i += 1) {
      var ang = (i / PARTICLE_COUNT) * Math.PI * 2 + rand() * 0.3;
      var sp = 60 + rand() * 90;
      particles.push({ x: LW / 2, y: LH / 2 - 20, vx: Math.cos(ang) * sp, vy: Math.sin(ang) * sp, life: 1 });
    }
  }
  function stepExtra(dt) {
    for (var i = particles.length - 1; i >= 0; i -= 1) {
      var p = particles[i];
      p.vy += PARTICLE_GRAVITY * dt;
      p.vx *= (1 - 0.6 * dt);
      p.x += p.vx * dt; p.y += p.vy * dt;
      p.life -= dt * 0.7;
      if (p.life <= 0) particles.splice(i, 1);
    }
    if (burstPending && particles.length === 0) {
      burstPending = false;
      rebuildLevel();
    }
  }

측정: 누적면적 29.5% · 강도 평균 90.4 · 23/23 프레임에서 움직였다.

값이 반응을 바꾸는 곳 — 위치·중력·연속 횟수

02의 hitPos는 패들 중앙에서 벗어난 거리를 -1~1 값으로 재고 여기에 MAX_REFLECT_ANGLE(62도)을 곱해 반사 각도를 만든다 — 패들 가장자리에 맞을수록 hitPos가 1에 가까워져 공이 거의 수평으로 튕겨 나간다. 05의 GRAVITY_ACCEL(260)은 아이템의 낙하 속도(vy)에 매 프레임 더해지는 가속도 값이라, 떨어지는 시간이 길어질수록 속도가 일정하지 않고 점점 더 빠르게 늘어난다. 07의 comboCount는 COMBO_MULT_STEP(0.5)을 곱해 mult = 1 + comboCount * COMBO_MULT_STEP 공식으로 배수를 만들어 화면 오른쪽 위에 "×1.5"처럼 표시하는데, 이 배수는 화면 표시용일 뿐 실제 점수(score)는 03에서 본 것처럼 파괴한 벽돌 수(cleared)에만 곱해진다.

캐주얼 웹 게임 화면에서 아홉 조각이 쓰이는 자리

온보딩 미니게임이나 사이드 프로젝트로 벽돌깨기 만들기를 시도할 때, 01은 조작 인트로 화면에서 손맛을 먼저 보여주는 용도로 맞다. 03·04는 메인 플레이 화면의 기본 규칙이고, 05·07은 점수판·콤보 UI를 강조하고 싶은 상단 HUD 옆에 붙이면 값이 오르내리는 걸 눈으로 확인시켜 준다. 09의 중앙 발산 입자는 레벨 전환·결제 완료처럼 한 화면이 끝났다는 신호가 필요한 자리에 그대로 옮겨 써도 된다.

캡처 24장에서 뽑아낸 아홉 항목의 실측 수치

24장을 캡처해 그 사이 23개 구간 각각의 픽셀 변화를 잰 값이다. 누적면적은 23개 구간의 변화율을 더한 값이라 100%를 넘을 수 있다.

NN 이름 누적면적 % 강도 평균 x/23
01 드래그한 위치를 뒤따라가는 패들 30.1 80.4 23/23
02 맞은 위치로 반사각이 갈라지는 공 35.2 103.6 23/23
03 충돌 판정마다 점수가 오르는 벽돌 줄 30.6 86.5 23/23
04 여러 번 맞아야 부서지는 금 가는 벽돌 30.5 82.2 23/23
05 중력 값대로 떨어지는 아이템을 받는 패들 28.7 82.1 23/23
06 속도 값만큼 길어지는 공의 잔상 31.4 82.5 23/23
07 연속 타격마다 배수가 오르는 콤보 값 30.9 87.1 23/23
08 벽에 닿으면 각도가 뒤집히는 튕김 30.3 93.6 23/23
09 벽돌이 모두 사라지면 터지는 입자 29.5 90.4 23/23

02가 반사각 계산과 화살표 안내선까지 함께 그리느라 강도 평균이 가장 높고, 05는 아이템이 없는 구간이 섞여 있어 누적면적이 가장 낮다.

상수 하나씩만 바꿔 보는 변형 세 가지

데모 우측 조작 패널의 슬라이더로 값을 직접 옮겨볼 수 있고, 실제로 바뀌는 줄은 항목 폴더 상단의 상수 선언 한 줄뿐이다.

이름 값 느낌
패들 추적 계수 값 조정 01 PADDLE_LERP_FACTOR 0.15 → 0.4 패들이 커서에 거의 붙어 지연 없이 반응한다 — 낮은 값에서 느껴지던 무거운 추격감이 사라진다.
벽돌 내구 횟수 값 조정 04 BRICK_HIT_LIMIT 3 → 5 벽돌 하나가 버티는 시간이 늘어 금이 다섯 번 그어질 때까지 살아남는다 — 초반 벽이 훨씬 단단해진다.
콤보 배수 증가 값 조정 07 COMBO_MULT_STEP 0.5 → 1 두 번만 연속으로 맞혀도 배수가 크게 뛰어올라 우측 상단 숫자가 초반부터 빠르게 불어난다.

zip을 열면 각 항목 폴더의 index.html 맨 위쪽 상수 선언에서 이 값들을 바로 찾을 수 있고, 압축을 풀 때 묻는 비밀번호는 nnb29y4j 이며 이 글에서는 이 자리에서만 적는다.

css 게임 만들기 콘텐츠 301·332·357편과 무엇이 다른가?

CSS 게임 만들기 9종은 클릭 반응형 미니게임 모음이라 물리 계산보다 규칙 자체가 주인공이고, 룰렛 돌리기 9종은 회전 마찰 감쇠 값 하나로 아홉 장면을 만든다. 이 편은 그 둘과 달리 반사각·중력·연속 배수처럼 서로 다른 계산 세 갈래를 한 코트 안에 모아 놓았고, 버튼 눌림 효과 9종의 되돌아오는 값 하나짜리 구조보다 상태(벽돌 생존·콤보·아이템)가 여러 개 겹쳐 있다는 점이 다르다.

어디서 깨지는가 — 조작 반응이 사라지는 세 가지 조건

세 조건에서 이 아홉 개가 예상과 다르게 움직인다. 동작 줄임 설정에서는 드래그 중에도 매 프레임이 아니라 이벤트가 올 때만 패들이 갱신되니, 계속 움직이는 데모라고 생각하고 만지면 뚝뚝 끊기는 것처럼 보인다 — 의도한 동작이다. 프레임 시간이 느려지는 저사양 기기에서는 한 프레임의 delta 값을 최대 0.05초로 묶어(Math.min((ts - lastTs) / 1000, 0.05)) 공이 벽돌을 그대로 통과하는 터널링을 막는데, 이 clamp를 지우고 옮겨 쓰면 프레임이 크게 떨어지는 순간 공이 벽돌 사이를 그냥 지나간다. 터치 기기에서는 패들 조작 영역에 touch-action 규칙이 없어 pointermove로 처리하는 드래그와 페이지 스크롤이 동시에 반응해 서로 다툰다.

동작을 줄이면 무엇이 남고 무엇이 사라지는가 — 접근성

브라우저가 prefers-reduced-motion: reduce를 보고하면 아홉 데모 모두 공을 튀기던 자동 시연 재생을 멈춘다 — reduce 값이 참이면 root.classList.remove('is-demo')로 자동 재생 클래스를 떼어내기 때문이다. 그렇다고 조작까지 죽지는 않는다. 포인터를 누르거나 화살표 키(ArrowLeft·ArrowRight)를 한 번 누르면 그 순간만 패들을 한 프레임 계산해 그려 주는 단일 스텝 방식으로 바뀐다. 벽돌 배치와 아이템이 튀는 각도는 seedRand로 만든 결정론적 난수라 새로고침해도 매번 같은 순서로 재현된다. prefers-reduced-motion 문서가 설명하는 것처럼, 줄여야 하는 건 애니메이션이지 조작 가능성이 아니다.

이 벽돌깨기 코드를 처음 써보는 사람이 자주 묻는 것

벽돌 내구 횟수나 콤보 배수 값을 더 극단적으로 조절해도 되나요?

네, 04의 BRICK_HIT_LIMIT과 07의 COMBO_MULT_STEP은 둘 다 상수 한 줄이라 값만 바꾸면 바로 다른 난이도로 반응한다. 다만 값을 너무 키우면 강도 평균이 떨어져 화면이 밋밋해질 수 있어 변형 표의 범위 정도를 권장한다.

아홉 개 중 하나만 떼어서 다른 프로젝트에 붙여도 동작하나요?

된다. 각 항목은 seedRand·aabb·clamp 같은 공용 함수 몇 개만 공유할 뿐 상태 변수는 항목마다 독립돼 있어, zip 안 폴더 하나만 그대로 옮겨도 그 항목 혼자 동작한다.

벽돌깨기 만들기를 처음 해보는데 어떤 항목부터 보면 되나요?

02번부터 보는 걸 권한다. 패들에 맞은 위치 값이 반사각을 정하는 규칙이 나머지 여덟 개가 공유하는 기본 물리라, 이걸 먼저 읽으면 05·07·08의 응용이 쉽게 읽힌다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.