夏休みの宿題:Javascriptゲームの作成

簡単なゲームの作成を通して、JavascriptでWebページを操作する方法を学びます。最終的には、ネズミを池に落とすこのようなゲームになります。宿題としては、ネズミを池に落とすこのゲームを改造して、別のゲームを作成してください。例えば、散らかったゴミをゴミ箱に入れるというゲームとか、自分でアイディアを出して、作成してください。

ブラウザはFirefoxでの動作が前提です。他のブラウザに対応する必要はありません。

Webページ作成の方法には、無料のテキストエディタ(Sakuraエディタ、秀丸エディタなど。Macの場合はCotEditor)を使うと良いでしょう。

透明色を設定やGIFアニメの作成ための画像処理ソフトは、無料のGIMPを使うと良いでしょう。インストール方法については、ネットを検索してください。GIMPはWindows版、Mac版でインストール方法も違うので、気を付けましょう。GIMP以外では、WindowsであればFireAlpacaが使いやすいようですが、GIFアニメの作成には、AlpacaDougaサービスを使う必要があるようです。

1日目

CSSを使って、webページ上に画像を重ねて表示する方法を学びます

1日目のサンプルを見てください。1日目のサンプルはここ

まず、画像を二つ用意してください。背景画像は500px×500pxのサイズにしてください。ネズミの画像は64px×64pxにして、背景を透明色にしてください。

GIMPを使って背景を透明色にする方法はこちらです。

2日目

イベントハンドラの処理にJavaScriptを使って、ネズミをマウスで動かします。getElementById関数の使い方がポイントです。穴に落ちる判定を行います。

2日目のサンプルを見てください。2日目のサンプルはここ

3日目

ネズミを引き寄せるチーズを追加して、キーボードで動かすようにします。そのために、イベントリスナーの追加の方法をまなびます。ネズミがチーズを食べた時の処理、チーズが池に落ちたときの処理を追加します。3日目はなかなか大変です。

3日目のサンプルを見てください。3日目のサンプルはここ

4日目

ネズミをGIFアニメにして、動きを加えます。余裕のある人は、ネズミが池に落ちた後には別のGIFアニメに変更して、池で泳ぐようにすることにもチャレンジしてください。

4日目のサンプルを見てください。4日目のサンプルはここ

5日目

さて、いよいよ宿題です。自分のアイディアで、改造してください!