main.jsを外部ファイルに切り分ける

main.jsに書いたコードが長くなり、行数が増えると今いじりたい箇所も探しづらくなる。
色々なアプローチはあるだろうけど、ここでは"外部ファイル"にしてみようと思う。

例えば、設定ファイルが書かれた部分…
前回のコードだと、
/*
* constant
*/
と書かれた、ASSETSが置いてあるような所は、他と明らかに役割が違う。

他の tm.main(function() { … }とやらは一つの処理の流れだけど、
ここに置いてあるのは、後々読み込まれるデータ。
特に、画面の大きさである SCREEN_WIDTH や SCREEN_HEIGHT の値を、そう頻繁に変えるとは思えない。

ここら辺りを、main.jsとは別のファイル…"setting.js"という名前にでもして、そちらに移してしまおう。

といってもやり方は簡単で、普通にテキストファイルを作る要領で作り、名前を"setting.js"にするだけ。
(windowsの設定で拡張子の見えるようにしてあると、やりやすい)

そして移したい部分を切り取って、そちらに貼り付ける。
今回は

/*
 * constant
 */
var SCREEN_WIDTH    = 640;
var SCREEN_HEIGHT   = 480;
var SCREEN_CENTER_X = SCREEN_WIDTH/2;
var SCREEN_CENTER_Y = SCREEN_HEIGHT/2;




// アセット 
var ASSETS = {
    "CAR": "car.png",
};
//画像読み込み
tm.asset.AssetManager.load("TitleImage" , "title.png");


/**
 * リソースの読み込み
 */
tm.preload(function() {
    // 音
    tm.sound.SoundManager.add("hit_se", "hit_se.wav");
});


// ユーザーのデータの定義
tm.util.DataManager.set("userData", {
    score: 10,
	goal: 400 ,
	speed: 1
});

といった部分だ。

setting.jsは画像や効果音と同じく、同フォルダに置く。
そして読み込む。
方法は幾つかあるみたいだけど、今回は一番簡単だろうindex.htmlに書く方法でやってみる。

index.htmlをテキストエディタで開き、

<script src="main.js"></script>

という部分を見つける。
つまりここがmain.jsを読み込んでる部分なのだ。

同じように、main.jsの読み込みの前に

<script src="setting.js"></script>

と書く。
(main.jsの中でSCREEN_WIDTHが使われてるから、それを作るsetting.jsを先に読み込ませないとだめ)

要はindex.htmlを中心として、.jsを複数読み込めると。
グローバル変数なら、違うファイルだろうと同じように使える。

こうした設定部分だけでなく、シーンごとに切り分けるとかも出来るだろう。
分かりやすいように切り分けていくのも手だ。