カテゴリ

open all | close all

プログラムを別ファイルへ

大きくなってしまた・・・

ゲームは完成しましたが800行以上になってしまいました。これでは目的の関数までスクロールするにも時間がかかってしまいます。これだけ長くなると開発時でも保守時でもデメリットが大きいです。

今更ながらですが、ここでプログラムを分割し別ファイルにしていきます。

分割方法

プログラムを機能単位にグルーピングします。そしれそれらをJavaScript(ファイル識別子が「.js」)のファイルにします。

分割したファイルを利用するには複数の方法があります。今回は次のようにHTMLのタグを使いファイルを読み込みます。※別方法は「Reactチュートリアル-アレンジ」を参照してください。

変数、関数の利用

一つのファイルで記述していたプログラムを複数ファイルに分割すると、ファイル間で変数や関数が利用できるか気になるところです。基本的には今まで通り利用できます。

しかし注意すべきことがあります。それはプログラムがメモリーに展開されていない場合は当然の如く利用できません。

これを避けるため全ての情報がメモリーに展開された時に実行されるように「window.onload」命令を利用していました。(画像を表示)

ところが「window.onload」内の命令は工夫をしないと囲まれた外から利用することができません。

対策として「window.onload」で囲む命令は、メモリー展開後に実行なければいけない初期化系関数の実行、要素の読込/サイズ計算のみとします。

分割内容

次の分類で分割を行います。

ファイル名内容
main.jsメイン処理
const.js定数定義
start.js開始処理
final.js終了処理
my.js戦闘機、弾丸処理
teki.js敵機処理
info.js情報表示
event.jsキー、マウス、タッチ処理
collison.js衝突処理
anime.jsアニメーション処理

分割したソースコードを掲載します。