Canvas要素で右スクロール表示を行うことができたので、続いて方向キーで4方向スクロールを行ってみましょう。うまく行けば、各種ゲームのマップ表示に応用できそうですね。
スクロール表示の仕組みは、前回と同じです。スクロール開始時にマップ描画Canvasにスクロールで可視範囲に入る領域を描画し、それをずらしながら表示Canvasに描画します。今回は、上下左右、つまりx/y座標が増加する方向だけでなく減少する方向にも移動するので、スクロール位置scrollPosに応じた描画範囲の設定が少し複雑になっています。
マップを構成する背景キャラクタは、それぞれ20*20ピクセルのビットマップ（ImageData）、マップデータは100*100=10000の要素を持つ配列です。
今回は、キー入力に応じて移動処理を行うので、キー押下と解放のイベントハンドラ（keydownHandler()とkeyupHandler()）を設定して、方向キーのkeydownとkeyupを処理するようにしました。「現在の方向キー状態」を管理する変数stickで、方向キーの押下状態をフラグ管理しています。
キー入力を行う際は、キーイベントを捕捉する要素かその子要素にフォーカスが必要なので、Canvasと「開始」ボタンをdivで囲いそのdiv要素にキーイベントを追加しています。さらに、ボタンの横に小さなテキスト欄を入れて、開始ボタンがクリックされたらこちらにフォーカスをセットするようにしてみました。
これで、開始ボタンをクリックしてフォーカスがテキスト欄に移動すれば、キーイベントを捕捉できるようになるわけです（ボタンにフォーカスがあると、方向キーでページ全体も移動してしまう）。
スクロール表示テスト（Canvas要素に未対応のWebブラウザでは表示されません）
実行してみると、かなりスムーズに移動できるようです。今回の結果から、コマンド型RPGやアドベンチャーゲームなどマップ表示とテキスト処理やコマンド選択が中心になるゲームに関しては、Canvas（JavaScript）でも問題なく実現可能と言えるでしょう。