はじめに

この記事では、HTML5 Canvas と JavaScript を使って ボスキャラクターの登場演出、複合的な当たり判定、弾幕処理、HPゲージ、撃破演出 といった「ボス戦」に必要な要素を一つずつ実装していった流れをまとめています。

とくに、楕円当たり判定の公式

$$ \frac{dx^2}{rx^2} + \frac{dy^2}{ry^2} \le 1 $$

を用いて、複数のパーツからなる“ボスのヒットモデル”を作った点の応用など。

Canvas だけでも、弾幕STGに近い本格的なボス戦を構築できたため、その実装過程と気づきを記録として残します。

1. ボスの描画とフェードイン

ボス登場時には、透明度 alpha を徐々に増やすことでフェードイン演出を実装しました。 また、数フレームごとに画像を切り替えることで、ボスの表情や状態をアニメーションとして表現しています。

この処理は、見た目の演出だけでなく「怒り状態への移行判定」などにも利用でき、 ボス戦全体のテンポをつくる重要な仕組みになりました。

ポイント:

  • alpha の増加によるフェードイン演出
  • imgIndex を使った交互の画像切り替え（簡易アニメーション）
  • isActiveFirst フラグで初回処理（BGM切り替えなど）を一度だけ実行

2. 楕円の複数組み合わせによる当たり判定

ボスの当たり判定は、単純な「円」だけでは形状に合わず、 不自然なヒット判定や、実際の画像とズレた当たり方が目立っていました。

そこで、ボスの身体を 複数の楕円（頭・胴・腕・スカート） の集合として扱う “複合ヒットモデル” を採用しました。 これにより、画像のシルエットに近い滑らかな当たり判定が実現できます。

楕円内判定は次の式で行います：


(dx² / rx²) + (dy² / ry²) <= 1

これは楕円の基本式で、中心からの距離と半径の比を用いて 「点が楕円の内部にあるかどうか」を判定するものです。

さらに実装では、

  • めり込み対策としてヒットタイマーを導入
  • ヒット時に点滅エフェクトを追加し、被弾がわかりやすいように調整

など、ゲームとしての手触りを改善しています。

複合楕円にしたことで、ボスの存在感や説得力が大きく向上しました。

3. 弾幕処理（発射・移動・描画）

ボスは通常の画像切り替えとは別に、 “怒り状態” に入ると弾幕攻撃を行います。 怒り状態は imgIndex によるアニメーションの切り替えに合わせて判定し、 状態が変わった瞬間に弾幕を発射する仕組みです。

弾幕処理では、以下のステップを順番に実行しています。

  • 一斉射撃：円周方向に一定間隔で複数の弾を生成
  • 移動処理：弾ごとに vx, vy を使って位置を更新
  • 画面外処理：画面外へ出た弾はメモリ節約のため削除
  • ヒットエフェクト：弾がプレイヤーやブロックに当たった際は、 爆発エフェクトや削除処理を行う

弾の管理は配列で行っているため、 Canvas 上での弾幕の表示・削除・速度調整がシンプルに書ける構造になりました。

怒り状態への移行と弾幕発射を連動させることで、 ボスの「行動が変化している」感を自然に演出できます。

4. プレイヤーの楕円当たり判定

プレイヤーキャラクターの当たり判定も、ボスと同様に楕円で表現しています。

これにより、弾幕 STG でよく見られる「実際の見た目より少し小さめの当たり判定」を再現できます。

キャラクターのスプライトは幅と高さがあるため、 中心座標の計算に frameWidth・frameHeight・scaleFactor を使用し、 見た目と当たり判定が一致するように調整しています。

楕円判定式はボスと同じく、


(dx² / rx²) + (dy² / ry²) <= 1

を用いており、プレイヤーを弾がかすめるような“避ける面白さ”が生まれました。

弾幕量が増えても処理が軽い点もメリットで、 STG の気持ちよさを支える重要な要素になっています。

5. HPゲージの実装

画面上部にボスの HP ゲージを描画し、 durability（現在値）と durabilityMax（最大値）で比率を算出して表示しています。

さらに、HP が減少した際にゲージが一気に縮むのではなく、 lerp（線形補間）を使って滑らかに追従するアニメーションを加えました。

これにより、HP が「じわっと減っていく」演出が可能になり、 見た目の印象が一気に商業ゲームに近づきます。 UI の小さな演出ですが、プレイ感に大きく影響する重要な要素です。

HPゲージのポイント:

  • 現在値と最大値から割合を計算して描画
  • hpDraw を導入し、lerp(hpDraw, durability, 0.1) で滑らかに追従
  • 枠線・背景を持つ見やすい UI レイアウト

6. ボス撃破とステージクリア

ボスの耐久値が 0 になると、撃破処理へ移行します。

撃破後はゲームループを停止し、演出とステージ遷移に専用の処理を用意しました。

主な流れは以下のとおりです。

  • 点滅エフェクトによるフィニッシュ演出 ボスが最後に大きく点滅し、撃破感を演出。

  • ゲームアニメーションの停止 stopGameAnimation() を呼び出し、ゲームループを一時停止して演出の集中度を高める。

  • ステージクリアダイアログの表示 ConfirmationDialog を await で待ち、クリアメッセージを提示。

  • 次ステージへ移行（またはデバッグで停止） デバッグモードでは遷移せず、その場で終了。 通常プレイでは次のステージやタイトル画面へ進む準備を行う。

まとめ

HTML5 Canvas と JavaScript を使い、ボス戦に必要な要素を一通り実装した。 複数の楕円を組み合わせた当たり判定、弾幕の生成と更新処理、 HPゲージの描画、撃破時の演出など、ゲームとして成立する仕組みが揃った。

今回の実装では、楕円判定の数学的な理解や、 Canvas によるアニメーション制御、非同期処理を使ったクリア演出など、 普段のコードでは触れない部分にも踏み込んでいる。