はじめに
ブラウザ上でサクサク動く、フライトアクションゲームのプロトタイプ「ZMF Flight Prototype」を開発しました！
専用アプリのインストールは不要で、PCでもスマホ（仮想ジョイスティック対応）でもブラウザからすぐに遊べます。機体の「質量（慣性）」を切り替えながら、マルチロックで敵を殲滅する爽快感をぜひ体験してみてください。
👉 実際に遊んでみる（公開URL）
(※画面をクリック/タップしてAudioを初期化するとゲームが開始します)
主な機能と特徴
1. 質量変動型ABCモデル（モード切替）
機体の特性をいつでも切り替えられるシステムを搭載しています。モードによって質量（Mass）と空気抵抗（Drag）の物理パラメータが変化し、操作感が劇的に変わります。
- 軽量 (Active) [A]: 慣性が残らず、機敏な方向転換が可能。
- 標準 (Balance) [B]: 操作性と慣性のバランスが取れた標準状態。
- 重装 (Cooling) [C]: 質量が大きく、どっしりとした慣性が残る。
2. 爽快なアクションシステム
- マルチロックレーザー: ボタン長押しで敵を複数ロックオン。離すと比例航法（後述）によるホーミングレーザーが一斉に発射されます。
- ゼロシフト: 入力方向へ瞬時にワープする高速移動。残像エフェクトとともに敵の攻撃を回避できます。
- ダッシュ: 加速度と最高速を引き上げ、一気に間合いを詰めることができます。
3. モバイル・PC両対応のコントロール
PC（キーボード操作）だけでなく、スマートフォンでのタッチ操作にも対応しています。画面左側の仮想ジョイスティックと、右側の各種アクションボタンで快適に操作可能です。
技術スタック・実装の工夫点
今回はフレームワークやゲームエンジン（Unityなど）は一切使用せず、HTML / CSS / Vanilla JavaScriptのみで構築しています。
-
描画: HTML5 Canvas (
requestAnimationFrameを用いた描画ループ) - 音声: Web Audio API（リアルタイム波形合成）
- 物理演算: 自前実装（速度Verlet積分など）
特にこだわった技術的なポイントを紹介します。
① ObjectPool（固定長プール）によるゼロアロケーション実装
弾幕やパーティクルなど、頻繁に生成・破棄されるオブジェクトに対して new でのメモリ確保を毎回行うと、ガベージコレクション（GC）が発生し、画面のカクつき（GCスパイク）の原因になります。
これを防ぐため、初期化時に必要な数のオブジェクトを事前に配列に確保し、それらを使い回す「固定長プール（Zero-Allocation）」の概念を実装しました。
class ObjectPool {
constructor(createFn, size) {
this.pool = Array.from({ length: size }, createFn);
}
get() {
// 非アクティブなオブジェクトを探して再利用
const item = this.pool.find(i => !i.active);
if (item) item.active = true;
return item;
}
forEachActive(callback) {
for (let i = 0; i < this.pool.length; i++) {
if (this.pool[i].active) callback(this.pool[i]);
}
}
}
② 比例航法 (Proportional Navigation) によるホーミングレーザー
マルチロック後に放たれるホーミングレーザーの軌道計算には、実際のミサイルなどでも使われる「比例航法（Pro-Nav）」の簡略版を取り入れています。
単純に「ターゲットの方向を向く」のではなく、自機・ターゲットの相対速度ベクトルを計算し、未来位置へ向かってスムーズかつ鋭く追尾する軌道を描くように調整しました。さらに、過去の座標履歴を Float32Array で保持し、滑らかな軌跡（尻尾）を描画しています。
③ ジャーク（加加速度）を利用した視覚エフェクト
機体の移動には加速度（Acceleration）をベースにした速度Verlet積分を用いていますが、さらにその微分である「ジャーク（Jerk：加加速度）」を計算しています。
急な方向転換やダッシュ、被弾時など、機体に急激な力が加わった（ジャークが一定値を超えた）瞬間に、背景の星のスクロール速度を上げたり、画面全体にスピード線（視覚ノイズ）を走らせることで、ゲームの「手触り」や「疾走感」を演出しています。
④ Web Audio APIによるBGM・SEのリアルタイム合成
音声ファイル（mp3やwav）は一切読み込まず、すべてブラウザの AudioContext を使ってリアルタイムに音を合成（プロシージャル生成）しています。
-
BGM:
OscillatorNodeとLFOを組み合わせたアンビエントパッドに、ランダムなペンタトニックスケールを奏でるアルペジエーターを実装。 - SE: ドップラー効果を模したゼロシフト音や、ノイズとフィルターを組み合わせた爆発音などをコードベースで生成。
おわりに
Webブラウザだけでどこまで「ゲームらしい手触り」と「気持ちのいい操作感」を表現できるか、という研究開発（R&D）を兼ねて作成したプロトタイプです。
ぜひ実際にリンクから遊んでみていただき、操作感や「こういう武器が欲しい！」などのご意見・フィードバックをいただけると嬉しいです！