JavaScript

第 5 回

今日の内容は、今までなんとなくおざなりにしてきたJavaScript の構文の勉強です！これをすることで、皆さんも自力でいろいろ出来るはず！

と言ってもただ単に色々言われてもよくわからないうえにつまらない。

ので、実際にプログラムを見ながら勉強していきましょう。使うのはシューティングとして配ったプログラムです！もはやシューティングじゃない人もいますが。。。

今日の授業は、構文を勉強しつつ、ゲームのプログラムが全体でどうなっているのかすこしづつ見ていきましょう。

１． HTML

何は無くとも、といった感じですが、これがないとブラウザは何も表示することが出来ません。JavaScript か？ と言われると、違います。これはサーバから渡される、どう表示をすべきかが書かれたファイルです。

皆さんにお配りした html ファイルはかなりシンプルです。WEB ページとなるともう少し複雑になりますが、ゲームの場合ほとんどのものを JavaScript で描いてしまうのでHTML で描くことはほとんどありません。大事なのは canvas というものくらいです。

HTML 5 とはなんなのか？

今まで決めていなかった、あったら便利を再整理したもの！

Flash は良く参考にされています。ある意味 Flash を亡き者にするために決められたものです。それくらい Flash というのは良く出来ていました。

HTML 5 で新しく追加された大きな機能

canvas ( 描画機能 )audio ( 音声機能 )web socket ( 通信機能 )video ( 動画再生機能 )storage ( ファイル保存機能 )

HTML 5 で新しく追加された大きな機能

どう考えても、ゲーム向きな機能ばかりでないです？

ただし、まだブラウザ毎に実装されていたりされていなかったり！audio に至っては Apple がなんとなく拒絶気味。3D 表示機能の webGL は Microsoft が乗り気でない（ DirectX の競合）

なので、実際に動くのかどうか、よくよくテストをしましょう。

ちなみに対応されているかどうか、簡単に調べる方法はないの？

それが、 Modernizr.js です！

２． Modernizr.js

これはいわゆる、ライブラリというやつです。

便利な機能をいつでもどこでも使えるように整理されたもの！世の中にはこういった便利なものを無料で使えるようにしてくれる人がいるのです。

どこでつかわれているの？

Main.jsfunction enviromentCheck()

function enviromentCheck(){

var isCanvasSupport = Modernizr.canvas;var isAudioSupport = Modernizr.audio;

return isCanvasSupport && isAudioSupport;}

対応しているかチェックしたいもの

対応していないものがあった場合、このゲームは動かせないのでチェックが必要です！！！

環境が満たされているか

満たされていれば、 GameStart()満たされていなければ何もしない。

if 文

if ( 何か正しくなる条件 ){

// 何かやりたいこと}

{ で始めて } で終わるのがルール

きちんと囲まれているかわかりやすくするために中身の部分は１段階そろえて隙間を空ける

if ( 何か正しくなる条件 ){

// 何かやりたいこと}else if ( さらに何か条件 ){}else{

// その他。どの条件にもハマらなければここ}

試しに皆さんで書いてみましょう。

Shooting.html をどこか適当な場所にコピーして、<script src=“test.js”></script>と追加して、他の ~.js の部分を消してください。

そして、同じフォルダ内に test.js を作りましょう。

test.js に書くこと

value の値を色々変えてみてください！

ex)value = false;value = 0;value = -10;value = “test”;value = “”;

どうです？なんとなく想像通りです？

では次はこう変えてみましょう。

これはどうでした？

じゃあどうすれば良いのか。JavaScript には、== と === があります！

ちなみに私が皆さんにお配りしたものは大体の場所が == となっています。

知らなかったわけではないですよ。。。ほとんどの場合、問題にならないからです。それに === という書き方は他のプログラミング言語では一般的ではありません。なのであえて == を選んで書きました。気になる人は修正したらいいんじゃないかなー。

変数

ところでいまさらですが、

var value = false;

って何を意味するんでしょうか？

もはや当たり前な気もしますが、var value = false;と書いてあれば、 value は false になります。

value = 0; と書けば value は 0 になります。value = “test” と書けば、 test という文字になります。

var は初めて使う場合に付けます。

var value = 0;var value = false; // さらに付けるのはあまりよろしくない。

ちなみに実は初めて使うときも実は var つけなくても良いです。ですが、ろくなことにならないので、必ずつけましょう。

文字列

先ほど、var value = “test”;は文字になる、と言いました。さりげなく。

コンピュータというのは文字をどう扱っているか？実は、 A という文字は 65 なのです！

… どういうこと？

こう書いてみましょう。画面にはなんて表示されます？

どういうことかというと、プログラムは文字というのを理解出来ないので、65 という数字を、文字と認識しなさい、と言われた時だけ、A と画面に表示するようにしているのです。

そして皆さんが書いたこれは、 0 番目の文字は数字的にいくつとして扱っているかを教えてもらうということ！

興味あればdocument.writeln(“1”.charCodeAt(0));を書いてみてください。意外に面白いですよ。

ちなみにここから“ 文字化け” がおきる仕組み、想像できます？

世の中には文字コードといういわゆる文字のフォーマットがあります。

フォーマット A で書かれた、”日” という文字。数字では 26412 です。

フォーマット A と認識して読取ってみると… ?26412 => “ 日” なので、画面に 日 と表示

フォーマット B と認識して読取ってみると… ?26412 => “�� ” なので、画面に �� と表示

試しに実際に文字化けを起こさせてみましょう。

document.writeln("<p></p>");document.writeln(" 日本語 ");

を追加した後、Chrome で、 ≡ をクリック。ツール → エンコード → UTF-8 を選択してみると… ?

下から順ということで、次は Ground.js を見てみましょう

今回の見どころはここです！

配列 (Array)

配列とはなにか

一定のルールに従ったたくさんのものを１つの塊として扱う方法

例えば、”数字” というルールに従ったたくさんの集まり

1, 2, 5, 53, 12, 24, 3.1415….

例えば、”文字列” というルールに従ったたくさんの集まり

“Resource/Image/Player.png”,“Resource/Image/Enemy.png”,“Resource/Image/Shot.png”,

これらをまとめて扱うのにすごく便利！

でも、ほんとにこれ使う？何のためにあるのか良くわからないよ… ?

実は、配列というのはfor 文という、まとめて処理する方法とワンセットです！

参考書とかには必ず別々の機能であるかのように紹介されますが、for 文無しの配列というのは基本ありえません！！！

for 文

先ほどの test.js にこう書いて実行してみましょう

i を 0 から始めて

i が 10 になるまで

i を 1 ずつ増やす

後はこれをブレークポイントを置いてステップ実行しながら追いかけてみましょう

ちなみにこう書くと改行されます。HTML なので \r\n 等は使えません。

つまり

と書いたのと同じことになります。

ではここで。こう書くと画面には何が表示されるでしょうか？

配列はデータが順番に並んでいて、

array[ 取得したいデータの番号 ]

という形になります。fileList[1] というのは “ Resource/Image/Enemy.png” と同じです。

ちなみに、

array.push( 何か );

で配列の最後に何かを入れることが出来ます。

ところで、

と同じならなぜそう書かないのか？と思いませんでした？そんなあなたは優秀です。

理由１

何個も同じものを書くのはしんどい。。。３個くらいなら頑張りますけど、 100 とか 1000 とかはしんどい。

理由２

File A

File B

Enemy.png 使わなくなったよー！…忘れずに２か所を修正出来る… ?

ここを消せば、下は修正しなくていい！

配列で管理しておけば

これでもうこの部分が何をしているかなんとなくわかるのでは？

でもここだけわからない。

関数

これを書いてみて、ブレークポイントを置いてテストしてみましょう

もしこう書きなおしたら何が起きると思います？

実際動かしてみると、どうです？１行にすべて表示されてしまって見づらくないですか？せっかくなのでこれを改行表示してみて下さい。

こう書くのが楽ですよねー

というところで今日の授業は終わりです。基礎的な部分しか出来ていませんが、これだけ理解できればプログラムを書くにあたって困ることはありません！プログラムの大半は for 文と if 文と配列です。そしてそれらをまとめて関数にすればすごいプログラム完成です。

宿題１！以下の条件を満たすプログラムを次回までに書いてきてください。

1. 数字が 100 個ある配列を作ってください2. それを全部出力してください3. ただし、出力する部分は関数にしてください4. 数字は改行して出力してください

解答フォーマット

宿題２！

ある n が引数で与えられた時にそれが素数であるかどうかを判定する関数を実装してください

解答フォーマット例

宿題３！

フィボナッチ数列の n 番目の数字を出力する関数を実装してください。ただし、 n の数字は引数で与えられるものとする。

フィボナッチ数列an = an-1+ an-2 となるような数列1, 1, 2, 3, 5, 8, …

解答フォーマット例

宿題 4 ！

n の高さのハノイの塔の解法を出力するプログラムを実装してください。n は引数で与えられ、出力のルールは1 => 3といったものを改行しつつ出力すること。特にフォーマットは準備しません。

宿題は全部できれば理想ですが、出来なければ出来るところまでで大丈夫です。２つ目位までは簡単に解けるので実装してきてください。

おわり