ぐらみんこーど レベル7：ブラウザアプリ・ゲーム制作
ぐらみんこーど レベル7：ブラウザアプリ・ゲーム制作
No.73 ～ 97
このレベルでは、HTML と JavaScript を使ってブラウザ上で動くアプリやゲームを作ります。 キャラクターの動きや画面の切り替えなど、遊びながらプログラムの仕組みを学びます。
学ぶ内容
- HTML と JavaScript を組み合わせて動的なページを作る
- コマンドプロンプト（ターミナル）で動的なプログラムを作る
- ゲームライブラリ
- ランダムな値
できるようになること
- Web アプリ（動的ページ）の作成方法
- ゲームライブラリの利用方法
- ページの見た目を調整できる
このレベルの課題
| No. | タイトル | 課題のねらい |
|---|---|---|
| 073 | 関数が終わった後に実行する関数・コールバック関数（その２） | 関数の動く順序を決める「コールバック関数」の使い方の復習と、何秒か経った後に処理を実行する方法を勉強します。 |
| 074 | JavaScriptで辞書と配列を使う（その３） | 70 から引き続き辞書と配列の使い方の練習問題となります。実際の気象データを扱います。 |
| 075 | モンスター相性チェックプログラムを作ろう | 火、水などの属性を持つモンスター同士の相性を調べ「効果はばつぐんだ」等のメッセージを表示するプログラムを作成します。辞書と配列の使い方の復習問題となります。 |
| 076 | モンスター相性チェックプログラムコマンドライン版をつくろう | 75 ではぐらみんこーど上でプログラムを作成しましたが、これをコマンド上（自分のパソコン上）で動かせるようにします。キーボードを使って入力させる等、過去の課題の総復習となります。 |
| 077 | enchant_js入門_その1_ゲームライブラリを使ってみよう！ | enchant.js（エンチャントジェイエス）という予め用意されたプログラムを使い、ブラウザ上で動かすことのできるゲームを作成します。 |
| 078 | enchant_js入門_その2_画面に文字を表示してみよう | 77 に続き、ゲーム画面に文字を表示する方法を学習します。 |
| 079 | enchant_js入門_その3_スプライトを表示してみよう | 78 に続き、ゲーム画面上にキャラクターを表示する方法を学習します。 |
| 080 | enchant_js入門_その4_タップしてスプライトの見た目を変えてみよう | 79 に続き、キャラクターをタップしたときに見た目を変える方法を学習します。 |
| 081 | enchant_js入門_その5_スプライトを動かしてみよう | キャラクターを画面の右から左へ、下から上へというように、自動的に移動させる方法を学習します。 |
| 082 | enchant_js入門_その6_変数を使ってみよう | enchant.js（エンチャントジェイエス）で数を数える「変数」の使い方を学習します。 |
| 083 | enchant_js入門_その7_背景を変えてみよう | enchant.js でゲームの背景に色や絵を付ける方法を学習します。 |
| 084 | enchant_js入門_その8_シーンを変えてみよう | enchant.js では画面の切り替えに「シーン」というものを使います。ここでは「シーン」の作り方、切替方法を学習します。 |
| 085 | チャレンジプログラム（enchant_js・その1） | ここまで学習してきた enchant.js のまとめ問題です。 |
| 086 | HTTPサーバーを作ろう（その1） | Node.js を使って HTTPサーバーを作り、サーバー上で動くやることリスト（TO DO リスト）を作成します。ここでは見栄えである HTML のページを作成します。 |
| 087 | HTTPサーバーを作ろう（その2） | 086 に引き続きやることリストを作成します。Web ページを表示したときのエラーや、アクセスされたパスによって表示を変更する方法を紹介・実践します。 |
| 088 | HTTPサーバーを作ろう（その3） | 087 に引き続きやることリストを作成します。Web ページからデータを送ったり、受け取ったりする方法の学習です。 |
| 089 | HTTPサーバーを作ろう（その4） | 088 に引き続きやることリストを作成します。HTML のフォームからデータを送る方法について学習します |
| 090 | HTTPサーバーを作ろう（その5） | 089 に引き続きやることリストを作成します。ここではフォームから送られたデータをサーバーで受け取る方法を学習します。 |
| 091 | HTTPサーバーを作ろう（その6） | 090 に引き続きやることリストを作成します。ここでは元のページに戻す「リダイレクト」の方法と、登録した情報をファイルに保存・読み込みする方法を学習します。 |
| 092 | HTTPサーバーを作ろう（その7） | 091 までで作成したやることリストの機能追加に挑戦します。登録した内容の削除、Web ページへの画像の追加を行い、ここまでの学習内容を確認します。 |
| 093 | プログラムを読みやすくする | プログラムは文法を間違えていなければ、それなりに自由な形で書けてしまいます。ここでは ESLint というプログラムチェックツールを使い、決められた形式でプログラムが書けているか確認する方法を学習します。 |
| 094 | パソコン知識_選択ソート | パソコン知識として「選択ソート」という並べ替えのアルゴリズムを紹介します。 |
| 095 | 選択ソートを作ってみる | Node.js を使い、実際に与えられた値を選択ソートで並べ替えるプログラムを作成します。また、コマンドライン上からキーボード入力を受け付ける方法を学習します。 |
| 096 | タイピングゲームを作ろう（その1） | Web ページ上で動くタイピングゲームを作ります。出題した文字と合っていれば太文字、まちがっていれば赤文字に変えます。これまで学習した HTML での文字の装飾方法と、新たにブラウザで検出できるイベントを使います。このページでは、HTML ファイルから JavaScript ファイルを読み込む方法を学習します。 |
| 097 | タイピングゲームを作ろう（その2） | 096 の続きとなります。このページでは HTML のノードメソッドを使い、入力欄に予めカーソルを合わせておいたり、イベントを使ってキーが押されたときやキーが離されたときの処理の作り方を学習します。プログラムが完成できたら、Web ページに背景や枠を追加し、見栄えを良くします。 |