解説

ゲームらしくするために、チーズを導入した。チーズは、[Alt]+矢印キーで上下左右に移動可能である。チーズを移動するたびに、ネズミがチーズに近づく。チーズを使って、ネズミを池に誘い込むというゲームにした。

このために、以下の機能を追加しなければならない：

1. [Alt]+矢印キーでチーズを上下左右に動かす。
2. チーズが動いたとき、ネズミをチーズに近づける。
3. ネズミがチーズを食べたときの処理
4. チーズが池に落ちたときの処理

2のネズミをチーズに近づける処理を実装するために、ネズミがランダムに動くだけではだめである。 ネズミを指定した方向へ動かすことができるように、まずは宿題03のプログラムを書き換えるところから始めよう。

Javascriptゲーム03の書き換え

Javascriptゲーム03では、onclick、mouseover、mouseup、mouseoutというイベントハンドラーの処理としてmove()関数を指定してランダムにネズミを移動していた。move()関数では、呼び出されるたびにgetElementById()関数で要素を取得していたが、これをグローバル変数として要素を表すnezumi1とnezumi2を用意して、移動のたびにgetElementById()関数を呼び出す必要がないようにした。

function coordinates(element)の定義で使用している

は、Javascriptの連想配列の定義である。 これにより定義された連想配列positionは、キーxの値は0、キーyの値も0で初期化している。
例えば、連想配列positionのキーxの変数は、position.xと書く。Perlのようにposition['x']と書くこともできる（Perlの連想配列は$position{'x'}のように[]ではなく{}を使用するので、似ているというだけで同じではない）。