さて、そろそろ本題に入りましょう。 本ページではこれから、動くゲームをJavaScriptという、 プログラミング言語で書く方法を説明していきます。 書き方はこんな感じです。上記の、<script type="text/JavaScript"> ～ </script> は、 JavaScript を使用する際のお約束だと思って下さい。 上に「※ここにプログラムを書きます」と書いている部分がありますが、 そこに、これから解説する「JavaScriptのプログラム」を色々と書くことになります。
<html> <head> <title>ゲームタイトル</title> </head> <body> <script type="text/JavaScript"> ※ここにプログラムを書きます </script> </body> </html>
それでは、Htmlの時と同様に、JavaScriptを使用して 「こんにちは」と書いてみましょう。上書き保存して、再読み込みして…
<html> <head> <title>ゲームタイトル</title> </head> <body> <script type="text/JavaScript"> alert( "こんにちは" ); </script> </body> </html>
どうでしょうか？ ダイアログが出て「こんにちは」と表示されたでしょうか？
↓alert表示の例
この様にして、alertという文字を打ち込んで、 (と)で囲んで、さらにその中に "と" で囲んだものを書きます。 一連の記述の最後には ;（セミコロン） を書きます。
このように、"と"で囲って書いたものが そのままダイアログ上で表示されるというのが、関数 alert の機能です。 おっと、関数というのは聞きなれない言葉ですね。 こういう風な形、 つまり英字に続いて「(」と「)」が続く形をしているものを、 まとめて関数と呼んでいるのです。 今後も出てきますので今回はこれくらいにしておきますね。
もう「今晩は」と表示するのはカンタンですよね？ですから。
<html> <head> <title>ゲームタイトル</title> </head> <body> <script type="text/JavaScript"> alert( "今晩は" ); </script> </body> </html>
さて、では、ちょっと次のを試して見て下さい。
どうでしょうか？思った通りの動作でしたか？ この様に、関数は続けて書くことができます。 ウェブブラウザはそれを、上から下へ順に実行していきます。 なので順番にダイアログが出ることになります。 ちょっとわかりづらい場合は、 alertの中の文字や順番を変更して色々と試してみてください。
<html> <head> <title>ゲームタイトル</title> </head> <body> <script type="text/JavaScript"> alert( "こんにちは" ); alert( "今晩は" ); </script> </body> </html>
ＷＥＢブラウザはほとんどの方が インターネットエクスプローラ を使用されていると思いますが、 ネットスケープや、 おススメしているFireFoxというものもあります。
先程書いた alert みたいな関数はどちらでも動くのですが、 やっかいな事に、片方でしか動かないものもあるのですよ。 そこで、本格的な説明に入る前に、その判別方法を説明します。 以下のプログラムを <body> ～ </body> の間に 挿入してみて下さい。実行すると、 FireFoxや、ネットスケープ6.0以上で見ている方は true、 インターネットエクスプローラーの方やその他の方は false と表示されるハズです。 うまくいきましたか？ これを確認したら、NN6 を IE5 にして試してみて下さいね。
<script type="text/JavaScript"> // ブラウザバージョンセット var brver; // ブラウザのバージョン var NN6; // NN6.0以上なら true var IE5; // IE5.0以上なら true brver = eval(0 + navigator.appVersion.charAt(0)); NN6 = (brver >= 5 && navigator.appName=="Netscape"); IE5 = (brver >= 4 && navigator.userAgent.indexOf("MSIE")!=-1); alert( NN6 ); // 本文はここへ </script>
さてさて、新しい事が色々出てきましたが、 ３点説明させてもらいます。
- //
これ、便利なので覚えて下さい！ // (半角スラッシュ２つです…「スラスラ」とか読んでます)を書くと、その行の // より右側には 好きな事を書いておけるのです。 何を書いてもコンピュータは無視します。 逆に言えば、ここに書いてあっても何もしてくれません。 ま、というわけで普通は上の様に、// の右に色々とコメントを書いておきます。 便利でしょ。 あ、もちろん <script type="text/JavaScript">と</script>に囲われた間だけしか効きませんけど。 簡単なので使ってみて下さいね！
- var
これは重要なので説明しちゃいます。 var の後に、英数字の文字を書いて ;(セミコロン)を書くと、 それは、その文字列が変数として扱われるという意味になります。 例えば、上の本文の所にこう書いてみて下さい。実行（再読み込み）してみましょう。 どうでしょう。123と表示されましたでしょうか？
var test; // test という名前の変数を用意してね～ test = 123; // test の中身は 123 だよ～ alert( test ); // test の中身を表示して～
説明は上のコメントに書いた通りですが、もう少し説明しますと、 test という名札の付いた箱を用意して、 その中身に 123 を入れて、その中身を表示するっていうプログラムです。
ここまで来ると、もう本格的なプログラムなんですけど、 どうです？結構カンタンですよね？
なお「=」については後でもう一度解説します。- ブラウザバージョンセット
全体的には「おまじない」的にこういうものだと思って下さい。 このままコピーして使いましょう。 もう少し詳しくなって、中身も知りたくなった時は、 alert( navigator.appVersion ) 等として、 それぞれの中身を表示してみましょう。
さて、少し先になりますが４章の「4-d.絵を動かしてみましょう」 などはこれが無いと動きません。 非常に重要なのでこの部分は再掲します。なお上記では説明しやすくするためbody内に書いていますが、 実際にはhead内に書いて使用します。 全体から見た挿入位置は「3-f. JavaScriptの基本形」に書いてありますので、 再度確認してください。
// ブラウザバージョンセット var brver; // ブラウザのバージョン var NN6; // NN6.0以上なら true var IE5; // IE5.0以上なら true brver = eval(0 + navigator.appVersion.charAt(0)); NN6 = (brver >= 5 && navigator.appName=="Netscape"); IE5 = (brver >= 4 && navigator.userAgent.indexOf("MSIE")!=-1);
文字を押すと他のページに飛ぶ設定をしているページがよくあります。 ってゆーか、ここへ来る方法もそれですね。あれをアンカーと呼びます。 このアンカーを押した時に、JavaScript の関数が起動するようにする事も できるのです。それを利用してみましょう。
<html> <head> <script type="text/JavaScript"> function gameStart() { alert( "ゲーム開始！" ); } </script> </head> <body> <a href="JavaScript:gameStart()">押したらスタート</a> </body> </html> じっくり解説
- alert
「3-b. こんにちはと表示してみましょう！」 でも説明しましたが、メッセージを表示してＯＫが押されるまで待つ関数です。 こんな風に便利に使えるので、今後もちょくちょく登場させますね。
↓押した後の例 - function
まずは呼び出される方を準備します。 具体的には、functionという命令を用いて関数を定義します。以下の様に書きます。さてさて function で何ができるかというと、今まで出てきた「alert」 のようなものを、今度は自分で定義することができるようになるのです。
function 関数名( 変数名 , 変数名… ) { 中身 }
関数は、alert のようにJavaScriptで初めから定義されているものと、 今回の gameStart のように自分で定義するものがあります。 最初から定義されているものはもちろん名前とか中身は変更できませんが、 自分で定義するものは自由に定義、変更が可能です。 gameStartという名前は、私が決めました。
自作関数の定義の例を書きますね。
これは Test という名前の関数を定義しました。 実はこのプログラムだけでは見た目は何も起きません。 これでアンカーなど別の場所から Test() を呼び出すと、 関数定義された中が呼ばれ「てすとです～」と表示されます。
function Test() { alert( "てすとです～" ); }
ではここで少し考えていただきたいのですが、これを実行すると、どういう順番でalertが表示されると思いますか？
alert( "A" ); function Test() { alert( "B" ); alert( "C" ); } alert( "D" ); Test(); alert( "E" );
実は A→D→B→C→E の順なんですね～。どうでしょう？理由はわかりますか？ 是非色々試したりして理解を深めていってください。
さて、自分で定義する関数の中身も 初めから定義してある関数や、 自分で作った関数を使って書きます。 今回は alert という、初めから定義してある関数を使って書きました。 次からは、このgameStartという関数を使うことも可能です。 つまり一度定義してしまえば、最初から定義してある関数と何も変わりません。 ゲーム制作を意識すると、という形にするのが良いと思います。 他の関数もどんどん作りましょう。 機能単位で細かく分けると、 美しくてバグ(不具合とか問題のことをバグと言います)の少ないプログラムを作ることができます。
- アンカーから呼び出される関数
- ゲームを初期化する関数
- ゲーム本体の関数
なお今回のgameStartのように変数を使わない場合は、 変数名を省略して () と書きます。 またプログラムが大きくなると関数も多くなるので、 関数の名前はわかりやすく付けるのがコツです。
//------------------------------------------------ // ゲーム開始関数(アンカークリックで呼ばれる) //------------------------------------------------ function gameStart() { // 自分で関数を定義 alert("ゲーム開始！"); // JavaScript定義されている関数の呼び出し gameInit(); // 初期化 (下記で定義されている自作関数の呼び出し) gameBody(); // 本体 (下記で定義されている自作関数の呼び出し) } //------------------------------------------------ // ゲーム初期化関数 //------------------------------------------------ function gameInit() { // 更に自作関数を定義 alert("ゲーム初期化"); ※各種初期化処理を書きます } //------------------------------------------------ // ゲーム本体の関数(メインループ) //------------------------------------------------ function gameBody() { // 更に自作関数を定義 alert("ゲーム本体"); ※ゲーム処理の本体を書きます }
ヒント：詳しく知りたい方へ実はJavaScriptに定義されているもの全てを関数と呼ぶのは本当は間違いで、 メソッドなどの文言を正確には使用しなければならない場合もあります。 ただどう呼んでもプログラムには関係無いので、 「ゲームの作り方 by BFF」の中では区別せず、 すべてを「関数」と呼ぶことにします。関数定義を書く位置についても解説しましょう。 関数定義はhead内に書くのが良いです。 呼び出しはbody内になります。 理由はheadはbodyより必ず先に実行されるためです。 これでbodyで呼び出す前に関数定義が確実に終わっているようになります。
ブラウザとバージョンはすべての処理で使うので、 head内でも最初に書きます。
<html> <head> <script type="text/JavaScript"> : ※自作関数定義(function宣言) : </script> </head> <body> ※HTML本体やアンカーからのJavaScript呼び出し等 </body> </html>
- <a href=…> ～ </a>
これを用いてアンカーと押された時に起動する関数を指定します。 通常は href= の後に飛び先を指定するのですが、 そこに JavaScript と書いて :(コロン)を書いて、関数を書きます。 ""(ダブルクォーテーション)で囲うと良いでしょう。こんな感じですが、 上の例のように呼び出す関数に引数が無い場合は、() と書きます。
<a href="Javascript:関数名( 第１引数 , 第２引数… )">押されるもの</a>
この章はJavaScriptの基本を解説しました。 色々な要素が出てきたので、何をどこに書くべきかがちょっとわかりづらいですよね。 まとめまてみましょう。４章以降の解説ではこれを知っているものとして話を進めていきます。 ですのでしっかり覚えるか、毎回ここに戻って確認しながら、ゲームを作っていきましょう！
<html> <head> <script type="text/JavaScript"> ※ブラウザバージョンセット(IE5やNN6の定義) ※自作変数定義(var宣言) ※自作関数定義(function宣言) </script> </head> <body> ※HTML本体やアンカーからのJavaScript:gameStart()呼び出し等 </body> </html>
JavaScriptでページを作っていると、 うまくうごかない場合が良くあります。 私もしょっちゅうです。 こんなとき、エラーメッセージが出ている場合がよくあります。 例えば綴りを間違えていたり、; が抜けてたり…
↓IEのエラーメッセージの例
ファイアーフォックス3.xの場合は、 ツール＞エラーコンソール でエラーメッセージを見ることができます。
インターネットエクスプローラーの方は、 ツール＞インターネットオプション＞詳細設定＞スクリプトエラーごとに通知を表示する でエラーメッセージは出てくるようですが、
ツール(表示)＞インターネットオプション＞詳細設定＞ブラウズ
で、「スクリプトのデバッグを使用しない（無効）」 のチェックを外すとエラーメッセージが出て来るという情報もあります。 バージョンによって違う動作になるかも知れません。
エラーを見ると、行数(ライン)とかエラーの内容が出ています。 行数と言うのは、そのページの最初から数えて何行目かという事です。 最初はちょっとわかりづらいかも知れませんが、 とりあえずエラーになっている位置はおおよそ特定できますし、 慣れると非常に便利です。 これからJavaScriptで作っていくと必要になりますんで、 今のうちに設定しておきましょう！
この中でも気をつけることがいくつかあります。 「ライン１」でエラーが発生する場合がありますが、 これは、アンカー内で問題が起きているということです。 例えば href="JavaScript:gamestart()" と書いてしまった場合とかに出ますね。 (本当は href="JavaScript:gameStart()" でなければならないということです) また「オブジェクトがありません」とか「オブジェクトを指定してください」と出ることがありますが、 大抵の場合、関数や変数を定義していないのに使用しているというケースが多いです。 実はこのあたりがファイアーフォックスの方の表示が親切なので、 ゲームを作るならファイアーフォックスがお勧めだったりします。
いずれにしても最初は難しいと思いますが、経験なので、 失敗した分だけ、エラーを見た分だけ、レベルが上がっていくものですので、 くじけずに頑張ってください。
(情報協力：ふむふむさん)
ヒント：ファイアーフォックスとは
フリーのウェブブラウザーです。ココからダウンロードできます。 最近少しずつFireFoxのユーザーも増えているようです。 FireFox(ファイアーフォックス)関連書籍も結構出ていますので十分に使えるのではないでしょうか。
前章「2.HTML」までを理解された方で、 本章「3.JavaScript導入」についても一区切りついた方にお願いです(必須ではありません)。 よろしければ、「3-a.JavaScriptってどう書くの？」～「3-g.エラーメッセージについて」について、 最もあてはまるものを選んでいただいて 「アンケートを送信する」を押してください。
ご協力ありがとうございます。
