質問

キャンバスとjavascriptを使ってゲームを作っています。

画面より長いページ（コメントなど）の場合、下矢印を押すとページが下にスクロールしてしまい、ゲームができなくなります。

プレイヤーが下に移動したいだけのときに、ウィンドウがスクロールしないようにするにはどうしたらよいでしょうか。

Javaゲームなどでは、ユーザーがクリックする限りは問題ないのでしょうが。

からの解決策を試しました。 FFで矢印キーによるページスクロールを無効にする方法 を試してみましたが、うまくいきませんでした。

どうすれば解決するのでしょうか？

概要

単純に は、デフォルトの ブラウザのアクションを阻止します。

window.addEventListener("keydown", function(e) {
    if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
        e.preventDefault();
    }
}, false);

Internet Explorer などの古いブラウザに対応する必要がある場合は e.keyCode の代わりに e.code の代わりに keyCode は非推奨です であり、文字列ではなく実際のコードを使用する必要があります。

// Deprecated code!
window.addEventListener("keydown", function(e) {
    // space and arrow keys
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

オリジナルの回答

自作ゲームに以下のような関数を使用しました。

var keys = {};
window.addEventListener("keydown",
    function(e){
        keys[e.code] = true;
        switch(e.code){
            case "ArrowUp": case "ArrowDown": case "ArrowLeft": case "ArrowRight":
            case "Space": e.preventDefault(); break;
            default: break; // do not block other keys
        }
    },
false);
window.addEventListener('keyup',
    function(e){
        keys[e.code] = false;
    },
false);

マジックは e.preventDefault(); . これは、イベントのデフォルトのアクション、この場合はブラウザの視点を移動させることをブロックします。

現在のボタンの状態が不要であれば、単に keys を削除し、矢印キーのデフォルトアクションを破棄するだけです。

var arrow_keys_handler = function(e) {
    switch(e.code){
        case "ArrowUp": case "ArrowDown": case "ArrowLeft": case "ArrowRight": 
            case "Space": e.preventDefault(); break;
        default: break; // do not block other keys
    }
};
window.addEventListener("keydown", arrow_keys_handler, false);

この方法は、後で矢印キーのスクロールを再び有効にする必要がある場合に、イベントハンドラを削除することも可能であることに注意してください。

window.removeEventListener("keydown", arrow_keys_handler, false);

参考文献

• MDN。 window.addEventListener
• MDN window.removeEventListener
• MDN KeyboardEvent.code インターフェース