game · gunmo.my

BEAT DASH

브라우저에서 하는 4키 리듬게임. 내 mp3를 넣으면 채보를 직접 만들어 줍니다.

2026.09 – 업데이트 중플레이
타이틀 화면
타이틀 화면
4키
D F J K
10곡
내장곡 + 내 음악
5단계
난이도 (Lv 1–18)
v1.1
2026.10

01개요

2026년 9월 말에 처음 공개한 DFJK 4키 리듬게임입니다. 그 뒤로 판정이 음악과 어긋나지 않게 하는 것과 어떤 곡을 넣어도 칠 만한 채보가 나오게 하는 것, 이 두 가지를 중심으로 계속 고치고 있습니다.

음원 분석 · 채보 생성 · 판정은 모두 브라우저 안에서 돌고, 서버는 랭킹만 맡습니다.

02기술 스택

화면
React 19TypeScriptCanvas 2DTailwind CSS
소리
Web Audio APIOfflineAudioContext오디오 시계 + 화면용 보정 시계
분석
STFT 스펙트럴 플럭스자기상관 템포 추정동적 계획법 비트 추적
랭킹
Express APIMongoDB1회용 티켓 · 채보 대조

03자동 채보가 만들어지는 과정

음원
22.05kHz 모노로
타격 찾기
저 · 중 · 고 대역별 스펙트럴 플럭스
템포 · 비트
자기상관 + 동적 계획법
노트 배치
32분 격자에 맞춰 난이도별로
  • 타격 시각은 1.5ms 해상도의 에너지 곡선에서 실제 어택 지점으로 다시 맞춤
  • 난이도마다 밀도 · 최소 간격 · 동시치기 · 롱노트 · 잭 비율이 다르고, 목표 레벨에 맞을 때까지 다시 뽑음
  • 계단 · 트릴 · 연타 같은 손 모양 48가지를 섞고, 같은 모양은 최대 2마디까지만
  • 타격 세기에 그 순간의 음량을 섞어, 곡이 터지는 구간에 노트가 몰리게

04주요 기능

플레이

  • DFJK 4키, 롱노트, 판정 PERFECT · GREAT · GOOD, FAST/SLOW 표시, HP와 FAILED
  • 난이도 5단계(쉬움 – 나이트메어), 곡마다 레벨 1–18
  • 노트 속도 · 싱크 · 볼륨 · 레인 위치 · 노트 두께 · 스킨 · 타격음 설정, 플레이 중 ↑ ↓ 로 속도
  • 타이틀부터 결과까지 16:9 화면 하나에서, 창모드와 전체화면이 같은 모양
  • 휴대폰은 레인만 세로 화면 가득, 터치로 플레이

내 음악으로 플레이

  • mp3를 넣으면 브라우저 안에서 분석해 난이도별 채보를 만듦 — 파일은 서버로 올라가지 않음
  • 미리 듣기, mp3 속 앨범 사진을 재킷으로
  • 빠른 곡(170 BPM 이상)은 나이트메어 레벨을 더 높게

곡 · 랭킹

  • 내장곡 10곡: AI로 만든 자작곡 7곡 + xi의 곡 3곡(ANiMA · FREEDOM DiVE · Aragami, 제작자 표기)
  • 연습곡 「패턴 연습」 — 계단 · 트릴 · 잭 · 동시치기 · 롱노트를 구간마다 반복
  • 곡 · 난이도별 TOP 10, 결과 화면에서 바로 등록. 로그인한 회원은 별명으로 자동 등록
  • 서버가 점수 · 콤보를 그 채보의 노트 수와 맞춰 보고, 곡 길이보다 빨리 올라온 기록은 거절
곡 선택
곡 선택
플레이 화면
플레이 화면

05트러블슈팅

노트가 분신처럼 겹쳐 보임

문제
노트가 많이 내려오면 한 노트가 여러 개로 겹쳐 보이는 잔상이 생김
원인
노트 위치를 오디오 시계(currentTime)로 계산했는데, 이 값은 오디오 버퍼 단위로 끊겨 올라감 (16.7ms 프레임마다 8.7ms · 20.3ms씩 들쭉날쭉)
해결
화면용 시계를 performance.now()로 매끄럽게 흘리고 오디오 시계와의 차이만 천천히 따라가게 분리. 판정은 그대로 오디오 시계 기준

블루투스 이어폰에서는 판정이 전부 늦음

문제
소리가 늦게 나오는 기기에서는 박자에 맞게 쳐도 SLOW만 뜸
원인
출력 지연은 기기마다 다르고, 브라우저가 알려 주는 값도 정확하지 않음
해결
치는 동안 '입력 − 가장 가까운 노트' 차이의 중앙값을 재서 싱크를 알아서 옮김. 처음엔 6탭마다 크게, 맞은 뒤엔 24탭마다 조금씩 → 150ms 지연도 2~3마디면 따라잡음

빠른 곡의 템포를 절반으로 잡음

문제
170~280 BPM 곡이 절반 템포로 잡혀 채보가 박자와 어긋남
원인
자기상관만으로는 배수 템포를 구분하지 못하고, 센 엇박에 비트 추적이 끌려감
해결
osu 랭크 채보 106곡을 같은 곡 · 같은 레벨끼리 대조하면서 규칙을 조정 — 절반 템포로 잡던 곡이 56곡 → 16곡, 노트 수는 osu의 93~104% 수준으로

곡 하나 렌더링에 100초 넘게 걸림

문제
곡을 코드로 합성하던 초기, 곡 전체를 OfflineAudioContext 하나로 구우면 시작 버튼 뒤 한참 기다려야 했음
원인
만든 노드는 렌더링이 끝날 때까지 계속 처리 비용이 들어 (노드 수 × 곡 길이)로 느려짐
해결
4마디씩 잘라 여운만 붙여 따로 굽고 합치도록 변경, 필터는 악기별로 공유 → 2~5초

노트가 많을 때 프레임이 떨어짐

문제
나이트메어 구간에서 화면이 버벅여 판정까지 흔들림
원인
노트마다 매 프레임 그라데이션 · 그림자를 새로 계산
해결
노트 머리를 스킨 · 색별로 한 번 그려 두고 찍기만 함. 그래도 떨어지면 박자 빛 → 불꽃 · 그림자 → 해상도 순으로 한 단계씩 내리고, 가벼워지면 되돌림
Gunmo Lee