Jouer au clavier

[Ekilio]

Bonjour tout le monde !

Bien, j'ai un petit script à vous proposer. Ce script permet de jouer au clavier, par exemple en utilisant zqsd pour se déplacer, mais sans passer par les accesskey. En effet, celles-ci sont très pénibles (alt + maj + chiffre, ou alt + chiffre, ou retour + chiffre) suivant les navigateurs, et ne permettent pas vraiment de remplacer le jeu à la souris.

La méthode que je vous propose se base sur un javascript qui intercepte toutes les frappes au clavier en surveillant un input qui a obligatoirement le focus (on le lui met au début et on le remet de force si il part). J'utilise des setTimeout tout du long, ce qui permet de continuer à utiliser tout à fait normalement les clics de la souris (sur des liens ou via des evenements onclick).

Par ailleurs, le code comprends une clause permettant de "stopper" temporairement la reprise du focus ; par défaut elle est active sur l'appui de la touche "entrée", ce qui permet de se déplacer vers un chat par exemple, et il suffit d'appeller la fonction d'initialisation pour la réactiver.

Le code est en deux parties :

Partie javascript, à mettre dans un fichier à part :

Code :

// Initialise la capture en plaçant le focus sur la boite de texte voulue
function fwKeyboardInit()
{
    $('fwKeyboardListener').focus();
}

// Cette fonction replace le focus. Notez que j'utilise un setTimeout car le remettre directement n'a aucun effet ;
// de plus, ça évite tous les problèmes sur les clics et autres.
function fwKeyboardBack()
{
    if(!fwKeyboardNoBack)
    {
        setTimeout('fwKeyboardInit()', 50);
    }
}

// Cette fonction sert à capturer la frappe au clavier. J'utilise un setTimeout sinon elle est appellée avant que la frappe ne soit terminée
function fwKeyboardDo()
{
    setTimeout('fwKeyboardGetKey();', 10);
}

var fwKeyboardNoBack = false;

// Cette fonction gère véritablement la frappe au clavier
function fwKeyboardGetKey()
{
    if($('fwKeyboardListener').value == '')
    {
        alert('touche entrée');

        // Ceci sert à éviter de remettre le focus
        fwKeyboardNoBack = true;

        // On change le focus
        // Il faut absoluement mettre un setTimeout ici avec une valeur de plus de 50 (100 pour éviter les cas où ça rame)
        setTimeout("$('test').focus()", 100);
    } else {
        alert($('fwKeyboardListener').value);
    }
    
    $('fwKeyboardListener').value = '';
}

Partie HTML, à mettre dans votre page :

Code :

<input id="fwKeyboardListener" onblur="fwKeyboardBack();" onkeypress="fwKeyboardDo();" />

La partie javascript est à personnaliser au niveau des alertes dans la fonction fwKeyboardGetKey (à la fin) pour choisir ce que vous souhaitez faire du texte saisi. D'une manière général, si entrée (ou n'importe quelle autre touche n'affichant pas de caractère) est appuyé, c'est "alert('touche entrée');" et la suite qui sera executé, alors que si ce n'est pas le case, c'est "alert($('fwKeyboardListener').value);" qui le sera et $('fwKeyboardListener').value contiendra la touche pressée par l'utilisateur.

Notez que si vous n'utilisez pas prototype, il faut soit remplacer $ par document.getElementById, soit ajouter au début du fichier javascript ceci :

Code :

function $(object)
{
return document.getElementById(object);
}

Maintenant, comme le faire marcher ? Facile. Vous mettez tout bien comme il faut dans les fichiers, l'html, le javascript, vous incluez le second dans le premier, et ensuite, lorsque vous voulez démarrer (ou redémarrer) la capture, vous faites simplement :

Code :

fwKeyboardInit();

C'est du javascript, bien sûr

Que dire d'autre... Ah, oui, il y a un petit problème : il n'est pas possible de masquer (via un display: none) l'input dans lequel on saisie les données. Personnellement, j'ai résolu le problème en le positionnant derrière l'un des éléments fixes de mon graphisme.

Voila Si je suis pas clair, hésitez pas

PS : faites pas attention aux "fw" devant tous les noms de fonctions et de variable, ce sont juste les initiales du nom de mon jeu, je les met pour éviter d'écraser par erreur une variable ou une fonction d'une librairie tierce.

[Findel]

a mon avis on pouvait faire plus simple en capturant le onkeypress d'un élément, genre le body, non ?

exemple :

Code :

<html>
<script>
function getkey(e) {
    var keynum = 0;
    if (window.event) {// IE
      keynum = e.keyCode;
    } else if (e.which) {// Netscape/Firefox/Opera
      keynum = e.which;
    }
    alert(String.fromCharCode(keynum));
}
</script>
<body onkeypress="getkey(event)">
</body>
</html>

[Ekilio]

>< et j'y avais même pas pensé... *va se cacher très très loin*

[Zamentur]

Ceci dit il est souvent nécessaire de rajouter quelques choses dans le cas ou le joueur écris quelques choses dans un formulaire.

Sinon au moindre message que tu frappes çà se déclenche.

La 1ere méthode gère de part sa construction ce problème, cependant elle est moins belle qu'un onkeypress avec une verif si le focus n'est pas sur un input ou un textarea

[Anthor]

Pour ce genre de chose je pense qu'il vaux mieux utiliser du tout fait : http://code.google.com/p/js-hotkeys/

Y'a pas mal de différence sur les navigateurs à gérer, dès que tu touches à autre chose qu'une simple lettre.

[Ekilio]

@Zamentur : C'est assez simple à ajouter de la même façon sinon, en ajoutant simplement une vérification sur une variable pour désactiver la saisie.

@Anthor : Je ne cherche qu'une simple lettre à vrai dire, et ajouter tout jQuery juste pour ça serait beaucoup trop lourd

[Anthor]

Rien ne t'empêche de t'inspirer du code ^^

[NicoMSEvent]

me servant de prototype, il me faudrait ceci : http://code.google.com/p/prototype-hotkeys/

[Ekilio]

Impeccable ce truc ! Merci, ça marche encore mieux que ce que j'avais fait !