heartbeat♡ 소개

내가 만든 노래를 그대로 리듬게임으로 바꿔 주는, 설치 없는 4키 리듬게임입니다.

어떤 사이트인가요

리듬게임을 하려면 보통 누군가 손으로 채보를 찍어야 합니다. 노트 하나하나를 박자에 맞춰 배치하는 작업이라, 곡 하나에 몇 시간씩 걸리고 그래서 대부분의 리듬게임은 정해진 수록곡만 플레이할 수 있습니다.

heartbeat♡는 그 과정을 브라우저가 대신합니다. 음원을 넣으면 소리를 분석해 타격 지점을 찾아내고, 난이도에 맞춰 노트를 배치합니다. 내 컴퓨터 안에서 전부 처리되기 때문에 서버에 올릴 필요도, 회원가입도, 설치도 없습니다.

수록된 다섯 곡은 모두 제작자가 직접 만든 자작곡입니다. 남의 음원을 올려 둔 것이 아니라, 만든 곡을 게임으로 즐기려다 사이트까지 만들게 된 쪽에 가깝습니다.

수록곡 외에 직접 가진 음원 파일을 불러와서 플레이할 수도 있습니다. 이 경우에도 파일은 브라우저 안에서만 열리고 어디로도 전송되지 않습니다.

빌드 도구나 프레임워크 없이 순수 HTML·CSS·JavaScript로만 만들었습니다. 소리 분석과 재생은 브라우저에 내장된 Web Audio API가, 노트가 흘러내리는 화면은 Canvas가 담당합니다.

마스코트도 외부 이미지가 아니라 코드 안의 문자 그리드에서 그려집니다. 픽셀 하나가 문자 하나에 대응해서, 색을 바꾸거나 크기를 키워도 흐려지지 않습니다.

판정 타이밍은 화면 갱신이 아니라 오디오 시계를 기준으로 계산합니다. 프레임이 밀리는 순간에도 음악과 노트가 어긋나지 않게 하기 위해서입니다. 자세한 내용은 게임 방법에 정리해 두었습니다.

곡과 사이트 모두 imwaveinlove가 만들었습니다. 취미로 만든 곡을 직접 플레이해 보고 싶어서 시작한 개인 프로젝트입니다.

버그 제보나 의견은 GitHub 저장소의 이슈로 남겨 주세요. 소스 코드도 같은 곳에 공개되어 있습니다.