Ceci est un hic 22 Je ne peux pas vraiment comprendre comment résoudre. Prenez ce jeu HTML5 que nous hébergeons:

http://www.scirra.com/arcade/action/93/8 -bits-runner - L'avertissement a du son!

La page est hébergée sur scirra.com mais le jeu est dans une iframe sur static1.scirra.net pour des raisons de sécurité.

Maintenant, si vous appuyez à gauche et à droite, en haut ou en bas lorsque vous jouez au jeu, la fenêtre entière défile de haut en bas, de gauche à droite. Le défaut par défaut semble fonctionner correctement lorsque le jeu n'est pas concentré. Nous voulons éviter cette action par défaut lors de la lecture du jeu bien sûr! Nous utilisons donc le code:

    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;
    });

Nous mettons cela sur la page parent et la page iframe. Lorsque l'iframe a le focus, la gauche et la droite semblent être bloquées, mais pas up and down.

Quelqu'un peut-il nous aider à déterminer comment arrêter le défilement de la page ET permettre aux gens de taper des commentaires dans la zone de commentaire sous le jeu? Si vous bloquez la barre d'espace, cela empêche les gens d'ajouter des espaces dans leur texte!

3
Tom Gullen 5 déc. 2011 à 22:10

3 réponses

Donnez à votre toile de jeu un tabindex. Une valeur de 0 mettra l'élément canvas dans l'ordre de tabulation standard basé sur la source. Il pourra alors recevoir le focus et agir comme la cible des événements clés, ce qui signifie que vous pouvez empêcher les actions par défaut et la propagation des événements pour les événements clés provenant uniquement de vos canavas.

$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();
    }
});
1
Tim Down 9 déc. 2011 à 14:49

Voyez si cela aide lorsque vous le changez pour ne capturer que la div du jeu.

$('div.arcade-content').on('keydown', 'div.game-wrapper', function (e) {
    ...
});
1
rkw 5 déc. 2011 à 19:48

En ce qui concerne le problème de la barre d'espace, vous devez vérifier dans votre fonction keydown si l'utilisateur vient de concentrer la zone de commentaire sous le jeu. S'il est focalisé, autorisez temporairement la barre d'espace.

1
Alex 9 déc. 2011 à 11:09