HTML+JavaScriptで砲術照準シミュレーターを作ってみた

今回は HTML と JavaScript だけで動作する、ブラウザ上の砲術照準シミュレーターを作成してみました。

リンクをクリックすればそのまま遊ぶことができ、特別なプラグインなどは不要です。
https://nas6.net/pillbox000.htm
https://nas6mixfoolv.github.io/NAS6LIB/pillbox000.htm

---

単なるシューティングゲームではなく、

• 距離を推定する
• 適切な照準目盛りを選択する
• 放物線弾道を考慮する
• 命中精度を競う

という、実際の砲術に近い要素を取り入れています。

なぜ作ったのか

最近のゲームでは照準位置に即座に弾が着弾するものが多くなっています。

しかし実際の戦車砲や迫撃砲のような兵器では、

• 目標までの距離
• 弾速
• 重力による落下

を考慮して射撃しなければなりません。

そこで、

「距離を見極めて適切な照準目盛りを使うゲーム」

を作ったら面白いのではないかと思い、試作を始めました。

照準システム

通常のFPSでは照準中央に狙えば命中します。

今回のシステムでは少し違います。

|- + -| 0m
|- + -| 200m
|- + -| 400m
|- + -| 600m
|- + -| 800m
|- + -|1000m

マウスポインタは0m照準に追従します。

遠距離目標を狙う場合は、目標位置を1000m照準などに合わせて射撃します。

その結果、発射された弾は放物線を描きながら飛行し、対応する距離目盛り付近に着弾します。

これによって、

「どの目盛りを使えば当たるか？」

という読みがゲーム性になります。

放物線弾道

弾丸は単純な直線ではなく、時間経過に応じて重力を受けます。

概念的には次のような計算です。

x += vx;
y += vy;

vy += gravity;

重力により弾は徐々に落下します。

このため、長距離目標ほど上方を狙い下側の照準目盛りを使用する必要があります。

単純ですが視覚的な説得力が大きく、砲術らしい操作感が得られました。

ターゲットの演出

今回は敵戦車が奥から徐々に接近してくるようにしています。

距離が近づくにつれて、

• サイズが大きくなる
• 移動速度が変化する
• 命中しやすくなる

ため、プレイヤーは距離感を読みながら射撃できます。

完全な3Dではありませんが、疑似3D的な表現でも十分距離感を演出できます。

命中判定とスコアシステム

命中時には戦車が白く点滅します。

さらに着弾精度によって得点が変化します。

例えば、

• MISS
• HIT
• PERFECT HIT

のような判定を行い、

PERFECT HIT にはボーナスダメージを与える仕組みも追加しました。

また、スーパーリロードコンボも発動し、一気に逆転を狙えるようにしました。

単純な命中・失敗だけでなく、

「どれだけ正確に狙えたか」

を評価できるようになっています。

オートモード

ゲームバランス調整のため、自動射撃モードも実装しました。

オートモードではコンピュータが自動的に照準と射撃を行います。

これにより、

• バランス確認
• 命中率確認
• デバッグ

が容易になります。

ただしランキング性を維持するため、オートモード時はハイスコア保存対象外としています。

NAS6LIBとの関係

このシミュレーターはNAS6LIBのサンプルコンテンツとして公開しています。

実際に利用している機能は主にタイマーマネージャですが、

ライブラリ単体の説明よりも、

「ライブラリを使って何が作れるのか」

を示す方が面白いと考えました。

技術デモだけでなく、実際に遊べる形にすることで実用例としても分かりやすくなります。

今後の予定

現在はシンプルな試作段階ですが、今後は以下のような機能も考えています。

• 戦車画像への差し替え
• 複数種類の敵
• 風による弾道変化
• 着弾エフェクト強化

特に「距離を読む」という要素は一般的なFPSとは異なる面白さがあり、ゲームとしてさらに発展できそうです。

まとめ

HTML と JavaScript だけでも、単なるクリックゲームではなく砲術シミュレーターのような作品を作ることができます。

今回実装したのは、

• 距離別照準目盛り
• 放物線弾道
• 命中精度判定
• スコアシステム
• オート射撃

といった要素です。

ゲームとして遊べるだけでなく、弾道計算やUI設計の実験場としても面白い題材だと思います。

個人開発では「まず動くものを作る」ことが重要なので、今後も少しずつ改良を続けていく予定です。

---

弾道学と照準についての補足

|---+---|　0 m　近い
 |--+--|　500m
  |-+-|　1000m　遠い

この照準に遠くのターゲットの見た目の横幅に合わせて狙うのならば
必然的に射線が上向きに補正されます
かなりストイックな設定です

---

リンク

ゲームリンク：
https://nas6.net/pillbox000.htm
https://nas6mixfoolv.github.io/NAS6LIB/pillbox000.htm

プレイ動画：

その1

その2・HELLモード

---

作者

GitHub: https://github.com/NAS6mixfoolv
X（旧Twitter）: https://x.com/NAS6_oxo
作者HP: https://nas6.net

気に入っていただけたら GitHub に ⭐ をいただけると嬉しいです！

---