4

これはキャッチ 22 です。解決方法がわかりません。私たちがホストしているこの HTML5 ゲームを見てみましょう:

http://www.scirra.com/arcade/action/93/8-bits-runner - 警告音あり！

ページは でホストされていますが、セキュリティ上の理由からscirra.com、ゲームは iframe にあります。static1.scirra.net

ゲームのプレイ中に左右上下を押すと、ウィンドウ全体が上下左右にスクロールします。ゲームがフォーカスされていない場合、防止のデフォルトは問題なく機能するようです。もちろん、ゲームをプレイするときは、このデフォルト アクションを防止したいと考えています。したがって、次のコードを使用します。

    var ar = new Array(32, 33, 34, 35, 36, 37, 38, 39, 40, 44);
    $(document).keydown(function (e) {            
        var key = e.which;
        if ($.inArray(key, ar) > -1) {
                e.preventDefault();
                return false;
        }
        return true;
    });

これを親ページと iframe ページに配置します。iframe にフォーカスがある場合、左右がブロックされているように見えますが、そうではありませんup and down。

ページのスクロールを停止し、ゲームの下のコメント ボックスにコメントを入力できるようにする方法を考えてくれる人はいますか? スペースバーをブロックすると、テキストにスペースを追加できなくなります!

4

5 に答える 5

5

私は問題を完全には理解していないかもしれませんが、あなたが望むようです：

  1. 上、下、スペースなどを使用して、フォーカスがある場合にのみゲーム ウィンドウに移動します。
  2. 上、下、スペースなどで、フォーカスがあるときにコメント ボックスに移動します。
  3. 上、下、スペースなどで、フォーカスがあるときにメイン ウィンドウに移動します。

2 番と 3 番は、何もしなくても自動的に起こることです。したがって、基本的には＃1が必要です。メイン ウィンドウにコードが必要な理由がわかりません。

私のテストでは、これは Chrome、Opera、FF、IE9、IE8、IE7 で動作します。

メインウィンドウ

デモ: http://jsfiddle.net/ThinkingStiff/Dp5vK/

HTML:

<iframe id="game" src="http://jsfiddle.net/ThinkingStiff/dtmxy/show/"></iframe>
<textarea id="comment-box"></textarea>

CSS:

#game {
    border: 1px solid red;
    display: block;
    height: 100px;
    width: 200px;
}

#comment-box {
    height: 100px;
    width: 200px;
}

body {
    height: 1000px;
    width: 1000px;
}

ゲームウィンドウ (iframe)

デモ: http://jsfiddle.net/ThinkingStiff/dtmxy/

脚本：

$( document ).bind( 'keydown', function ( event ) {

    var keys = [32, 33, 34, 35, 36, 37, 38, 39, 40, 44];

    if( keys.indexOf( event.which ) > -1 ) {

        event.preventDefault();
        event.stopPropagation();

    };

} );
于 2011-12-10T23:31:17.457 に答える
1

ゲーム div のみをキャッチするように変更すると役立つかどうかを確認してください。

$('div.arcade-content').on('keydown', 'div.game-wrapper', function (e) {
    ...
});
于 2011-12-05T19:48:09.783 に答える
1

ゲーム キャンバスにtabindex. 値 0 は、canvas 要素を通常のソースベースのタブ オーダーに配置します。その後、フォーカスを受け取り、主要なイベントのターゲットとして機能できるようになります。つまり、canava のみから発生した主要なイベントのデフォルト アクションとイベントの伝播を防ぐことができます。

$canvas = $("#c2canvas");
$canvas.tabIndex = 0;

var ar = [32, 33, 34, 35, 36, 37, 38, 39, 40, 44];
$canvas.keydown(function (e) {            
    var key = e.which;
    if ($.inArray(key, ar) > -1) {
        e.preventDefault();
        e.stopPropagation();
    }
});
于 2011-12-09T14:49:27.847 に答える
1

スペースバーの問題に関しては、ユーザーがゲームの下のコメント ボックスにフォーカスした場合、keydown 関数をチェックインする必要があります。フォーカスされている場合は、スペースバーを一時的に許可します。

于 2011-12-09T11:09:53.227 に答える
0

ゲームをiframeにWordpressコンテンツページに埋め込むのと同じ問題がありました。残念ながら、上記の解決策はキーダウン キーコードでは機能しませpreventDefault()んstopPropagation()。そのため、cssクラスをボディoverflow: hiddenに切り替えて、キーダウンまたはマウスホイールによるページスクロールでiframeフォーカスを設定/設定解除して解決しました。

document.addEventListener('keydown', function(e) {
  document.body.classList.add('no-scroll');
  document.getElementsByTagName('iframe')[0].focus();
});
document.addEventListener('wheel', function(e) {
    document.body.classList.remove('no-scroll');
    if (document.activeElement) {
        document.activeElement.blur();
    }
});
.no-scroll {
    overflow: hidden;
}

これが実際の例です: Boulder Dash

于 2020-05-06T21:06:38.863 に答える