Mathémagiques

Jeu-13

Idée générale du jeu

Il s'agit de présenter une image de fond de grotte sur laquelle nous allons ajouter divers calques représentants des pierres. Si l'élève répond juste, le but est de créer une fonction qui enlève peu à peu chaque pierre du jeu afin que l'entrée de la grotte soit ouverte. Sinon, il faudra s'arranger pour ajouter la dernière pierre enlevée.

Le code HTML (jouer/jeu-13)

Plusieurs élements différents sont mis mis en place

• contenant principal : à l'intérieur du div principal (jeu-13_grotte) se trouve l'image (jeu-13_fond). Se trouvent ensuite six div contenant chacun un calque de pierre différentes. Puis se trouve ensuite la barre (jeu-13_résultats), ou tous les span sont décrits, afin de pouvoir y générer des nombres, ainsi qu'un input qui permet d'insérer le résultat. Se trouve ensuite le div (jeu-13_fini) afin de décrire le fond apparaissant à la fin du jeu. Celui-ci contient trois div qui seront remplis par le javascript. Trois boutons sous la forme de (div) sont également décrits.


• La principale difficulté consiste à ne pas se tromper dans les balises. En effet, nous avions d'abord mis des div à la place de span pour la génération de nombre. Bien entendu, cela ne faisait pas ce que nous voulions.

Le code css (jeu-6.css)

• remarque générale : Tout doit être exprimé en %, sinon cela ne fonctionne pas, et doit être en position absolue. Ce problème est notamment apparue lors du transfert du jeu sur le cms. Le div (jeu-13_grotte) n'avait en effet pas de position : abolute et sa taille était en px. Ainsi, lors du premier test, le jeu cachait l'ensemle du template.


• images : Tout d'abord, il faut les décrire sous la forme suivante:
  position:
  absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  Cela permet de fixer toutes les images au même point, de même taille et de les obliger à se superposer. Nous avons d'abord eu de nombreux problèmes car la position était en relative. Ainsi, les image s'agençaient l'une au dessous de l'autre. De plus, il à fallu fixer la position à 0.


• la barre résultat : Nous avons rencontré un très grand nombre de difficultés sur cette barre. Tout d'abord, les étalements ne se mettaient pas à la suite. Il y avait une sorte de compression sur la gauche. Nous avons dû créer un class afin de pouvoir mettre l'ensemble des éléments en inline-block. Ils sont ainsi alignés sur la même ligne. Nous avons ensuite fait face à un gros problème. Le bouton "OK" ne s'alignait jamais avec l'ensemble de la barre Nous avons ainsi du fixer sa position. Puis nous avons eu le problème sur input(jeu-13_NB3). En effet, il se mettait en dehors de la barre. Nous avons ainsi été obligé de fixer sa position ainsi :
  position:absolute;
  top:0%;

.
• les boutons : Nous avons dû faire en sorte que le bouton et l'image ne fassent qu'un. En effet, nous voulions éviter les bordure dans les boutons, car cela aurait pu être dommage vis à vis du fond dessiné. Ainsi, le bouton décrit dans l'HTML est repris dans le css, où l'image est ajoutée dans le fond, comme ceci:
  background: transparent;
  background-image: url(http://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-13/ok-jeu13.png);
  background-size:100%;
  background-repeat: no-repeat;
  border: 0 solid;
  Nous éliminons ainsi la bordure et nous rendons le background transparent, ce qui est indispensable car l'image possède un calque transparent à l'arrière. Cette fonction a été trouvée sur un site spécialisé. Nous devons après juste fixer sa position. Attention cependant à ce que les boutons se trouvent au-dessus des différents div image.


• le brouillage et texte de fin : Celui-ci doit impérativement se trouver au-dessus du div (jeu-13_fond), car sinon il n'apparaît pas(ce qui c'est passé la première fois que cela a été testé). Après quoi, il faut ajouter un background à brouillage, sous la forme suivante :
  #jeu-13_fini{
  background:silver;
  position:absolute;
  top:0;
  left: 0;
  height:100%;
  width:100%;
  opacity: 0.8;}
  Opacity décrit le taux de brouillage. après quoi nous avons positionné différemment les trois balises(jeu-13_bravo) pour que, lorsque le js inscrit avec sa fonction .html du texte, tout ne soit pas sur la même ligne. Nous avons en effet rencontrés de multiples problèmes dû à cela. En effet, les lignes de texte se mettait l'une au dessus de l'autre. Nous avons utilisé ceci :
  line-height: 2.0;
  

Le code Javascript (jeu-13/jeu-13.js) :

Je vais maintenant vous présenter le code Javascript de notre page:

• Les lignes 35 à 75 : Au début de cette partie de notre code, on cache l'image de fin de partie qui est en fait par dessus toutes les autres, on définit les variables globales qui seront utilisées durant le jeu. Puis, on donne le focus au bouton start, pour qu'il puisse être activé par la touche ENTER, on efface le champ de réponse qui a parfois des informations résiduelles quand on rafraîchit la page et ensuite, on cache la barre de résultats pour qu'elle ne s'affiche qu'au clic sur le bouton de départ.


• Les lignes 80 à 114 : Dans ces lignes on définit ce qui se passe lorsqu'un utilisateur veut démarrer une partie, il peut le faire par clic (ou par le bouton ENTER vu que le focus est toujours sur les boutons ciblés) sur le bouton #jeu-13_start ou #jeu-13_restart. Le bouton #start va simplement appeler la fonction "jeu" alors que #restart va réinitialiser toutes les variables, leur remettre leur valeur de départ, et ré-afficher toutes les pierres grâce à la boucle en lignes 103 à 108. Il va aussi cacher l'écran avec les résultats qui était apparu.
  Cette liste de variable ne fonctionnait pas au début, car je l'avais copié-collé de celle du début et qu'elle comportait un "var" devant chaque nom de variable. Les action qui étaient demandées n'étaient donc pas comprises par l'ordinateur qui avait déjà définit ces variables plus haut.
  
  

  /* affiche toutes les pierres */
  var i = 1
  while (i<7) {
  $("#jeu-13_pierre"+i).css("display","block");
  i = i + 1
  };

  Cette boucle, en lignes 103 à 108 va servir à faire réapparaître nos pierres devant la grotte. Elle avait été initallement prévue pour afficher les pierres même si il en restait encore, car nous pensions afficher un bouton pour recommencer pendant tout le déroulement d'une partie. Ce qui a été abandonné car le bouton s'affiche dans le div qui apparaît uniquement à la fin du jeu.


• Les lignes 116 à 141 (la fonction: "jeu") : Cette fonction a été créée car nous avons deux moyens de démarrer une partie, le bouton #start et le bouton #restart. Elle va donc être appelée par ces deux boutons.
  En premier lieu, cette fonction va s'occuper de vérifier que tous les éléments qui apparaissent ou disparaissent soient dans l'état voulu. Le bouton start ne sert plus à rien et la barre du calcul doit être affichée pour que le jeu puisse commencer.
  Ensuite la fonction définit les deux valeur pour le premier calcul. Selon le jeu qui nous servait de modèle il fallait que la somme des nombres à additionner ne dépasse pas 20, pour s'adapter au niveau des élèves.
  

  
  /* définit les deux propositions données par l'ordi */
  NB1 = Math.floor ( Math.random() * 17)+3;
  $("#jeu-13_NB1").html(NB1);
  
  diff = 20-NB1;
  
  NB2 = Math.floor ( Math.random() * diff);
  $("#jeu-13_NB2").html(NB2);
  

  La première partie de ce code, en ligne 125 à 132, définit aléatoirement un nombre NB1, avec la fonction "Math.random()", entre 0 et 1. On multiplie ce nombre par 17, pour avoir un nombre compris entre 0 et 17, puis on enlève la partie décimale avec "math.floor()". Enfin, on ajoute 3 pour que le nombre final soit compris entre 3 et 20. Aditionner 1 et 1, ou 2 et 2 serait trop facile. Cette fonction "random" nous a été conseillée par Jeremy et Eloi qui ont codé le jeu 9.
  Pour avoir un deuxième nombre sans que la somme des deux soit supérieures à 20, il faut définir un nombre dans la variable "diff" (pour différence) qui est égale à la différence entre 20 et NB1. Ensuite on répète les deux mêmes lignes, sauf qu'on remplace NB1 par NB2 et la limite supérieure, 17, par la différence, pour que la somme soit égale ou inférieure à 20.
  Après ça on vide NB3, qui est le champ où le joueur inscrit sa réponse et on lui donne le focus. Le joueur peut donc commencer sa partie.


• Les lignes 142 à 180(validation et résultat faux) : Pour valider son résultat depuis le champ NB3, on peut utiliser la souris sur le bouton #validation ou appuyer sur ENTER depuis le span NB3. Nous ne savions pas comment coder ça, alors une rapide recherche internet nous permît de trouver un morceau de code qui nous a été utile.
  

  
  /* pour valider son résultat par utilisation du bouton ENTER */
  $("#jeu-13_NB3").keypress(function (e) {
  if (e.which == 13) {
  validation ();
  }
  }
  );
  

  
  Cette fonction est appelée si une touche du clavier est pressée dans le champ NB3, elle teste si cette touche est la touche ENTER et, si c'est le cas, elle lance la fonction "validation".
  La fonction "validation" (ligne 158 à 248) est très longue et sera expliquée en plusieurs parties. Pour l'instant, nous allons nous concentrer sur les lignes 158 à 180 qui sont les premiers tests ainsi que les indications destinées à l'ordinateur si la réponse inscrite dans NB3 par le joueur est fausse.
  

  
  /* 1) vérification du résultat*/
  NB3 = parseInt($("#jeu-13_NB3").val());
  somme = NB1 + NB2;
  if (NB3 != somme)
  

  
  Premièrement, la fonction va aller rechercher la valeur inscrite par le joueur et la mettre dans NB3, ensuite elle va aditionner NB1 et NB2, et enfin, elle va tester si les deux valeurs sont différentes.
  Si elles le sont, il faut tout d'abord inscrire un "F" dans "resume" qui va donner le résumé de la partie du joueur à la fin. Ensuite de ça il faut vérifier que la variable "parcours" qui détermine le numéro de la pierre à enlever ou remettre, ne grimpe pas si toutes les pierres sont affichées, car dans ce cas il faudrait revenir avec le même nombre de coups justes que de coups faux pour qu'on voie une amélioration. Un simple "if" nous permet de vérifier ça. Quoiqu'il en soit, il faut aussi incrémenter de 1 la variable qui compte les erreurs; ce qui est fait dans les deux cas.


• Lignes 180 à 220 : Dans ces lignes, il est codé ce qui se passe quand le joueur répond juste et que plus aucune pierre n'est encore affichée; ceci est testé en ligne 184. Comme c'est la dernière réponse à donner on définit ce qui va être dit au joueur dans le div #fini qui apparaît plus tard.
  Tout d'abord on détermine, en fonction du nombre d'erreurs du joueur quelle sera son appréciation. Une suite de conditions va inscrire ce commentaire dans la variable "commentaire" selon un barème déterminé.
  Entre les lignes 212 et 221 on affiche ce message, avec ses trois lignes, puis on cache la barre du calcul, on affiche le bouton #restart et on lui donne le focus.
  

  
  /* on affiche un commentaire pour l'élève et on permet au jeu de redémarrer */
  $("#jeu-13_fini").css("display","block");
  $("#jeu-13_bravo1").text(" GAGNE!!!!!!" );
  $("#jeu-13_bravo2").text(" Ton parcours:"+resume+"");
  $("#jeu-13_bravo3").text(commentaire+" Tu as fait "+erreurs+" erreur"+pluriel+"." );
  (lignes 212 à 217)

  
  Les trois lignes de ce messages comportent plusieurs informations. La première félicite le joueur "GAGNE!!!!!" . La deuxième informe le joueur du parcours qu'il a eu grâce à la variable "resume". La troisième lui donne son appréciation et son nombre d'erreurs. La variable "pluriel" sert à ce que l'accord du mot "erreur(s)" dans le message "tu as fait X erreur(s)" qui est affiché sur le dernier écran soit juste par rapport au nombre donné. En lignes 205 à 209 on peut voir :
  

  
  /* pour que "erreur(s) soit accordé avec le résultat */
  if (erreurs >= 2) {
  pluriel = "s";
  };

  
  Ce qui veut dire que, si le nombre d'erreurs est supérieur à deux, un "s" sera inscrit dans la variable pluriel et il sera ajouté à la fin du mot dans le message.


• Les lignes 230 à 248 : Dans ces lignes on définit ce qui se passe en cas de réponse juste du joueur, si ce n'est pas la dernière réponse, c'est le cas qui résulte si toutes les conditions expliquées plus haut ne sont pas remplies.
  Tout d'abord, la valeur de la variable parcours va être réduite de 1. Puis, cette valeur détermine le numéro de la pierre qui sera enlevée grâce à la variable "numerodepierreJ". Cette variable s'appelle comme ça car une autre variable, mais avec un F majuscule, sert à la même chose dans le cas où le résultat est faux.
  Ensuite de ça, on définit les deux nouvelles propositions de l'ordinateur, ce qui a déjà été expliqué, et en tout dernier, dans tous les cas où la fonction validation est lancée, le focus est donné à NB3 et il est vidé de sa valeur. Cette fonctionnalité a été difficile à trouver car toutes les sources me proposaient des codes de plus de dix lignes qui permettaient de retirer le texte grisé d'un champ lorsqu’on cliquait dessus. Comme par exemple pour indiquer qu'il faut y inscrire une adresse, un nom, un numéro de téléphone dans un formulaire. Comme ce n'était pas vraiment ce qui nous intéressait, nous avons simplement indiqué au champ qu'il devait prendre une valeur nulle et cela a marché.
  Ensuite de ça, les dernières lignes du documents sont consacrées à la fermeture du document, pour être plus précis de la fonction:
  

  $(document).ready(function(){

  qui indique qu'il faut utiliser le JS seulement quand la page est entièrement chargée.