はじめに
この記事は 「MM2025 開発記」 シリーズ第13回です。
前回の記事では、背景グラデーションとクロスフェード演出について解説しました。
今回は、ゴール判定とエンディングの演出方法について解説します。
ゴール判定関係
ゴール位置
const goalX = stageLength - canvas.width;
- ステージ長 = 曲の再生時間
- スクロール量 = プレイヤーの進行度
となっているため、
曲が終わる→ゴール出現
を実現している。
プレイヤーのスクロール基準にすることで、以下のようなメリットもある。
- 後から曲の長さが変わっても対応できる
- 演出タイミングを音楽に同期しやすい
ゴール判定
キャラクターとゴールの位置関係をif文で判定している。
if (player.x + player.width >= goalX) {
isGameClear = true;
}
具体的には、
- プレイヤーの右端
- ゴール位置
の2つが重なった瞬間を「クリア」としている。
この判定は視覚的に分かりやすく、実装もシンプルになる。
スコアによる分岐演出
スコアが満点だった場合とそれ以外の場合で、エンディングの演出を変化させている。
こうすることで、繰り返し挑戦する楽しさなどをさらにゲームへ与えている。
if (score >= 68900) {
resultText = "PERFECT";
}
↑通常のエンディング演出。パーフェクトの場合は、背景色・イラスト・コメントの3つが変化する。
Canvas上のUI描画
ctx.fillText("GAME CLEAR", canvas.width / 2, canvas.height / 2);
エンディング表示はすべてCanvas上で行う。
中央配置にすることで目立つようにしている。
レイヤーの構造
描画順は以下のイメージになっている。
- 背景
- ステージ
- プレイヤー
- UI（エンディング文字・ボタン）
UIを最後に描画することで、
- 常に最前面に表示
- 他の要素に隠れない
という状態を作っている。
ゴール後からタイトル画面
location.reload();
ゴール後、BACK TO TITLEを押すとリロードするようにしている。
これにより、シンプルな実装で最初の状態に戻せる。
さいごに
今回はゴール判定とエンディングの演出について紹介しました。
これでこのシリーズは最後になります。
ここまで読んでいただき、ありがとうございました。