Interpréter les actions clavier, Jeu du pendu Javascript

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :




Gérer les actions au clavier - Jeu du pendu 1/3

Dans cette formation Javascript, nous proposons d'exploiter tout le savoir acquis au fil des formations précédentes, pour construire le jeu du pendu. L'internaute clique sur le bouton Débuter. Grâce à l'indication qui lui est fournie, il doit retrouver l'expression mystère, encodée sous forme de tirets, en tapant les lettres au clavier. Aucune zone de texte n'est prévue pour recevoir la saisie de l'utilisateur. C'est le corps de la page Html, par le biais d'un événement déclenché, qui scrute les actions au clavier. Afin de bien expliciter le code de cette application, nous proposons de décomposer cette formation en 3 volets. Dans ce premier volet, l'objectif consiste à interpréter les actions de saisie et à les retranscrire, pour fournir le premier mot encodé à dévoiler. Pour cela, nous devons préalablement réceptionner le questionnaire et générer les propositions aléatoirement.



Comme l'illustre la capture ci-dessus, un clavier virtuel est proposé en bas de l'interface Web. Sa mission n'est pas de suggérer un caractère au clic de l'utilisateur. Il consiste à marquer les lettres déjà proposées, pour aiguiller l'internaute dans la partie.

Sources et présentation de la problématique
Pour concentrer notre attention sur le développement du jeu, nous proposons de débuter depuis une page Web déjà structurée et offrant quelques fragments de code Javascript.

• Télécharger le fichier touches-clavier-jeu-pendu.rar en cliquant sur son lien,
• Puis, le décompresser dans le dossier de votre choix,

La décompression fournit le fichier de la page Web principale à la racine. Ce fichier est accompagné de ses ressources externes dans les sous dossiers. Le sous dossier Styles propose la feuille de Styles qui régit la mise en forme et la mise en page du code HTML. Le sous dossier images stocke les logos chargés sur la page Web.

• Double cliquer sur le sous dossier js pour l'ouvrir,
• Puis, cliquer avec le bouton droit de la souris sur le script externe mots.js,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur tel que le Notepad ++,

Ce script propose une seule fonction nommée mots_a_trouver.

function mots_a_trouver()
{
return str = 'Trigonometrique : Un cercle*Denominateur : Dans une fraction, le numerateur et le...*Abscisse : L'une des coordonnees d'un point du plan*...';
}

Cette fonction, si elle est appelée, se contente de retourner une chaîne d'informations concaténées. Cette chaîne représente le questionnaire du pendu. A chaque indication (Un cercle) correspond un mot mystère à dévoiler (Trigonometrique). Ces paires sont séparées les unes des autres par un caractère remarquable. Il s'agit du symbole de l'étoile (*). Nous exploiterons ce symbole pour découper la chaîne et ranger les paires dans un tableau de variables. Nous n'aurons plus qu'à générer un nombre aléatoire afin d'accéder au hasard, à l'une des rangées du tableau. Nous proposerons ainsi les questions dans un ordre variable et différent à chaque partie.

• Dans le dossier de décompression, double cliquer sur le sous dossier img_pendu pour l'ouvrir,

Vous y notez la présence des images du pendu qui serviront à sanctionner les erreurs commises. Elles sont nommées explicitement et judicieusement. Elles sont toutes préfixées du nom statique pendu. Et elles portent un suffixe variable, sous forme de chiffre, relatant la progression des erreurs. Cette notation permettra de les désigner plus simplement par le code Javascript. La première des images se nomme pendu_defaut.png. Comme son nom l'indique, c'est elle qui sera chargée à chaque début de partie ou nouveau mot à découvrir.

• A la racine du dossier de décompression, double cliquer sur le fichier de la page Web : touches-clavier-jeu-pendu.html, pour l'ouvrir dans un navigateur Internet,

Nous y trouvons la présentation pour le jeu du pendu, organisé et structuré par le code Html de la page Web. Le cadre de gauche doit servir à afficher les mots mystères à dévoiler. Le cadre de droite propose l'affichage de l'image du pendu. Enfin, le cadre inférieur énumère les touches du clavier virtuel.

• A la racine du dossier de décompression, cliquer avec le bouton droit de la souris sur le fichier de la page Web, nommé : touches-clavier-jeu-pendu-cpt.html,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur tel que le Notepad++,

Il s'agit de la structure Html de la page Web à partir de laquelle nous allons développer le jeu du pendu. Dans la section Head, vous notez la référence au script externe.

...
<meta http-equiv='content-language' content='fr' />
<link href='styles/mef.css' rel='stylesheet' type='text/css' />
<script language='Javascript' src='js/mots.js'></script>
</head>
<body onkeydown='clavier(event)'>
...

Il sera donc chargé en même temps que la page Web. De fait, sa fonction sera connue et pourra être appelée par le code Javascript, par son nom : mots_a_trouver.

La page est ensuite agencée sous forme de calques imbriqués (balises Html Div). Entre les lignes 51 et 65 pour un éditeur Notepad, vous notez la présence du code Html construisant les deux cadres.

...
<div class='colonne' id='colonne_gauche'>
<div class='astuce' id='indication'>
Indication :<br /><strong>Indice pour le mot à trouver</strong>
</div>
<div class='astuce' id='leMot' style='font-size:20px; letter-spacing:2px;'>
Mot à trouver
</div>
<div class='astuce' id='leScore'>
Votre score : <strong>10 / 10</strong> - Mots restants : <strong>10</strong>
</div>
<input type='button' value='Débuter' onClick='debuter()'/>
</div>
<div class='colonne' id='colonne_droite' style='text-align:center;'>
<img src='img_pendu/pendu_defaut.png' alt='' id='lePendu' style='height:220px;' />
</div>
...

Dans le cadre de gauche, nous retrouvons les calques d'identifiant indication, leMot, leScore ainsi que le bouton pour démarrer une nouvelle partie. Ces identifiants sont importants pour pouvoir piloter ces éléments Html par le code Javascript. Nous y inscrirons les informations dynamiques au cours du jeu, comme les mots mystère à dévoiler. Le cadre de droite est composé d'une seule balise. Il s'agit de la balise Img permettant d'afficher l'image du pendu. Son identifiant lePendu nous permettra d'adapter l'image en fonction des erreurs commises.

Le cadre inférieur quant à lui consiste en une imbrication de calques énumérant les touches du clavier autorisées.

...
<div class='centre' id='le_clavier'>
<div class='titre_centre' id='apercu' style='height:140px; padding-left:74px; width:650px;'>
<div class='lettre' id='calque_a'>A</div><div class='lettre' id='calque_b'>B</div>
<div class='lettre' id='calque_c'>C</div><div class='lettre' id='calque_d'>D</div>
<div class='lettre' id='calque_e'>E</div><div class='lettre' id='calque_f'>F</div>
<div class='lettre' id='calque_g'>G</div>
...

Enfin, vous notez la présence d'une section de script Javascript en bas de la page Html.

...
</body>
<script type='text/javascript' language='javascript'>
var fin = true;
var nb_erreurs = 0;
var nb_passe = 0;
var tab_mots;
var nb_mots = 0;
var chaine_rangee = '';
...

Toutes les fonctions nécessaires sont déjà créées et sont prêtes à accueillir le code Javascript. Toutes les variables publiques sont déclarées elles aussi. Ainsi, nous allons pouvoir concentrer nos efforts sur le développement essentiel.

La variable fin initialisée à True est un booléen indiquant si la partie est active ou non. La variable nb_erreurs doit compter les fautes commises et se réinitialiser à partir de 4 erreurs. La variable nb_passe doit compter les mots déjà franchis. C'est elle qui mettra fin à la partie lorsque 10 mots mystères auront été joués. tab_mots est un tableau de variables destiné à réceptionner le questionnaire découpé. La variable nb_mots doit compter le nombre de questions stockées dans le tableau de variables. Cette indication permettra de générer un mot aléatoirement, entre la borne inférieure et la borne supérieure du tableau. La variable chaine_rangee est un String. Sa mission est de mémoriser les valeurs aléatoires déjà générées, pour ne plus les proposer. Les variables le_mot et lindication serviront à mémoriser la paire, issue du questionnaire, pour les afficher sur la page Web. La variable mem_mot sera utile pour conserver la mémoire des lettres après encodage de l'expression mystère. La variable le_scrore parle d'elle-même. Elle sera incrémentée au fil des erreurs enregistrées. La variable lettres_ok consiste en une énumération des caractères autorisés. Tout caractère n'y appartenant pas, ne sera pas pris en compte par le code Javascript. Enfin, la variable la_touche doit mémoriser la lettre tapée par l'utilisateur.

Une variable publique conserve les données au-delà des bornes des fonctions. Chacune pourra donc les réceptionner pour les exploiter.

Charger le questionnaire dans un tableau de variables
Maintenant que les présentations sont faites, il est temps de débuter la construction du code Javascript. Avant de nous soucier de la gestion des touches du clavier, nous devons récupérer le questionnaire du pendu. Chaque paire (Indication/Mot mystère) doit être chargée dans une ligne différente du tableau de variables, nommé tab_mots.

• Entre les bornes de la fonction recuperer, ajouter les instructions suivantes :

tab_mots = mots_a_trouver().split('*');
nb_mots = tab_mots.length;
alert(nb_mots);

La fonction recuperer est appelée dans la partie publique du script, juste après la déclaration des variables. De fait, elle se déclenchera automatiquement au chargement de la page Web. Nous appelons la fonction mots_a_trouver du script externe. Celle-ci retourne la chaîne de caractères des paires indication et mot mystère, séparées par le caractère remarquable de l'étoile (*). Comme nous l'avait appris la formation pour créer un album photos en Javascript, la méthode split permet de découper la chaîne sur le caractère remarquable qui lui est passé en paramètre, soit l'étoile ici. Chaque partie ainsi découpée est rangée dans une ligne indépendante de la variable tab_mots, qui est transformée en tableau de variables à la volée. Dès lors, sa propriété length renseigne sur le nombre d'éléments qu'il contient. Nous affichons ce résultat stocké dans la variable nb_mots, grâce à la fonction Javascript alert, à titre de vérification.

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur de la page Web,
• Rafraîchir la page à l'aide de la touche F5 du clavier,

La boîte de dialogue déclenchée par la fonction alert, apparaît en effet au chargement de la page Internet. Elle affiche le nombre de lignes renseignées dans le tableau de variables. Nous en déduisons que 43 mots mystère différents existent dans ce questionnaire. Comme une partie se joue sur 10 mots, par la génération aléatoire, nous proposerons vraisemblablement des questions différentes à chaque jeu.

Remarque : Il s'agit d'un questionnaire de mathématiques facilement interchangeable. Il suffit de remplacer l'information concaténée de la chaîne str du script externe.

• Valider la boîte de dialogue et revenir dans l'éditeur de code,
• Passer en commentaire la ligne de la fonction alert en la préfixant de deux slashs (//),

Nous aurions aussi pu tester les données rangées dans le tableau de variables, en pointant sur l'une de ses lignes, passée entre crochets : alert(tab_mots[0]). Dans cet exemple, nous affichons à l'écran, la paire de la première ligne pour le premier mot mystère.

Interpréter les lettres saisies au clavier
Il s'agit de la clé de ce jeu du pendu. C'est en fonction des caractères proposés par l'internaute, que nous pourrons effectuer la comparaison avec les lettres de l'expression à retrouver. Aucune zone de texte n'est prévue pour cette saisie. C'est à la page Web d'être en mesure d'intercepter ces événements. Précisément, cet événement est déjà géré dans le Body, soit le corps de la page Web. Ce Body débute juste après la section Head.

...
</head>
<body onkeydown='clavier(event)'>

<div class='div_conteneur_parent'>
...

Et comme vous le constatez, sur l'événement onkeydown, il appelle la fonction clavier. Onkeydown représente l'événement de la touche enfoncée. Comme il est géré sur le corps de la page Web, ces actions sont interceptées quel que soit l'emplacement. L'argument passé à cette fonction est l'objet event. Il représente un événement au sens large, attendu par la fonction clavier, dans la variable evenement. Il va s'agir de décoder cet événement pour en extraire la touche correspondante, lorsqu'il s'agit en effet d'une action clavier.

Par anticipation, nous devons commencer par déclarer les variables qui seront nécessaires aux traitements futurs.

• Entre les bornes de la fonction clavier, ajouter les déclarations suivantes :

var indice=0;
var la_lettre='';
var trouve = false;

Nous utiliserons la variable indice pour parcourir chaque lettre du mot mystère, à la recherche de correspondances avec le caractère proposé par l'internaute. A chaque passage dans cette boucle, la lettre en cours de lecture sera stockée dans la variable la_lettre, pour pouvoir la comparer avec la touche enfoncée. La variable booléenne trouve est affectée à false par défaut. Elle sera basculée à true lorsqu'une lettre est trouvée. Le cas échéant elle indiquera donc d'incrémenter le compteur des erreurs.

Les événements ne doivent être interprétés que si la partie a bien débuté. Au clic sur le bouton Débuter, nous basculerons donc la variable fin à false. Souvenez-vous, nous l'avions initialisée à true dans la déclaration publique. C'est l'état qu'elle reprendra en fin de partie. Il est donc nécessaire de réaliser un test sur cette variable booléenne, avant d'enclencher la suite des traitements.

• Après les déclarations de variables, ajouter le test suivant :

if(fin==true)
return;

Très simplement, si la variable vaut true, aucune partie n'est débutée. C'est pourquoi nous utilisons l'instruction return pour mettre fin à l'exécution de la fonction.

Dans le cas contraire, nous devons poursuivre le code en interceptant l'événement transmis par le Body. L'objectif est de tenter de le convertir en caractère exploitable, s'il s'agit bien d'une touche du clavier enfoncée.

• Pour ce faire, après l'instruction conditionnelle, ajouter les lignes de code suivantes :

var touche = window.event ? evenement.keyCode : evenement.which;
touche = String.fromCharCode(touche).substr(0,1);
alert(touche);

La notation Critère ? Action1 : Action2 est une syntaxe compactée de l'instruction conditionnelle If. Le critère consiste à savoir si un événement a bien été intercepté par la fenêtre (window) du navigateur. Dans ce cas, la propriété keyCode de son objet transmis en paramètre, retourne un code numérique correspondant à la touche potentiellement enfoncée. Si cet évènement n'a pas été intercepté, c'est la propriété which de l'objet passé en paramètre qui permet d'atteindre le même résultat. Avec cette double notation, nous sommes censés être compatibles avec tous les navigateurs.

Ensuite, la méthode fromCharCode de l'objet String, permet de convertir ce numéro en caractère. Ce numéro lui est passé en paramètre, grâce à la variable touche. Par mesure de sécurité, nous ne prélevons que le premier caractère transcrit. C'est la méthode substr, désormais bien connue qui le permet. Nous lui indiquons à partir de quelle position prélever (0), soit le début et sur quelle longueur (1), soit sur un caractère.

Enfin, la fonction alert permet de réaliser un petit test temporaire. L'objectif consiste à vérifier que la lettre affichée est identique à la lettre tapée. Mais pour réaliser cet essai, faut-il encore que l'accès soit déverrouillé. Le test sur la variable fin interdit l'interprétation des touches pour l'instant, puisqu'elle met fin à l'exécution de la fonction. Nous devons basculer son état au clic sur le bouton Debuter, soit entre les bornes de la fonction debuter. Cette dernière est en effet appelée sur événement du bouton, en ligne 61 pour un éditeur Notepad.

...
Votre score : <strong>10 / 10</strong> - Mots restants : <strong>10</strong>
</div>
<input type='button' value='Débuter' onClick='debuter()'/>
</div>
...

• Entre les bornes de la fonction debuter, ajouter l'instruction suivante :

function debuter()
{
fin = false;
}

• Enregistrer les modifications (CTRL + S) et basculer sur la fenêtre du navigateur,
• Rafraîchir la page Web à l'aide de la touche F5 du clavier,
• Puis, cliquer sur le bouton Débuter et enfoncer une touche du clavier,

Comme l'illustre la capture ci-dessus, l'action au clavier est parfaitement interceptée. De plus, la touche enfoncée est correctement retranscrite dans son équivalent en lettre de l'alphabet.

• Cliquer sur le bouton Ok de la boîte de dialogue et revenir dans l'éditeur de code,

Avant d'exploiter ce résultat afin de marquer le clavier virtuel des lettres déjà empruntées, nous devons tester deux nouvelles conditions. La première consiste à vérifier qu'il ne s'agit pas de l'espace. En effet, dans les prochaines formations, nous proposerons l'expression avec les espaces visibles, afin de fournir une indication intéressante. De plus, le bouton étant le seul contrôle présent sur cette page Web, il est actif par défaut. Une action sur la barre d'espace l'active et déclenche son code. Nous devons éviter de réinitialiser la partie par erreur. Enfin, nous devons nous assurer que la lettre proposée fait bien partie des caractères autorisés. Souvenez-vous, ils sont tous énumérés dans la variable publique lettres_ok.

• Dans la fonction clavier, passer l'instruction de la fonction alert en commentaire,
• Puis, à la suite du code, ajouter les instructions conditionnelles suivantes :

if(touche==' ')
{
la_touche = ' ';
return;
}
else
la_touche='';

if(lettres_ok.indexOf(touche)==-1)
return;

Le premier test compare la variable locale (touche) à un espace inscrit entre guillemets. S'il est concluant, nous l'inscrivons dans la variable publique la_touche. Ainsi à l'avenir, la fonction debuter pourra exploiter sa valeur pour ne pas débuter le traitement dans ce cas précis. Puis, nous mettons fin à l'exécution de la fonction clavier (return). L'espace ne doit pas être interprété ni recherché. Dans le cas contraire (else), nous vidons le potentiel contenu enregistré dans la variable la_touche pour débloquer la partie. Ensuite, c'est la méthode indexOf appliquée sur la variable lettres_ok qui permet de tester la présence de la touche enfoncée (passée en paramètre), dans l'énumération des caractères autorisés. Comme nous l'avait appris la formation Javascript pour gérer un formulaire d'inscription, si elle ne trouve pas ce caractère, elle renvoie la position -1. Dans ce cas, la conséquence est la même que pour le test précédent, nous stoppons l'exécution du code (return).

Pour terminer cette première partie, il ne reste plus qu'à matérialiser chaque touche enfoncée, par sa lettre correspondante dans le clavier virtuel. Cette indication est précieuse pour le bon déroulement de la partie. Comme nous l'avons vu en début de formation, chaque lettre est encapsulée dans son propre calque (balise Div). Et chacun de ces calques possède un identifiant en corrélation avec le caractère qu'il contient (calque_a, calque_b, ..., calque…z). Il suffit de concaténer la partie fixe avec le caractère réceptionné pour atteindre le calque correspondant, grâce à la méthode getElementById de l'objet Javascript document.

• A la suite du code de la fonction clavier, ajouter l'instruction suivante :

document.getElementById('calque_' + touche.toLowerCase()).style.backgroundColor = '#666666';

La méthode toLowerCase() permet de transformer la lettre en minuscule, pour reconstruire l'identifiant du calque à atteindre par concaténation ('calque_' + touche.toLowerCase()). Nous évitons ainsi tout problème de casse dans la correspondance. Tous les identifiants sont écrits en minuscules en effet. Puis, c'est l'attribut backgroundColor de la propriété style, pour un élément de type div qui permet de désigner sa couleur d'arrière-plan. Nous affectons cette dernière à un code hexadécimal (#666666) qui correspond à un gris relativement foncé.

• Enregistrer les modifications et basculer sur le navigateur Web,
• Rafraîchir la page Html avec la touche F5 du clavier,
• Cliquer sur le bouton Débuter,
• Puis enfoncer successivement plusieurs touches du clavier,

Comme vous le remarquez, les touches interceptées et interprétées en caractères, sont parfaitement marquées sur le clavier virtuel. Il s'agit d'une indication précieuse pour le joueur qui saura quelle lettre ne doit plus être proposée.

Nous en avons terminé pour cette première partie qui consistait à préparer le terrain pour les développements à suivre. Dans la prochaine formation, nous devrons traiter les chaînes de caractères. L'objectif sera de retranscrire la première paire sur la page Html du jeu. Bien entendu, le mot mystère devra être encodé sous forme de tirets, tout en conservant visibles les espaces.

Le code complet que nous avons développé dans cette première partie est le suivant :

function recuperer()
{
tab_mots = mots_a_trouver().split('*');
nb_mots = tab_mots.length;
//alert(nb_mots);
}

function debuter()
{
fin = false;
}

function clavier(evenement)
{
var indice=0;
var la_lettre='';
var trouve = false;

if(fin==true)
return;

var touche = window.event ? evenement.keyCode : evenement.which;
touche = String.fromCharCode(touche).substr(0,1);
//alert(touche);

if(touche==' ')
{
la_touche = ' ';
return;
}
else
la_touche='';

if(lettres_ok.indexOf(touche)==-1)
return;

document.getElementById('calque_' + touche.toLowerCase()).style.backgroundColor = '#666666';
}