大砲シミュレーションゲームを作ったんです

HTML, CSS, Javascriptを使って大砲シミュレーションゲームを作りました。ブラウザゲームで良く使われるcanvasを使用して作成しています。

初速度と角度を入力して発射ボタンを押すと、弾の起動が描画されて落下地点のまでの飛距離が右上に出力される仕様にしています。

今回は、空気抵抗のある場合の斜方投射の式を使ったので、弾の軌道が左右対象になっていません。空気抵抗のある斜方投射の式は以下の通りです。

上の式をそのまま使うと、飛距離（x）が一つに決まってしまいますよね。ですが、実際には環境の変化などによって誤差が生じるので、飛距離は毎回違うはずです。ですので今回は、質量、初速度、角度、空気抵抗係数に乱数で誤差を与え、現実の状態に近づけるような設定にしています（重力加速度も場所によって変わりますが、今回は外しました）。初速度と角度を同じにしても、誤差があるので飛距離は毎回同じにはなりません。各誤差のイメージは以下の通りです。

・質量　→　使う弾の重さは完全には同じではない
・初速度　→　火薬の量、詰め方などによって、与える力は同じにならない
・角度　→　振動などで微妙に角度が変わる
・空気抵抗係数　→　風の強弱によって変わる

ここからは、今回作った大砲シミュレーションのプログラムコードを公開しています。理解していただけるように、コードのコピペだけではなく説明しながら書いているので、良ければご覧ください。記事の概要は以下の通りです。

■対象
・HTML, CSSを扱える人（HTMLの要素にclass名を設定しCSSで装飾できるレベル）
・簡単な数学を理解している（四則演算、三平方の定理、指数、ラジアン、三角関数）

■内容（説明の順番ではありません）
canvasの使い方（背景画像、大砲の画像）
　・canvasを設定する
　・画像を描画する
　・画像を削除する
インプットボックスの処理（角度、初速度）
　・文字が入力された時の対応を記述する
　・全角文字を半角に変換する
　・入力できる数字の範囲を指定する
　・角度に応じて大砲の画像を回転する
物理計算
　・空気抵抗のある斜方投射の計算をする
　・発射初期位置の計算（三角関数）をする
　・乱数を使用して誤差を与える

■投稿履歴
2020年11月　初版