Recomendados
Mais conteúdo relacionado
Mais procurados
Semelhante a ５回目Java script構文
Semelhante a ５回目Java script構文 (15)
Mais de Takuya Shishido
５回目Java script構文
- 6. １． HTML
- 8. 皆さんにお配りした html ファイルはかなりシンプルです。 WEB ページとなるともう少し複雑になりますが、 ゲームの場合ほとんどのものを JavaScript で描いてしまうので HTML で描くことはほとんどありません。 大事なのは canvas というものくらいです。
- 9. HTML 5 とはなんなのか？ 今まで決めていなかった、あったら便利を再整理したもの！ Flash は良く参考にされています。 ある意味 Flash を亡き者にするために決められたものです。 それくらい Flash というのは良く出来ていました。
- 10. HTML 5 で新しく追加された大きな機能 canvas ( 描画機能 ) audio ( 音声機能 ) web socket ( 通信機能 ) video ( 動画再生機能 ) storage ( ファイル保存機能 )
- 12. ただし、まだブラウザ毎に実装されていたりされていなかったり！ audio に至っては Apple がなんとなく拒絶気味。 3D 表示機能の webGL は Microsoft が乗り気でない（ DirectX の競合） なので、実際に動くのかどうか、よくよくテストをしましょう。
- 14. ２． Modernizr.js
- 17. function enviromentCheck() { var isCanvasSupport = Modernizr.canvas; var isAudioSupport = Modernizr.audio; return isCanvasSupport && isAudioSupport; } 対応しているかチェックしたいもの 対応していないものがあった場合、 このゲームは動かせないのでチェックが必要です！！！
- 19. if 文 if ( 何か正しくなる条件 ) { // 何かやりたいこと } { で始めて } で終わるのがルール きちんと囲まれているかわかりやすくするために 中身の部分は１段階そろえて隙間を空ける
- 20. if ( 何か正しくなる条件 ) { // 何かやりたいこと } else if ( さらに何か条件 ) { } else { // その他。どの条件にもハマらなければここ }
- 21. 試しに皆さんで書いてみましょう。
- 22. Shooting.html をどこか適当な場所にコピーして、 <script src=“test.js”></script> と追加して、他の ~.js の部分を消してください。 そして、同じフォルダ内に test.js を作りましょう。
- 23. test.js に書くこと
- 24. value の値を色々変えてみてください！ ex) value = false; value = 0; value = -10; value = “test”; value = “”;
- 26. では次はこう変えてみましょう。
- 27. これはどうでした？
- 28. じゃあどうすれば良いのか。 JavaScript には、 == と === があります！
- 29. ちなみに私が皆さんにお配りしたものは 大体の場所が == となっています。 知らなかったわけではないですよ。。。 ほとんどの場合、問題にならないからです。 それに === という書き方は他のプログラミング言語では 一般的ではありません。 なのであえて == を選んで書きました。 気になる人は修正したらいいんじゃないかなー。
- 30. 変数
- 31. ところでいまさらですが、 var value = false; って何を意味するんでしょうか？
- 32. もはや当たり前な気もしますが、 var value = false; と書いてあれば、 value は false になります。 value = 0; と書けば value は 0 になります。 value = “test” と書けば、 test という文字になります。
- 33. var は初めて使う場合に付けます。 var value = 0; var value = false; // さらに付けるのはあまりよろしくない。 ちなみに実は初めて使うときも実は var つけなくても良いです。 ですが、ろくなことにならないので、必ずつけましょう。
- 34. 文字列
- 35. 先ほど、 var value = “test”; は文字になる、と言いました。 さりげなく。
- 36. コンピュータというのは文字をどう扱っているか？ 実は、 A という文字は 65 なのです！ … どういうこと？
- 42. 世の中には文字コードという いわゆる文字のフォーマットがあります。 フォーマット A ” ”で書かれた、 日 という文字。 数字では 26412 です。 フォーマット A …と認識して読取ってみると ? 26412 => “ ”日 なので、画面に 日 と表示 フォーマット B …と認識して読取ってみると ? 26412 => “œ�” なので、画面に œ� と表示
- 43. 試しに実際に文字化けを起こさせてみましょう。 document.writeln("<p></p>"); document.writeln(" 日本語 "); を追加した後、 Chrome で、 ≡ をクリック。 ツール → エンコード → UTF-8 …を選択してみると ?
- 45. 今回の見どころはここです！
- 46. 配列 (Array)
- 48. ” ”例えば、 数字 というルールに従ったたくさんの集まり 1, 2, 5, 53, 12, 24, 3.1415…. ” ”例えば、 文字列 というルールに従ったたくさんの集まり “Resource/Image/Player.png”, “Resource/Image/Enemy.png”, “Resource/Image/Shot.png”, これらをまとめて扱うのにすごく便利！
- 50. 実は、配列というのは for 文という、まとめて処理する方法とワンセットです！ 参考書とかには必ず別々の機能であるかのように紹介されますが、 for 文無しの配列というのは基本ありえません！！！
- 51. for 文
- 53. i を 0 から始めて i が 10 になるまで i を 1 ずつ増やす
- 55. ちなみにこう書くと改行されます。 HTML なので rn 等は使えません。
- 58. 配列はデータが順番に並んでいて、 array[ 取得したいデータの番号 ] という形になります。 fileList[1] というのは “ Resource/Image/Enemy.png” と同じです。
- 61. 理由１ 何個も同じものを書くのはしんどい。。。 ３個くらいなら頑張りますけど、 100 とか 1000 とかはしんどい。
- 62. 理由２ File A File B Enemy.png 使わなくなったよー！ … …忘れずに２か所を修正出来る ?
- 65. でもここだけわからない。
- 66. 関数
- 70. こう書くのが楽ですよねー
- 71. というところで今日の授業は終わりです。 基礎的な部分しか出来ていませんが、 これだけ理解できれば プログラムを書くにあたって困ることはありません！ プログラムの大半は for 文と if 文と配列です。 そしてそれらをまとめて関数にすればすごいプログラム完成です。
- 72. 宿題１！ 以下の条件を満たすプログラムを次回までに書いてきてください。 1. 数字が 100 個ある配列を作ってください 2. それを全部出力してください 3. ただし、出力する部分は関数にしてください 4. 数字は改行して出力してください
- 73. 解答フォーマット
- 75. 解答フォーマット例
- 76. 宿題３！ フィボナッチ数列の n 番目の数字を出力する関数を実装してください。 ただし、 n の数字は引数で与えられるものとする。 フィボナッチ数列 an = an-1+ an-2 となるような数列 1, 1, 2, 3, 5, 8, …
- 77. 解答フォーマット例
- 78. 宿題 4 ！ n の高さのハノイの塔の解法を出力するプログラムを実装してください。 n は引数で与えられ、出力のルールは 1 => 3 といったものを改行しつつ出力すること。 特にフォーマットは準備しません。
- 80. おわり