リズムゲーム
2022年2月19日
TypeScript
Angular
HTML5 Canvas
Webゲーム
アーケード
概要
リズムゲームは、音楽に合わせてキーを押すことでノーツをタイミングよくヒットさせる、ウェブベースのリズムゲームです。週末プロトタイプとして開発され、クラシックな音ゲーの基本的な仕組みをモダンなウェブ技術で再現しています。
デモではLeague of Legendsのアートと音楽を使用していますが、すべてのアセット(音声、ビジュアル、譜面)はモジュール化されており、簡単に差し替えることができます。
プレイ方法:再生ボタンを押し、以下のキーを使って操作します:
A
S
D
F
Space
J
K
L
;
仕組み
- 譜面は、音楽に合わせたキープレスのタイミングを記録することで生成されます。
- そのタイムスタンプに基づき、各ノーツがターゲットに到達するタイミングが決まります。
- ゲームプレイ中は、ユーザーの入力とノーツの位置をリアルタイムで比較します。
- 判定はミスからパーフェクトまで、タイミングの精度によってスコアが決まります。
拡張機能とアイデア
基本的なメカニクスは実装済みですが、以下のような拡張も可能です:
- 🧠 ユーザーの曲に対応した自動譜面生成機能
- ⚡ 音楽の波形と同期するフレーム精度のタイミング処理
- 🎨 コンボエフェクトやノーツアニメーションなどのビジュアル強化
- 🆚 スコアをリアルタイムで競えるマルチプレイヤーモード
- 🎵 ドラッグ&ドロップやファイルアップロードによるカスタム曲インポーター
- 📈 スコア履歴、難易度、実績などを含む進行システム
デモ
▶️ リズムゲームをプレイ
ソースコード
📁 GitHubでソースを見る