Jeu 3

Idée générale

Il s'agit ici de créer un jeu qui fasse apparaître un chiffre aléatoire et des cases avec des boules à l'intérieur. Le but est de compter le nombre de boules dans chaque case et de cliquer sur celle(s) qui correspond(ent) à la donnée.

Le HTML

Le corps du html est principalement constitué de boutons ,de labels et d'un formulaire.

La donnée est affichée dans un label, dans une div "entete". Les choix proposés sont quand à eux affichés dans un formulaire. L'avantage du formulaire, c'est que l'on va pouvoir récolter toutes les réponses et les traiter en un coup. Le formulaire est lui aussi dans une div "contenu", ainsi que le bouton pour recommencer et les smiley qui indique si la réponse est juste ou fausse.

La balise "FORM NAME="choix" id="choix"" permet de créer un formulaire. On y place les différentes propositions, grâce à des cases a cocher, ce qui permet plusieurs réponses possibles. Lorsque que le bouton valider est pressé, on va appeler la fonction reponse(), en transmettant les données récoltées dans le formulaire : reponse(choix). Voir la section javascript.

Pour le bouton recommencer, on a créer un lien avec une image. Grâce à l'id, on va pouvoir dire dans le javascript que faire lorsque que ce bouton est cliqué.

Pour terminer, on place deux smiley, un heureux, et un trsite. Il serviront a indiquer si les réponses étaient justes ou fausses. Pour l'instant, on les masque grâce à : "style="display:none". On activera l'une ou l'autre des images dans le javascript.

Le javascript

Fonction start()

On commencer par réinitialiser les variable «listeControl» et «listeChiffre», on les vides.

Ensuite on met en place une boucle while. Cette boucle servira a tirer au hasard six chiffres et de les placer dans une liste dans «listeChiffre». La fonction «random» tire un chiffre au hasard et on l’a programmée pour que ce chiffre soit compris entre 1 et 9 compris. On tire un chiffre puis on le place dans la liste.

On introduit ensuite une nouvelle variable que l’on va nommer «index». Avec la même fonction random que dans la boucle while, on va cette fois tirer un chiffre au hasard entre 1 et 5 compris. En fait, «index» va définir la position du chiffre dans la liste qui sera affiché dans le label «donnée».

Ex:

On tire une liste grâce à la boucle while qui nous retourne ceci :
listeChiffre=2,4,6,8,2,4 Ensuite, on tire le nombre «index» au hasard.
Hasard=2
On va donc prendre le chiffre en deuxième position depuis la gauche dans la liste listeChiffre. C’est a dire que le chiffre de la donnée sera égal à 4.

Il reste a choisir les chiffres des choix proposés au joueur. Pour ceci, rien de plus simple, on choisi comme premier choix proposé le premier chiffre de la liste, le deuxième le second de la liste, et ainsi de suite.

Ex:

Si l’on reprend notre exemple. listeChiffre=2,4,6,8,2,4 Le premier choix sera = 2 Le deuxième = 4 Le troisième = 6 etc….

Pour la section de code suivante, on utilise une autre liste, que nous avons nommée «listeControl» en référence avec «contrôler la liste». Cette liste va contenir les informations afin de dire lesquels des choix proposés correspondent à la donnée.

On va remplir cette liste avec des «true» si le choix et la donnée correspondent et «false» dans le cas contraire.

Ex.

listeControl = false, true, false, false, false, true

On obtient cette liste de la façon suivante. Si le chiffre du choix est égal à celui de la donnée, on ajoute true a la liste, sinon false.
Ex.

if (listeChiffre[0]==listeChiffre[index]) { listeControl.push(true); } else { listeControl.push(false); } Si le chiffre en position 1 dans la liste listeChiffre est strictement égal à celui en position «index» dans la liste listeChiffre, alors ajoute true sinon false.

Fonction choixImage()

ChoixImage() va servir à retourner la balise de l’image correspondante.

On a nommé toutes les images de la même manière imX_Y.png

X = nombre de boules représentées Y = version de l’image parmi les trois crées.

X est définit grâce a la fonction start() comme décrit ci-dessus.
Pour Y, on utilise la même fonction random pour tirer un chiffre entre 1 et 3.

On créer ensuite le lien vers l’image. Pour cela, on colle bout a bout des modules. «l’url commune»+X+»_»+Y+».png».

On reprend ce lien pour créer la balise complète à la ligne suivante en utilisant la même technique

Fonction réponse ()

Lorsque que le bouton valider est cliqué, il active cette fonction. On va ici vérifier que ce que l’utilisateur a coché soit juste. Qu’il ai coché uniquement les choix correspondants à la donnée et tous. Sinon, on va annoncer une erreur et réinitialisées les cases cochées.

On utilise pour cela des condition, ou «if» en html. On contrôle choix par choix, l’un après l’autre en commençant par le premier. On dit que si le choix est sélectionner, on va retourner un «true» et si le choix n’est pas coché, un «false». On va immédiatement contrôle si ce choix devrait être coché ou non. On va pour cela utiliser notre liste «listeControl» qui contient, pour rappel, une suite de true et de false.

Donc. Est-ce que le bouton est coché ? Oui ou non. Est-ce qu’il devait être coché ? Oui ou non.

On pose ces «questions» pour chaque choix. Si les deux réponses correspondent pour chacunes d’elles, on affiche un smiley, on relance la fonction start qui retire des nouveaux chiffres et on réinitialise les cases à cocher, soit le formulaire HTML. Pour la réinitialisation, on a créer une autre fonction spécialement pour, qui se nomme «reset_form».

Si toutes les conditions n’ont pas étés respectées, on affiche un smiley triste qui indique une faute et on lance la fonction «reset_form» qui va réinitiliser les choix.

Fonction reset_form()

On indique que chaque case a coché avec l’identifiant «choix» doit être remise à zéro, c’est a dire vide.

Jusqu’a présent, on affiche dans chaque choix un chiffre écrit. On aimerais, pour le jeu, que la page affiche non pas des chiffre mais des images avec un certain nombre de boules, dont le nombre correspond a celui du choix.

Il a donc fallu créer différentes images grâce au logiciel «ArtText» disponible sur le Mac App Store. Nous avons créer trois images différentes pour chaque chiffres. Il s’agit maintenant d’afficher un des trois modèles sur le choix listeControlespondant. On a donc créer une fonction «choixImage»

Crédits images

Boutons : medialoot.com
Smiley :Wikicommons :
http://commons.wikimedia.org/wiki/Smiley#mediaviewer/File:Face-smile.svg
http://commons.wikimedia.org/wiki/Smiley#mediaviewer/File:Face-sad.svg