Mathémagiques

Jeu 9

1. L'idée générale :

L'idée de notre jeu est de créer 4 lignes d'additions, composées chacune de 3 champs input à compléter par le joueur. La somme des 3 champs input présents sur chaque ligne de calculs doit être égale à la valeur du nombre aléatoirement créé au préalable à l'aide du language Javascript.
La vérification de chaque calcul se fait au moment du clic sur un bouton '' Vérifier ! '' symbolisé par un vu blanc sur un fond vert.
Le partie peut être recommencée via le bouton " Recommencer ! " symbolisé par une flèche qui tourne sur elle-même.

2. Le Javascript :

Math.floor( ) : Cette fonction nous a permis d'obtenir des nombres aléatoires entiers ; elle arrondie la variable vers sa partie entière inférieure ou égale.

Math.random( ) : Cette fonction génère un nombre aléatoire entre 0 (inclus) et 1 (exclus).

Notre fonction randomnumber : Grâce à la fonction Math.random, nous créons un nombre aléatoire entre 0 et 1. Puis, nous le multiplions par 18 : nous obtenons donc potentiellement tous les nombres possibles et imaginables compris entre 0 et 18 (exclus). Puis, nous additionnons le nombre obtenu par 3 : ainsi, le chiffre aléatoire le plus petit possible sera 3, évitant ainsi de devoir utiliser des zéros dans les champs input. Enfin, la fonction Math.floor arrondie les chiffres vers leur partie entière inférieure ou égale afin d'obtenir des nombres entiers naturels. Notre fonction finale randomnumber nous permet de créer aléatoirement des nombres entre 3 et 20.

Au moment du clic sur le bouton '' Vérifier ! '', nous récupérons la valeur de chaque input grâce à la fonction Javascript parseInt( $( ).val( ) ), puis nous trouvons pour chaque ligne d'addition la somme des 3 input. Enfin, via la fonction if...else, nous vérifions les une après les autres si les sommes correspondent aux nombres aléatoires créés en début de partie. Dès lors, 3 cas de figures apparaissent :

- La somme de la ligne correspond au nombre aléatoire : un bonhomme souriant prend la place du bouton '' Vérifier ! '' à l'aide d'une modification du CSS (voir point 3).

- La somme de la ligne ne correspond pas au nombre aléatoire : un bonhomme mécontent prend place à côté du bouton '' Vérifier '' à l'aide d'une modification du CSS (voir point 3). Ainsi, le joueur peut changer les valeurs des champs afin d'arriver à la bonne réponse.

- Un des input comprend un zéro : une alerte s'affiche et prévient le joueur de sa faute. Par contre, la réponse est comptabilisée comme juste, afin d'éviter un problème récurrent : la partie recommence avant que le joueur n'est pu prendre connaissance de l'alerte.

3. Le CSS :

La balise display : elle permet d'afficher ou de cacher un élément HTML suivant la valeur qui lui est attribué. De ce fait, les images des bonshommes souriants et des bonshommes mécontents sont sous la valeur display:none; au début du jeu, afin que l'on ne puisse pas les voir sur l'écran. Puis, au moment de la vérification des réponses, 2 cas différents peuvent apparaître :

- la somme de la ligne correspond au nombre aléatoire : Via notre code Javascript, la valeur du display de l'image du bonhomme souriant devient inline, tandis que la valeur du display du bonhomme mécontent reste none. L'image du bonhomme souriant apparaît, alors que le bonhomme mécontent reste cacher.

- la somme de la ligne ne correspond pas au nombre aléatoire : Via notre code Javascript, la valeur du display de l'image du bonhomme mécontent devient inline, tandis que la valeur du display du bonhomme souriant reste none. L'image du bonhomme mécontent apparaît, alors que le bonhomme souriant reste cacher.

4. Le HTML:

La partie HTML de notre jeu reste très simple : la balise input pour les champs à compléter, les balises img et a pour les images-liens (ou images cliquables), un div pour séparer la partie jeu et la partie "Authentification & Enregistrement", quatre span pour créer 4 espaces différents pour chaque nombre aléatoire créé, et l'utilisation des id afin de bien différencier chaque partie du jeu.