music-game(ClockNotes)はブラウザで動くシンプルな音ゲー(リズムゲーム)です。HTML、CSS、JavaScriptで記述しています。
GitHub Pagesで公開してます。
https://gomagom.github.io/music-game/
- トップページから「ゲームを遊ぶ」を選びます
- 曲と譜面をサンプルから選択、またはアップロードします。
- 「ゲームスタート！」ボタンをクリックし、適当なキーを押すとゲームが開始されます。
- 4つのレーンそれぞれで流れるノーツに合わせて、タイミング良くキーを押すことでスコアが加算されます。
- 最後のノーツが降った後、しばらくしてからリザルト画面が表示されます。
トップページからゲームに関する設定ができます。なお、ゲーム中であっても、ポーズ画面を開くことで音量に関する設定は変更可能です。
以下、設定項目の説明です。
- BGM
- 楽曲の音量を調整します。左端でミュートになります。デフォルトではスライダー中央に設定されています。
- SE
- 効果音の音量を調整します。左端でミュートになります。デフォルトではスライダー中央に設定されています。
- DELAY
- 楽曲に対する譜面の再生位置を調整します。左に動かすことで、ノーツの到達するタイミングを曲に対して早まらせ、右に動かすことで遅らせることができます。前後0.3秒までずらすことが可能です。デフォルトではスライダー中央に設定されています。
- SPEED
- ノーツが流れるスピードを調整します。ノーツに予め設定されている速度に対しての割合で計算されます。0%～200%の範囲で設定できます。デフォルトではスライダー中央(100%)に設定されています。
- LANE1~4
- 4つのレーンに割り当てられているキーを設定します。番号は左端のレーンから順番に対応しています。キーの名前が表示されているボタンをクリックし、任意のキーを押下することで、新たなキーを設定できます。それぞれのキーを重複させることはできません。デフォルトでは1番(左端)から"D"、"F"、"J"、"K"となっています。
- PAUSE
- ゲーム中に一時停止させるためのキーを設定します。キーの名前が表示されているボタンをクリックし、任意のキーを押下することで、新たなキーを設定できます。デフォルトでは"P"が設定されています。
上記の設定項目はリセットボタンを押すことでデフォルト値に戻すことができます。
トップページから「ゲームを遊ぶ」をクリックすることで、楽曲及び譜面を選択する画面になります。
楽曲、譜面ともに、予め用意してあるサンプルか、自分で作成したデータをアップロードするかのどちらかを選択できます。
データをアップロードする際、曲はaudio又はvideoタイプのファイルを、譜面はCSV形式のファイルを選んでください。
実際のプレイ画面では中央に4つのレーンが設置され、その下方に判定の基準となるラインが引かれています。また、それぞれのレーンの底には対応するキー名が表示され、そのキーが押された場合はレーンの色が変化します。
ノーツが画面上方から一定の速度で落下してくるのでタイミング良くキーを押しましょう。正確性に合わせて"Perfect"、"Great"、"Good"、"bad"の4段階で評価されます。"Perfect"が最も点数が高く、そこから段階的に下がっていきます。"bad"はミス扱いになるので点数は入りません。
画面中央にはコンボ数が表示されます。コンボが持続するほど加算点に倍率が掛かるようになっています。
ゲームは一時停止できます。画面左上に表示してあるキーを押すか、画面のフォーカスが外れたときに停止します。ポーズ中は、音量を調節する、ゲームをリスタートするといった操作が可能です。
ノーツがヒットすると効果音が鳴るようになっていますが、製作者の技術不足によりヒットしてから音が鳴るまでのレイテンシが非常に大きいです。本気でプレイする際はSEのボリュームを0にすることを推奨します。
すべてのノーツが流れ終えた後、一定時間経過するとリザルト画面が表示されます。ここでは総合スコア、"Perfect"、"Great"、"Good"、"bad"の回数及び最大コンボ数を確認できます。また、もう一度プレイする、タイトルに戻るといったオプションが用意されています。
譜面を作るボタンから譜面エディタページに遷移します。ここでは、ゲームで遊ぶための譜面をCSV形式で作成、編集することができます。 なお、このエディタで制作できるのは、テンポが一定の曲に限られます。
- レーン
- 灰色の線で挟まれている4つのゾーンが、実際のゲーム画面の4つのレーンに対応しています。
- 4分音符線
- 水色の線で表現されています。曲の1拍に対応する位置を示す線です。
- 8分音符線～32分音符線
- 4分音符線同士の間に位置し、8分音符、16分音符、32分音符のタイミングに対応しています。オレンジ色で表現されます。
- 3連符線～6連符線
- 1拍3連～6連のタイミングに対応しています。4分音符線を3分割、及び6分割します。マゼンタで表現されます。
レーン毎に、横線をクリックすることでノーツを設置することができます。設置した箇所をもう一度クリックすることで消去もできます。ノーツは必ず線上に設置されるようになっているため、曲のテンポさえ分かればタイミングがずれることはありません。
- BPM
- 曲のテンポを設定します。ここでは1分間の拍数を入力します。
- 曲の長さ
- 楽曲の再生時間を秒数で指定します。この値に連動して、ノーツ設置画面(譜面)の長さが変動します。
- 曲の開始位置
- 楽曲のメディアファイルにおける実際の開始位置を指定します。これにより、譜面の1拍目を任意の位置に動かすことができます。
- ノーツの速さ
- ゲーム本体におけるノーツのスピードを設定します。デフォルトでは2.5に設定されています。
- 適用ボタン
- 上記4つの項目をエディタに反映させます。
- クオンタイズ
- 1拍を基準として、任意の数に分割したタイミングにノーツを設置するためのオプションです。8分音符なら4分音符線を2分割し、3連符なら3分割します。ここで指定した項目に合わせてノーツ設置画面の線が変化し、ノーツは必ずその線の上に設置されます。(すでに設置しているノーツは除く)
- 縦の縮尺
- ノーツ設置画面の縦方向の線同士の間隔を調整します。クオンタイズが4分音符の場合は間隔を狭くし、32分音符などの線が多い状況では間隔を広げると見やすいと思います。
- CSVエクスポート
- 打ち込んだノーツをCSV形式で出力してくれるオプションです。拡張子を除いたファイル名を入力し、CSVダウンロードボタンを押すことでローカルに保存されます。
- CSVインポート
- 譜面のCSVデータをインポートするオプションです。保存してある譜面を途中から編集することができます。
- ホームに戻るボタン
- タイトル画面に戻ります。
- Twitter : https://twitter.com/gomatamago_0