HTML5 / Canvas Arrowキー入力


前回のをArrowキーで移動に変更する。
キーボードの矢印キーで移動した方がそれっぽいよね。

矢印ボタンを廃止してonClickをkeypressイベントに差し替える。
keypressイベントでkeyCodeを参照。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
switch(event.keyCode){
    case 38:
        // 上移動
        break;
    case 40:
        // 下移動
        break;
    case 37:
        // 左移動
        break;
    case 39:
        // 右移動
        break;
}

しかし、SafariやChromeなどのWebKitだと反応しない。
keypressではなくkeydownを使う必要があるらしい。
しかも、WebKit以外ではkeydownだと押しっぱなしが拾えないので分岐させることに。
jQueryだとjQuery.browser.webkitを利用。
※1.4以降だとbrowserは非推奨みたい…

1
2
3
4
5
var trigger = 'keypress';
if ($.browser.webkit) {
    trigger = 'keydown';
}
$(document).bind(trigger, ...)

サンプル

2011.01.07 追記
ブラウザ判定に $.browser ではなく $.support 使うには下記も参照のこと。
HTML5 / Canvas キーボード入力

「HTML5 / Canvas Arrowキー入力」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です