キー操作に応じて描写

前回はクリックに応じて描写を行うスクリプトを作成しましたが、今回は方向キーに応じて描写が行われるスクリプトを作成しました。
方向キーを押すとその方向に四角形が動きます。







今回は方向キーを押すイベントを次のように指定しています。

window.addEventListener ("keydown" , keydownevent , false);

前回のクリックでのイベントはcanvas内でのイベントと指定できましたが、キー操作はウィンドウ内でのイベントとするようです。
キー操作をcanvas内として指定するにはcanvas内にフォーカスを当てることが必要ですが、今回はウインドウ内のイベントとして扱います。


方向キーは上下左右の四つですが今回はif文を用いてそれぞれ制御しています。
キーはそれぞれコードが割り振られていて上下左右のキーはそれぞれ次のようになっています。

↑:38
↓:40
←:37
→:39

キー入力をすると3pxずつキーの方向に移動します。