リズムゲーム

2022年2月19日

TypeScript Angular HTML5 Canvas Webゲーム アーケード

概要

リズムゲームは、音楽に合わせてキーを押すことでノーツをタイミングよくヒットさせる、ウェブベースのリズムゲームです。週末プロトタイプとして開発され、クラシックな音ゲーの基本的な仕組みをモダンなウェブ技術で再現しています。

デモではLeague of Legendsのアートと音楽を使用していますが、すべてのアセット(音声、ビジュアル、譜面)はモジュール化されており、簡単に差し替えることができます。

プレイ方法:再生ボタンを押し、以下のキーを使って操作します:

A S D F Space J K L ;


仕組み

  • 譜面は、音楽に合わせたキープレスのタイミングを記録することで生成されます。
  • そのタイムスタンプに基づき、各ノーツがターゲットに到達するタイミングが決まります。
  • ゲームプレイ中は、ユーザーの入力とノーツの位置をリアルタイムで比較します。
  • 判定はミスからパーフェクトまで、タイミングの精度によってスコアが決まります。

拡張機能とアイデア

基本的なメカニクスは実装済みですが、以下のような拡張も可能です:

  • 🧠 ユーザーの曲に対応した自動譜面生成機能
  • ⚡ 音楽の波形と同期するフレーム精度のタイミング処理
  • 🎨 コンボエフェクトやノーツアニメーションなどのビジュアル強化
  • 🆚 スコアをリアルタイムで競えるマルチプレイヤーモード
  • 🎵 ドラッグ&ドロップやファイルアップロードによるカスタム曲インポーター
  • 📈 スコア履歴、難易度、実績などを含む進行システム

デモ

▶️ リズムゲームをプレイ

ソースコード

📁 GitHubでソースを見る