I would like to know how to process
Le TP2 a pour but de vous faire pratiquer les concepts suivants : les boucles, les tableaux, les fonctions, la décomposition fonctionnelle, le traitement d'événements et la programmation web. Le code que vous devez écrire (fichier tp2.py) implémente un jeu qui exécute dans l'environnement codeBoot Vous pouvez utiliser le code qui a été montré dans le cours. 1. Introduction Ce travail pratique consiste à développer une application web pour jouer au jeu poker shuffle. C'est un jeu joué en solitaire (un seul joueur) avec des cartes à jouer standard (52 cartes). Le jeu consiste à piger 25 cartes une à la fois et les placer dans une grille 5 par 5 pour former des mains de poker sur les 5 rangées et 5 colonnes. Chaque main de poker (une paire, deux paires, full house, etc.) a un nombre de points correspondants. Le joueur doit tenter de maximiser le pointage total, c'est-à-dire la somme des points pour les 5 rangées et 5 colonnes. Lorsque le joueur place la 25ième carte, le jeu se termine et le programme affiche le pointage final puis redémarre une nouvelle partie. Avant la fin de la partie le joueur peut déplacer les cartes sur la grille. Il peut aussi recommencer une nouvelle partie en cliquant sur un bouton. 2. Mains de poker et pointage Une main de poker est un groupe de 5 cartes. Voici les différentes mains de poker et le pointage associé, par ordre décroissant de pointage : • (100 points) Quinte Flush Royale : L'as, le roi, la dame, le valet et le 10 d'une même couleur (tous trèfle, tous pique, tous carreau, ou tous coeur). • (75 points) Quinte Flush : Cinq cartes de même couleur qui se suivent (par exemple le 7, 8, 9, 10 et le valet, tous trèfle, tous pique, tous carreau, ou tous coeur). • (50 points) Carré : Quatre cartes de même valeur (par exemple quatre valets). • (25 points) Full House : Trois cartes de même valeur et une paire de cartes de même valeur (par exemple trois as et deux 9). • (20 points) Couleur ou Flush : Toutes les cartes de même couleur (tous trèfle, tous pique, tous carreau, ou tous coeur). • (15 points) Quinte : Cinq cartes qui se suivent (par exemple le 8, 9, 10, valet et dame). Il est à noter que l'as peut être le début ou la fin de la séquence. • (10 points) Brelan : Trois cartes de même valeur (par exemple trois rois). • (5 points) Double Paire : Une paire de cartes de même valeur et une autre paire de cartes de même valeur (par exemple deux rois et deux 7). • (2 points) Une Paire : Une paire de cartes de même valeur (par exemple deux as). 3. Déroulement de la partie L'interface graphique du jeu contient (de gauche à droite) un bouton, la pioche et une grille de 5x5 cases. Au bout de chaque rangée et colonne il y a la place pour mettre un pointage, et dans le coin inférieur droit de la grille on trouve le pointage total. Au début d'une partie la pioche montre le dos d'une carte, la grille contient des silhouettes de cartes vides, le pointage total est 0 et les pointages des rangées et colonnes n'affichent rien (c'est seulement lorsqu'il y a une main de poker valant des points qu'on doit afficher le pointage correspondant). Voici à quoi ressemble la fenêtre au début d'une partie : Le joueur doit cliquer sur la pioche pour voir la face de la carte. En cliquant sur la pioche, cela sélectionne la carte (elle aura un fond de couleur vert vif). Cela permettra avec un clic sur une case vide de la grille d'y transférer la carte. Il est aussi possible de cliquer sur une carte de la grille pour la sélectionner, et ensuite cliquer sur une autre case de la grille (vide ou pas) pour échanger le contenu des deux cases. Voici à quoi pourrait ressembler la fenêtre au milieu d'une partie après que le joueur ait cliqué sur la pioche : Le joueur pourrait ensuite cliquer sur la quatrième case de la première rangée de la grille pour y mettre le 7 de pique, et ainsi obtenir les points pour 2 paires sur cette rangée. Il pourrait aussi cliquer sur la pioche à nouveau pour déselectionner cette carte ou bien cliquer sur une des cartes non vides de la grille pour sélectionner cette carte (avec l'intention de la déplacer). Vous devez expérimenter avec le programme modèle pour imiter comment les cartes sont sélectionnées. Lorsque la dernière carte est placée sur la grille, le programme affiche le pointage final comme suit avant de redémarrer une nouvelle partie : 4. Détails techniques Comme nous l'avons vu en classe codeBoot permet d'écrire des applications web en Python en utilisant des méthodes pour modifier le DOM et traiter des événements. Vous ne devez pas écrire de fichier .html ou .css car tout le code incluant le HTML et CSS sera dans votre fichier tp2.py . Les images des cartes en format SVG, Scalable Vector Graphics, sont disponibles sur le serveur web codeboot.org tel qu'indiqué ci-dessous. Sachez que codeBoot est une application web qui contient un élément div vide en haut de son fichier .html qui a un attribut id égal à "main" comme ceci :
Il est donc possible d'ajouter du contenu à la page de codeBoot en exécutant le code suivant (qui ajoute un texte en rouge) : main = document.querySelector('#main') main.innerHTML = '
bonjour!' D'autre part, pour cacher codeBoot pendant le jeu, vous pouvez utiliser le menu contextuel (clic du bouton droit de souris) pour choisir le mode Hide codeBoot et ainsi ne pas voir l'interface de l'environnement codeBoot. Pour continuer le développement vous pouvez ensuite utiliser le menu contextuel à nouveau pour choisir le mode Full window ou Floating window. Dans votre fichier tp2.py vous devez avoir une fonction init qui démarre le jeu en créant le contenu HTML qui sera mis dans l'élément "main". Votre fichier tp2.py doit se terminer par l'appel init() pour démarrer le jeu. En guise d'exemple, on pourrait définir la fonction init comme suit pour afficher une grille 2x2 de cartes avec une des cartes sélectionnée : def init(): main = document.querySelector('#main') main.innerHTML = """ #main table td { border: 0; padding: 1px 2px; } #main table td img { height: auto; }
""" case0 = document.querySelector('#case0') case0.setAttribute('style', 'background-color: lime') init() Ici on se sert de la syntaxe """...""" de Python pour exprimer un texte litéral sur plusieurs lignes. Évidemment, pour une grille de 5x5 il serait mieux de créer le HTML avec des boucles, fonctions ou map pour éviter des répétitions de code. Le code HTML dans l'élément "main" devra inclure des traiteurs d'événements, tout particulièrement onclick="..." pour réagir au clics de souris. Pour les images des cartes à jouer, le serveur web codeboot.org contient un sous-répertoire cards où se trouvent les fichiers d'image en format SVG. Les noms des fichiers d'image sont dérivés de l'anglais (QH.svg pour Queen of Hearts, 10D.svg pour 10 of Diamonds, empty.svg pour la silhouette de carte, et back.svg pour le dos de carte). Le format SVG a l'attrait de donner des images très nettes car c'est un format qui permet de faire un zoom infini sur l'image. Pour indiquer qu'une carte est sélectionnée, utilisez la couleur lime comme background-color du style de l'élément. Pour désélectionner une carte retirez l'attribut de style de l'élément avec l'appel de méthode element.removeAttribute('style') . Nous vous suggérons d'utiliser un nombre de 0 à 51 pour identifier les cartes, et d'utiliser le code 52 pour la carte vide et 53 pour le dos de carte. Les nombres de 0 à 3 correspondent au quatre as (de chaque couleur), puis les nombres 4 à 7 correspondent au quatre 2 (de chaque couleur), et ainsi de suite. Donc si on a les cartes x et y, elles ont la même couleur si x%4 = y%4, et elles ont la même valeur si x//4 = y//4. Un paquet de carte peut donc être représenté par un tableau de longueur 52 contenant des nombres de 0 à 51 (dans un ordre arbitraire si le paquet est mélangé). On peut créer un paquet de carte mélangé en partant d'un tableau des nombres consécutifs de 0 à 51, puis échanger le dernier élément avec un des éléments du tableau pigé aléatoirement, puis échanger l'avant dernier élément avec un des éléments du tableau (sauf le dernier) pigé aléatoirement, puis échanger l'avant avant dernier élément avec un des éléments du tableau (sauf les deux derniers) pigé aléatoirement, et ainsi de suite. 5. Évaluation • Ce travail compte pour 12.5 points dans la note finale du cours. Vous devez le faire par groupes de 2 personnes. Indiquez vos noms clairement dans les commentaires au début de votre code. • Vous devez remettre votre fichier tp2.py uniquement. La remise doit se faire au plus tard à 23h55 mardi le 19 avril sur le site Studium du cours. • Chaque fonction devrait avoir un bref commentaire pour dire ce qu'elle fait, il devrait y avoir des lignes blanches pour que le code ne soit pas trop dense, les identificateurs doivent être bien choisis pour être