簡単なゲームの作成を通して、JavascriptでWebページを操作する方法を学びます。最終的には、ネズミを池に落とすこのようなゲームになります。宿題としては、ネズミを池に落とすこのゲームを改造して、別のゲームを作成してください。例えば、散らかったゴミをゴミ箱に入れるというゲームとか、自分でアイディアを出して、作成してください。
ブラウザはFirefoxでの動作が前提です。他のブラウザに対応する必要はありません。
Webページ作成の方法には、無料のテキストエディタ(Sakuraエディタ、秀丸エディタなど。Macの場合はCotEditor)を使うと良いでしょう。
透明色を設定やGIFアニメの作成ための画像処理ソフトは、無料のGIMPを使うと良いでしょう。インストール方法については、ネットを検索してください。GIMPはWindows版、Mac版でインストール方法も違うので、気を付けましょう。GIMP以外では、WindowsであればFireAlpacaが使いやすいようですが、GIFアニメの作成には、AlpacaDougaサービスを使う必要があるようです。
CSSを使って、webページ上に画像を重ねて表示する方法を学びます
1日目のサンプルを見てください。1日目のサンプルはここ。
まず、画像を二つ用意してください。背景画像は500px×500pxのサイズにしてください。ネズミの画像は64px×64pxにして、背景を透明色にしてください。
GIMPを使って背景を透明色にする方法はこちらです。
イベントハンドラの処理にJavaScriptを使って、ネズミをマウスで動かします。getElementById関数の使い方がポイントです。穴に落ちる判定を行います。
2日目のサンプルを見てください。2日目のサンプルはここ。
ネズミを引き寄せるチーズを追加して、キーボードで動かすようにします。そのために、イベントリスナーの追加の方法をまなびます。ネズミがチーズを食べた時の処理、チーズが池に落ちたときの処理を追加します。3日目はなかなか大変です。
3日目のサンプルを見てください。3日目のサンプルはここ。
ネズミをGIFアニメにして、動きを加えます。余裕のある人は、ネズミが池に落ちた後には別のGIFアニメに変更して、池で泳ぐようにすることにもチャレンジしてください。
4日目のサンプルを見てください。4日目のサンプルはここ。
さて、いよいよ宿題です。自分のアイディアで、改造してください!