HTML5 / Canvas キーボード入力


前回のにアルファベット入力も追加。

下記参考に判定を入れてみる。
http://semooh.jp/jquery/api/events/keypress/fn/

1
2
3
4
5
6
7
8
9
10
11
12
13
var key;
if (event.which == 32
    || (event.which >= 65 && event.which <= 90)
    || (event.which >= 97 && event.which <= 122)) {
    key = String.fromCharCode(event.which).toUpperCase();
} else {
    key = event.keyCode;
}
switch(key){
    case 'Q':
        // 位置をリセット
        break;
}

これでQを押すと位置がリセットされます。
※Webkitだと大文字・小文字の区別がなかったので大文字で統一してます(toUpperCase)

あとは前回Webkit判定を非推奨の $.browser.webkit 使ってたので、下記を参考に $.support を使用。
http://w3g.jp/blog/tools/jquery_browser_sniffing
2012.10.17追記: ブラウザ判定なしで動くようにしました。ブラウザのバージョンアップで挙動が変わる方法は避けた方がイイかも。

さらに描画処理を setInterval から setTimeout を使うようにしました。
setInterval はもし前の処理が終わってなくても時間が来たら次の処理を実行しますが、setTimeout は前の処理が終了してから次の処理を実行するので、描画とか重そうな処理の時はこっちがいいかなと。

1
2
3
4
5
var fps = 1000 / 30; // 30FPS
setTimeout(function(){
    draw();
    setTimeout(arguments.callee, fps);
}, 0);

サンプル
MacのFirefox3.6.13 / Safari5.0.3 / Chrome8.0.552.231 / Opera11.0で確認

コメントを残す

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