Astuce #18: Jeu de loterie en ligne avec PHP et Javascript (#2 le tirage)

Bonjour à tous, et bienvenue dans cette nouvelle vidéo où nous allons traiter la deuxième partie de la création d'un jeu de loterie en ligne. Dans la vidéo précédente, nous avons pu créer la page qui permet au joueur de sélectionner 6 numéros dans une grille qui renferme 49 cases. Nous avons utilisé le langage PHP pour créer la grille et JavaScript pour rendre la sélection des numéros plus interactive. Dans cette vidéo, nous allons procéder au tirage de 6 numéros aléatoires compris entre 1 et 49, puis comparer chacun de ces numéros-là avec ceux sélectionnés par le joueur avant d'afficher le résultat du jeu. Là encore, nous allons utiliser les 2 langages PHP et JavaScript. Le langage PHP nous permettra de tirer au sort 6 numéros et procéder à la comparaison avec la sélection du joueur. JavaScript quant à lui, nous permettra de simuler le tirage en temps réel afin de tenir le joueur en haleine durant le jeu. Encore une fois, nous allons nous servir du PHP dans les parties critiques du jeu afin d'empêcher toute tentative de trafic qui serait possible en manipulant le code côté client comme ça pourrait être le cas avec JavaScript. Maintenant on va s'intéresser à la page tirage.php. On commence par intégrer le titre H1, puis on va rappeler les numéros qui ont été joués par l'utilisateur. On va intégrer ces numéros dans des div. Nous allons juste mettre un chiffre quelconque afin de voir à quoi ça va ressembler sur le navigateur. Exécutons. Ça va ressembler à ça. Maintenant on va ajouter un peu de CSS. On applique une marge supérieure de 60 pixels au titre H2. On change aussi la couleur. Ça donne ceci. Et pour les numéros, puisque ce sont des divs, alors ils sont par défaut de type bloc, alors on va les transformer en inline-block. On change la couleur de la bordure. On applique le box-sizing. On fixe la largeur à 100 pixels et la marge interne à 20 pixels. On agrandit la taille du texte et on change sa couleur. On a appliqué cette police sachant qu'elle était embarquée au préalable, comme ceci. Réexécutons. Alors ça donne ceci. Maintenant on va rappeler les numéros qui ont été appliqués par l'utilisateur. Qu'on récupère avec le POST comme on a fait dans la dernière vidéo. Là, on va récupérer une chaîne de caractères qui contient les 6 numéros espacés par un espace blanc. Et n'oublions pas qu'il y a un espace encore à la fin de la chaîne. En fait, si on regarde bien le code JavaScript de la dernière fois, on va voir qu'il y aura forcément un espace qui va s'ajouter à la fin de la chaîne. Alors on va retirer cet espace avec la fonction trim. En guise de rappel, la fonction trim du PHP permet de retirer tous les espaces de début et de fin de la chaîne. Maintenant, on va éclater la chaîne au niveau des espaces qui sont au milieu afin de créer un tableau qui contiendra les 6 numéros. Qu'on appellera numéro d'ailleurs. Comme ça. Alors maintenant il suffit d'afficher ces numéros dans cette partie. On va encore mettre une boucle en PHP. Qui va s'exécuter 6 fois et dans mettra la variable numéro qui est un tableau avec l'index i. Exécutons. Alors les 6 numéros qui ont été joués par l'utilisateur ont été affichés ici. Maintenant on va procéder au tirage. Alors on va juste copier ce bloc de code et là on changera le texte et on mettra résultat du tirage. Exécutons. Ça donnera quelque chose qui ressemble à ça. Bien sûr ici on a répété les numéros qui ont été sélectionnés par l'utilisateur. Mais on va changer ça. Là, on mettra le résultat du tirage au sort qui sera effectué par le PHP. Alors, le résultat du tirage, on va stocker ça dans un tableau qu'on appellera tirage, qui est vide dans un premier temps. Donc là, on va exécuter une boucle qui va tirer 6 nombres aléatoires. Que l'on va stocker dans le tableau tirage. On s'est servi de la fonction mtrand qui permet de générer un nombre aléatoire compris entre 1 et 49, ou plutôt un nombre pseudo-aléatoire si vous voulez, et que l'on stocke dans l'index courant du tableau tirage. Maintenant on va mettre tirage ici. Exécutons. Donc ça donne ces nombres comme ça. Bien que ça a l'air bon, mais en fait il y a un problème de taille. Il n'y a aucune garantie que le nombre ne soit pas tiré 2 fois. Pour en avoir le cœur net, voilà ce qu'on va faire. On va rétrécir l'intervalle du tirage. On mettra par exemple de 1 jusqu'à 6. Puisque la boucle va s'exécuter 6 fois, alors on est censé avoir 6 nombres aléatoires qui sont compris entre 1 et 6. Et pourtant ça serait pas vraiment le cas. Par exemple, le nombre 6 est tiré 2 fois, le nombre 5 est tiré 3 fois, et ça c'est un problème. Maintenant on va assurer l'unicité des nombres tirés. Pour ça on va utiliser la boucle Do While. On va tirer un nombre aléatoire compris toujours entre 1 et 6 pour faire le test, que l'on va stocker dans une variable qui est nommée tr. Cette boucle va s'exécuter tant que ce nombre, ça veut dire tr, existe dans le tableau tirage. C'est uniquement quand la variable tr n'existe pas dans tirage que l'on va sortir de la boucle Do While et on va ajouter ce nombre-là au tableau tirage. Réexécutons maintenant. Là, je crois que c'est bon. Alors nous avons vraiment des nombres qui sont uniques, qui se répètent pas. Répétons. On a toujours le même résultat, c'est-à-dire que c'est bien. Alors là, on peut élargir l'intervalle, on mettra 49. À la fin, on va annoncer le résultat, c'est-à-dire on va afficher combien de bons numéros ont été joués par l'utilisateur. Alors on va intégrer le code ici. On initialise une variable qui s'appelle $bon. À 0 pour dire qu'au début il n'y a aucun bon numéro. Et après on va incrémenter cette variable à chaque fois qu'on rencontre un bon numéro. On exécute la boucle et on vérifie la correspondance des numéros. On vérifie si la valeur courante du tableau tirage figure dans le tableau numéro. Tirage, c'est le résultat du tirage au sort, et numéro, c'est la sélection qui a été faite par l'utilisateur. Si c'est le cas, on incrémente la variable bon. Maintenant, on va afficher le résultat dans la balise H2. On affiche le message vous avez eu X bons numéros, sachant que le X va être remplacé par la valeur de la variable bons. Alors exécutons. Donc vous avez eu un bon numéro, qui est dans ce cas le numéro 17. On va encore styliser ce message. On ajoute un identifiant résultat et il est préférable de mettre le nombre dollar bon dans une balise span afin de lui appliquer un style spécial. Alors on change la taille de la police, on applique un arrière-plan un peu transparent avec du noir. On change la largeur du container, on applique 800 pixels. On applique une marge supérieure et inférieure de 60 pixels, une marge gauche et droite de auto. Afin de centrer l'élément et une marge interne de 20 pixels. Et pour le span, on change sa couleur tout simplement. Exécutons. Donc ça donne, vous avez eu un bon numéro, toujours, et le style du message a été changé. Alors jusqu'ici je crois que c'est bien, mais vous avez constaté que le tirage s'effectue au chargement de la page. Pourtant si on veut attirer l'attention de l'utilisateur ou bien tenir ce dernier en haleine, on va faire semblant que le tirage se fait en temps réel. Alors on va animer tout ça avec du JavaScript. On va intégrer notre script ici. Au chargement de la page, On exécute une fonction anonyme et là on a besoin de récupérer les nombres qui ont été joués par l'utilisateur et aussi les nombres qui ont été tirés par le PHP au hasard. On va faire ceci: la variable $num représente les numéros qui ont été joués par l'utilisateur et ça va être de type tableau. On va faire une astuce comme ça. Donc on affiche la variable sélection qui a été récupérée au début, bien sûr qui est la chaîne de caractères qui représente les nombres qui ont été joués par l'utilisateur. Et on va lui appliquer la méthode split de JavaScript qui permet de l'éclater au niveau des espaces. Et à la fin, il en résultera un tableau num qui contient 6 index. N'oublions pas que sélection dans ce cas c'est une chaîne de caractères, donc on va la mettre entre les doubles quotes. Parce que ça c'est du JavaScript. Bien entendu il y a aussi du PHP qui est exécuté dedans. Mais n'oubliez pas que le PHP s'exécute côté serveur. Alors ce qu'il envoie c'est juste une chaîne de caractères que JavaScript va voir comme étant une chaîne normale. On fait la même chose pour la variable res qui est le résultat du tirage au sort. Mais là on dispose pas d'une chaîne de caractères qui est prête. Alors ce qu'on va faire c'est appliquer la fonction implode de PHP. Qui permet de convertir un tableau en une chaîne de caractères. Voilà, comme ça. Alors on a déjà un tableau qui s'appelle tirage. On va grouper ces éléments en les espaçant par un espace blanc. Et à la fin ça donne une chaîne de caractères délimitée par des doubles quotes. Et avec JavaScript on va encore éclater cette chaîne au niveau des espaces afin de récupérer un tableau qui s'appellerait res. À la fin, nous avons 2 tableaux JavaScript: un tableau num qui contient les numéros qui ont été joués par l'utilisateur, et res qui contient les résultats du tirage au sort qui a été fait par le PHP. Ensuite, on va initialiser 2 variables i et j. Le i, ça va représenter la case à animer parce qu'on a 6 cases qui contiennent 6 numéros, et le j, c'est tout simplement le nombre qui va s'incrémenter au milieu de chaque case. Alors le i peut varier entre 0 et 5 et le j peut varier entre 0 et 49. Et à la fin on va appeler une fonction qui s'appelle tirer qui va assurer le tirage au sort. Bien sûr c'est juste une simulation du tirage parce que le tirage a déjà été fait en PHP. On déclare maintenant la fonction tirer. C'est une fonction récursive. Qu'on rappelle au bout de chaque 40 millisecondes, on vérifie si la variable j est inférieure au nombre aléatoire qui a été tiré dans la case courante. Comme ça. Si c'est le cas, on incrémente j de 1, puis on affiche ce résultat dans la case concernée. Voilà, il faut pas oublier d'appliquer le ID ici sur ce container comme ceci. Alors maintenant le container est identifié par 0, 1, 2 jusqu'à 5 et c'est lui que l'on va cibler avec le JavaScript dans ce cas. J'ai oublié un echo ici. Exécutons maintenant. C'est bon pour la première case, ça s'anime bel et bien. Voilà, et ça s'arrête au nombre qui a été réellement tiré par le PHP. Maintenant on va généraliser ça sur toutes les cases. Là on va mettre un else, c'est-à-dire si on a atteint le nombre qui a été tiré, maintenant on va passer à la case suivante. Alors il faut réinitialiser le nombre j pour recommencer le tour. On vérifie si la variable i est inférieure à 5 parce qu'on a 6 cases en tout. Alors si c'est inférieur à 5, on peut l'incrémenter. Sinon, c'est qu'on a fini le parcours des cases, donc on arrête le temporisateur. Exécutons. Bon, je crois que c'est bien. Il y a juste un truc, c'est que vous constatez bien que le résultat a été annoncé avant même que le tirage soit effectué. Bon, on sait que le tirage a déjà été effectué avec le PHP. Mais on veut faire semblant que le tirage s'effectue en temps réel. Donc on a intérêt à masquer ce message jusqu'à ce que toutes les cases soient initialisées. Alors on va se rendre dans le CSS et on masque la case résultat. Maintenant elle n'est plus visible, mais quand est-ce qu'elle le sera? C'est quand on aura initialisé la dernière case. C'est ce qu'on va faire en JavaScript. Alors quand on aura arrêté le temporisateur, on va afficher le container qui annonce le résultat. Comme ça, exécutons. C'est bien. On peut encore améliorer cet exercice parce que ça m'annonce ici que j'ai un bon numéro. Mais à première vue, c'est un peu difficile de trouver. Donc il faut vraiment parcourir toutes les cases et à la fin on va trouver que c'est la case numéro 40. Alors ce qu'on va faire, c'est mettre en surbrillance les bonnes cases. Alors on va ajouter ça en JavaScript. Donc à chaque fois qu'on voudrait passer à la case suivante, on va vérifier si la case courante contient le bon numéro. Voilà, on a déjà vu la méthode indexOf qui s'applique sur les chaînes de caractères et aussi sur les tableaux. Elle permet de vérifier si une occurrence existe bien dans la chaîne ou bien dans le tableau concerné. S'il n'existe pas, dans ce cas ça retourne -1. -1 ici. C'est différent. Alors on vérifie si le tableau num contient le numéro courant. Si c'est le cas, ça veut dire si c'est différent de -1, dans ce cas on va mettre en surbrillance la case concernée qui est identifiée par i. Voilà, on change déjà la bordure, on change aussi la couleur d'arrière-plan si vous voulez, et aussi la couleur du texte. On mettra une couleur sombre, du noir par exemple. Alors exécutons. Alors là, j'ai un bon numéro qui est dans ce cas le 24. Alors vous avez constaté qu'on peut facilement l'identifier, et pourtant j'ai un problème au niveau de la bordure, ça n'a pas été coloré correctement. Je vais vérifier la syntaxe. Ah oui, c'est color. Voilà, réexécutons. Alors on a un seul bon numéro qui dans ce cas est le 17. Donc je crois que notre code est bon. J'espère que vous avez apprécié cet exercice. Merci pour votre attention et à la vidéo prochaine.