BLOCK BREAKER(블록 격파)

Block Breaker 블록 격파

Ultimate Web-Based Block Breaking Experience

Block Breaker

ENGLISH

1. Controls: Arrows/Drag to move. Space/Tap to launch.
2. Goal: Break all bricks. Items give buffs.
3. Combo: Don't drop the ball for higher scores!

KOREAN

1. 조작: 방향키/드래그로 이동, 스페이스바/터치로 발사.
2. 목표: 모든 블록 파괴. 아이템으로 파워업.
3. 콤보: 공을 떨어뜨리지 않고 연속 파괴시 점수 폭발!

Making a BLOCK-BREAKER game(블록 격파 게임 만들기)

Architecture & Core Logic

[ENG] Key Technical Features

  • Vanilla JS & Canvas API: Implemented purely with HTML5 standard technologies without any external game engines or libraries.
  • High-Performance Rendering: Utilizes requestAnimationFrame loop to sync with the display's refresh rate.
  • Delta Time (dt) Physics: Movement is calculated based on elapsed time (dt), ensuring consistent gameplay speed across 60Hz, 120Hz, and 144Hz monitors.
  • Finite State Machine: Manages game flow robustly via distinct states (START, PLAYING, GAMEOVER).
  • Mobile Optimized: Full-screen mode and touch controls are activated exclusively on mobile devices to enhance usability.

[KOR] 핵심 기술 구조

  • 순수 자바스크립트 & 캔버스: 외부 게임 엔진 없이 HTML5 표준 기술만으로 가볍게 구현되었습니다.
  • 고성능 렌더링: requestAnimationFrame을 사용하여 디스플레이 주사율에 최적화된 화면을 그립니다.
  • 델타 타임(dt) 물리 연산: 프레임 속도가 아닌 '시간 경과'를 기준으로 이동 거리를 계산하여, 고주사율 모니터에서도 게임 속도가 빨라지지 않고 일정합니다.
  • 유한 상태 머신(FSM): 시작, 플레이, 종료 등 게임 상태를 명확히 구분하여 로직 꼬임을 방지합니다.
  • 모바일 최적화: 전체 화면 모드와 터치 컨트롤은 모바일 기기에서만 활성화되도록 최적화되었습니다.

Game Algorithm

[ENG] Core Mechanics

  • Circle-AABB Collision: Detects collisions by finding the closest point on the rectangle (brick) to the circle's center. This ensures precise deflection angles even when hitting corners.
  • Reflection Vector: When hitting the paddle, the ball's reflection angle changes based on the impact position, giving players control over the ball's direction.
  • Object Pooling (Particles): Debris effects use a simplified object pooling strategy (managing array life-cycles) to prevent memory leaks during frequent updates.
  • Input Smoothing: Caches `getBoundingClientRect` values to prevent layout thrashing and stuttering during mouse movements.
  • Progression System: Difficulty scales dynamically (speed increases, steel blocks appear) while preserving brick states upon life loss to maintain fair challenge.

[KOR] 게임 알고리즘 상세

  • 원-직사각형 충돌 감지 (Circle-AABB): 단순히 영역이 겹치는지 확인하는 것을 넘어, 공(원)의 중심과 벽돌(직사각형) 사이의 '가장 가까운 점(Closest Point)'을 수학적으로 계산합니다. 이를 통해 공이 벽돌의 모서리에 맞았을 때도 물리적으로 정확하고 자연스러운 반사각을 구현했습니다.
  • 반사 벡터 계산: 패들에 공이 맞을 때, 맞은 위치(중심에서의 거리)에 따라 반사각을 비틀어주어 플레이어가 공의 방향을 조절할 수 있게 합니다.
  • 오브젝트 풀링 (파티클): 벽돌이 깨질 때 생성되는 파편 효과는 메모리 누수를 막기 위해 수명이 다하면 배열에서 즉시 제거되는 방식으로 관리됩니다.
  • 입력 최적화: 마우스 이동 시마다 발생하는 무거운 연산(Layout Reflow)을 막기 위해 캔버스 좌표 정보를 캐싱하여 끊김 없는 조작감을 제공합니다.
  • 난이도 및 진행 저장: 스테이지가 오를수록 속도가 빨라지고 강철 블록이 등장하며, 공을 놓쳐도 깨진 벽돌 상태는 유지되어 플레이어의 노력이 헛되지 않게 합니다.

Item Guide

  • <> (확장): 패들 길이가 25% 증가합니다. (기본 크기의 최대 2배까지 적용)
  • >< (축소): 패들 길이가 10% 감소합니다. (기본 크기의 70%까지 적용)
  • ↓ (감속): 30초간 공 속도가 30% 감소합니다. (중복 적용 불가)
  • ↑ (가속): 30초간 공 속도가 30% 증가합니다. (중복 적용 불가)
  • + (멀티볼): 현재 공 위치에서 2개의 공이 추가로 발사됩니다.

Preview

댓글

댓글 쓰기