01:「最初の一歩、画面を表示しよう」 – JavaScriptライブラリ「tmlib.js」でシンプルなタッチゲームを超簡単に作るチュートリアル
はてなブックマーク - 01:「最初の一歩、画面を表示しよう」 – JavaScriptライブラリ「tmlib.js」でシンプルなタッチゲームを超簡単に作るチュートリアル
Pocket

画面を表示しよう!

サンプル

コードの解説

まず最初に、実行するmain.jsと、HTMLファイルであるindex.htmlファイルを作ってから始まります。中に記述しているコードは次のようになってます。

HTMLでtmlib.jsのロードを行なっています。tmlib.jsを利用するにはcanvasを作っておかないといけません。準備はこれだけです。次は実際にtmlib.jsを動かすコードとなります。

tm.main関数からアプリケーションの処理を開始していきます。スクリーンサイズなどのアプリケーションの設定を行ってapp.run()を行うことで、アプリケーション実行開始です。画面を表示する儀式と思ってもらえたらと思います。

もうちょっと詳しく解説

main.jsの記述ですが、人によると見慣れない書き方がいくつかあるかと思います。

これはネームスペースと言われるもので、このgameという変数の中に全てデータをいれこんでいきます。なのでグローバル領域を汚しません。

これも同じくネームスペースの処理ですね。関数の中に変数を閉じ込めています。よく分からない!という方はオマジナイだと思ってもらって差し支えはありません。

定数を別ファイルに分けよう

サンプル

コードの解説

ゲームを起動するために使った値は、今後ゲームを新しく作る際に作りやすいよう別ファイルで管理しましょう。新しくparam.jsというファイルを作るので、HTMLのコードを書き換えます。

新しくファイルを追加したので、読み込むJavaScriptのファイルが増えましたね。param.jsというファイルにmain.jsファイルの記述を移します。

main.jsファイルで記述していた変数を別ファイルに移しました。ゲームを作る上で必ず必要になるようなデータはparam.jsに記述するようにすれば、管理がしやすくなるので今のうちにやっておきます。
 
nsという変数に直接登録した変数は、nsを呼び出すことで変数を使うことができます。次のようにです。

param.jsファイルでスクリーンサイズに関する変数を登録しているので、main.jsファイルからでもnsを通して呼び出せるようになります。