ここまでjActionの基本を学んできました。
ここから、一歩踏み込んだ学習をしていきます。
いままではjActionのメインメソッドである[Main.js]に、新規の命令を全て書いてきました。
これでもプログラムは出来ますが、複雑なゲームなどを作り出すと、[Main.js]が、どんどん長くなって見にくくなってきます。
チュートリアル2で出てきたブロック崩しを完成させると考えてしてみましょう。
チュートリアル2のブロック崩しは、ボールが勝手に跳ね返るだけで、ユーザー側が操作するゲームになっていませんから、ついでに指でバーを動して跳ね返す普通のゲームに仕上げてしまいましょう。
いきなりゲームが始めるのではなく、タイトルやスタート画面などが出ていて、そこを抜けるとゲーム本体に飛ぶという画面遷移を考えてみます。よく見られるゲームの一般的な画面遷移です。
せっかく画面遷移でブロック毎に分けられるのに、そこを全部Main.jsに書くと無駄にコードが長くなるばかりか、分業にも向いていません。
Aさんというプログラマーさんが、タイトルやスタートの部分をつくり、Bさんがゲーム本体を作るようにすれば、全部を担当しなくても良くなります。
小さいプログラムのうちは、一人の方が組みやすい場合もありますが、それでは限界があります。
今回は新規に「Start.js」「Game.js」という2ファイルを作って進めていきます。
「Start.js」は、タイトル画面を担当するプログラム、「Game.js」はゲーム本編のプログラムを担当します。
じゃあ「Main.js」は、なにをするのでしょうか。
「Main.js」は、まず「Start.js」を動かしてタイトルを表示させ、「Start.js」からタイトル画面終わり命令を受け取ったら「Game.js」を動かしゲーム本編を動かします。
いわば司令塔の役割を行うのです。「Main.js」は司令塔に専念させる事にして、各ブロックの専門はそれぞれにやらせることにします。
まず「Main.js」「Start.js」「Game.js」の3ファイルを作ります。
3ファイルの中身は、それぞれ
●「Main.js」
Main = function()
{
}
|
●「Start.js」
Start = function()
{
}
|
●「Game.js」
Game = function()
{
}
|
とします。
これが基本形です。
jsファイルを準備したら、そのjsファイルをHTMLから呼べるようにしておくのも重要です。
「Main.js」は、元々存在してるのでHTMLに既に登録されているので大丈夫ですが、「Start.js」「Game.js」は違います。この2つが呼べるように、HTMLを書き換えます。
●「index.html」
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>テストサンプル</title> <script src="jaction.js"></script> <script src="Start.js"></script> <script src="Game.js"></script> <script src="Main.js"></script> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> </body> </html> |
とします。
元々のindex.htmlに
<script src="Start.js"></script> <script src="Game.js"></script> |
の2行が加わっています。
これで、シーン毎に制作を分ける為の下準備が出来ました。
次回は、この3ファイルにプログラムを書いて実際に動かしてみましょう。
