夏休みの自由研究はこれで決まり！タイピングゲームを作れるプログラミング実践ガイド

演出イベント一覧
1. updateAndDraw()（常時実行ループ）
タイミング: 毎フレーム（requestAnimationFrame により1秒間に約60回実行）
主な演出用途:
Canvas上でのパーティクル（粒子）の移動・物理演算・描画
背景グラデーションやアニメーションオブジェクトの更新
エフェクトのフェードアウト処理

2. onKeyPress()（1打鍵・入力時）
タイミング: 入力エリア（#editor）に文字が入るたび（キーを押した瞬間やIME入力中）
主な演出用途:
打鍵音（効果音）の再生
入力位置やCanvas画面上での小さなプチエフェクト（弾ける粒子など）の発生
画面の一時的な微振動（画面シェイク）

3. onLineComplete(cpm, accuracy)（1問完了時）
タイミング: 1つの問題を入力し終えて確定（Enterキー押下）した瞬間
引数:
cpm: その1行の入力速度（CPM）
accuracy: その1行の正解率（%）
主な演出用途:
正解／不正解に応じたSEの再生（ピンポン／ブブーなど）
スピードや正解率に応じた派手なエフェクト（弾ける数や色の変更）
スコアテキストのポップアップアニメーション

4. onGameStart()（ゲーム開始時）
タイミング: スタート用Enterキーが押され、タイピングが実際に開始された瞬間
主な演出用途:
BGMの再生開始
「START!」などの掛け声SEや画面中央のカウントダウン・カットイン表示
画面上の前回の残効エフェクトのクリア

5. onNextQuestion(questionIndex)（次問題出題時）
タイミング: 次の問題テキストが画面に表示された瞬間
引数: questionIndex（出題された問題の番号）
主な演出用途:
問題文表示時のフェードイン／スライドイン効果
出題切り替え時のピコッとした効果音

6. onGameComplete(totalCpm, totalAccuracy)（全問クリア・リザルト時）
タイミング: 設定された全問題の入力が完了し、リザルト画面に移った瞬間
引数:
totalCpm: 通算の平均入力速度（CPM）
totalAccuracy: 通算の正解率（%）
主な演出用途:
ファンファーレやクリアBGMへの切り替え
画面全体を覆うクラッカー・紙吹雪・大爆発などの大噴射演出
ランク（S, A, Bなど）に応じたスタンプや評価アニメーションの表示

画面のテーマと構成
基本的なエフェクト説明
ゲーム開始時
1打鍵・入力時
1問完了時
次問題出題時
全問クリア時