Xenoahのホームページ

PERFECT PITCH QUIZ

基本情報

• 配置場所: game/perfect-pitch-quiz/perfect-pitch-quiz.html
• 公開時のリンク: https://xenoah.github.io/game/perfect-pitch-quiz/perfect-pitch-quiz.html
• ジャンル: 絶対音感・音名当てクイズゲーム
• 実装形式: HTML / CSS / JavaScript の単体ページ
• 主な使用技術: Web Audio API、Canvas、Cookie または localStorage

ゲーム概要

ランダムに鳴る単音または和音を聞いて、音名やコードネームを当てるゲームです。プレイヤーは再生された音を頼りに、C、C#、D などの12音、またはコードのルートと種類を選びます。

最初は白鍵のみ・中央付近のオクターブから始まり、レベルが上がるにつれて黒鍵、オクターブ範囲、和音、三和音、7thコードが増えていきます。絶対音感の確認だけでなく、相対音感、和音感、コードネームの練習にも使える内容にします。

目的

• 聞こえた音の音名を素早く判断する練習ができる
• 初心者でも白鍵から段階的に遊べる
• 上級者向けに全12音・複数オクターブ・和音・コード当ての高難度を用意する
• スコア、正答率、連続正解数で成長が見える

メイン画面

• タイトル: PERFECT PITCH QUIZ
• 現在のレベル、スコア、正答率、連続正解数を表示
• 中央に大きな PLAY ボタンを配置し、押すと出題音を再生
• 出題ごとに時間バーとビートドットを表示
• ピアノ鍵盤のキャラクターを表示し、正解、ミス、時間切れで表情を変える
• 回答エリアは、単音では音名ボタン、コードではルートボタンとコード種ボタン
• 画面下のピアノ鍵盤からもルート音・単音回答ができる
• 音名表記は設定から切り替え可能
  • C D E
  • ド レ ミ
  • ハ ニ ホ ヘ ト イ ロ
  • German C D E F G A H
• 回答後に正解、不正解、正しい音名、オクターブを表示
• 回答後は短いフィードバックを挟んで自動的に次の問題へ進む

回答UI

音名ボタン

• C
• C# / Db
• D
• D# / Eb
• E
• F
• F# / Gb
• G
• G# / Ab
• A
• A# / Bb
• B

鍵盤UI

• 白鍵と黒鍵を視覚的に配置
• 現在の難易度に応じて使用しない鍵を無効化
• 回答後、選んだ鍵と正解の鍵を色で表示

コード種ボタン

• Major
• Minor
• Diminished
• Augmented
• Sus4
• 7
• Major 7
• Minor 7

開始レベル選択

タイトル画面で開始レベルを選んでゲームを開始します。選んだレベルから出題内容が始まり、Challenge として正解数に応じてレベルが上がります。

• Lv.1 Beginner: 白鍵だけの単音
• Lv.5 Basic: 12音の単音
• Lv.10 Wide: 広い音域の単音
• Lv.15 Chord Intro: Major / Minor のコード当て
• Lv.25 Chord Mix: Diminished、Augmented、Sus4 も含むコード当て
• Lv.40 Expert: 転回形と7thコード込み

Training

• 判定なしで任意の鍵盤を押して音を確認できる
• 単音またはコードを鳴らせる
• 音名、周波数、オクターブを表示
• オクターブ、コード種、音色を自由に選べる

出題仕様

• Web Audio API の OscillatorNode で音を生成する
• 基準ピッチは A4 = 440Hz
• MIDIノート番号から周波数を計算する
• 直前と同じ音が連続しすぎないようにする
• レベルごとの音域と使用音からランダムに出題する
• コード問題では、ルート音とコード種から構成音を生成する
• 高レベルでは転回形を混ぜる

音色仕様

初期実装では以下を用意します。

• Sine: 素直な基準音
• Triangle: やわらかい電子音
• Square: 判別しやすい電子音
• Saw: 倍音が多いシンセ音

難易度が上がると音色をランダム化できます。ただし、音名・コード当てが目的なので、過度なエフェクトやピッチ揺れは基本的に使わない方針です。

判定仕様

• 音名が一致したら正解
• 異名同音は同じ音として扱う
  • 例: C# と Db
  • 例: A# と Bb
• 単音問題ではオクターブ違いは問わない
• コード問題ではルートとコード種が両方一致したら正解
• 転回形でもコード名が一致すれば正解
• 将来的な拡張として、オクターブや転回形も当てるモードを追加できるようにする

スコア仕様

• 正解: 基本点を加算
• 連続正解: コンボボーナスを加算
• 不正解: コンボをリセット
• 早く答えるほどタイムボーナス
• 同じ問題の再生回数が多いほど獲得点を少し下げる
• 速さに応じて PERFECT、GREAT、GOOD、COOL の判定を表示
• 時間切れは TIME UP として不正解
• 設定で回答待ち時間を選べる
  • Relaxed: 長め、スコア x0.85
  • Standard: 標準、スコア x1.00
  • Fast: 短め、スコア x1.25
  • Blitz: 最短、スコア x1.55

例:

• 基本点: 100
• コンボボーナス: 連続正解数 x 10
• タイムボーナス: 残り時間に応じて 0 から 50
• 再生ペナルティ: 2回目以降、1回ごとに -10

レベル仕様

• Lv.1: 白鍵のみ、C4 から B4 の単音
• Lv.5: 黒鍵を追加した12音単音
• Lv.10: C3 から B5 の単音
• Lv.15: 白鍵ルートの Major / Minor コード
• Lv.25: 12音ルートの Major / Minor / Diminished / Augmented / Sus4
• Lv.32: 転回形を追加
• Lv.40: 7 / Major 7 / Minor 7 を追加
• Lv.50: Expert相当のコード当て

タイトル画面で開始レベルを選び、正解数に応じてそこからレベルが上がります。ラウンド終了後のリスタートも同じ開始レベルから始まります。

操作

• Space: 出題音を再生
• Enter: 回答確定、または次の問題へ進む
• 1 から 7: 白鍵回答のショートカット
• A から L 付近: 鍵盤入力のショートカット候補
• 画面内のピアノ鍵盤: 単音回答、コード問題のルート選択
• 画面右上の設定: 音量、基準ピッチ、音色、音名表記、ラウンド数、回答待ち時間を調整

保存仕様

保存を許可した場合、以下を保存します。

• ゲーム音量
• UI音量
• 音名表記
• 最後に選んだ開始レベル
• ベストスコア
• 最高連続正解数
• レベル帯別の正答率

localStorage を使います。

画面遷移

1. タイトル画面
2. 開始レベル選択
3. クイズ画面
4. 回答結果表示
5. 次の問題、またはリザルト画面

リザルト画面

• 総問題数
• 正解数
• 正答率
• スコア
• 最大コンボ
• 苦手だった音
• もう一度プレイ
• 開始レベル選択へ戻る

実装方針

synth-wave-match からクローンした構成をベースにしますが、シンセパラメータ一致ゲームとしての複雑なUIは削り、音名・コード当てに必要なUIへ置き換えます。

残す候補:

• Web Audio API の初期化
• 音量設定
• 設定ダイアログ
• Cookie保存まわり
• 画面切り替えの基本構造

削る候補:

• シンセパラメータ調整ラック
• 波形一致判定
• 大量のエフェクト操作
• ターゲット音とプレイヤー音の比較UI

初期実装の完成条件

• タイトルに PERFECT PITCH QUIZ が表示される
• 開始レベルと Training を選べる
• PLAY でランダムな単音が鳴る
• 制限時間つきでリズムよく自動出題される
• レベルが上がると和音、コード当てが出題される
• 音名ボタン、ルートボタン、コード種ボタンで回答できる
• 正解、不正解、正しい音名またはコード名が表示される
• スコア、正答率、コンボが更新される
• 音量設定ができる
• 1ファイルHTMLとして公開できる