tp6-puissance-4-gui

TP N°6 : l’interface graphique du jeu
de Puissance 4
Durée : 3h
Le but de cette séance est de programmer une interface graphique pour le jeu de puissance 4 que vous avez
programmé en TP5. Cette interface graphique sera programmée grâce à la bibliothèque Python tkinter. Le TP est
divisé en deux parties : la première partie est consacrée à la familiarisation avec la bibliothèque tkinter (voir
chapitres 8 et 13 du livre « Apprendre à programmer en Python 3 » disponible sous Arche, si vous voulez plus de
détails sur tkinter), dans la deuxième partie, vous allez programmer une interface graphique pour le jeu de
Puissance 4.
Partie 1 : Premiers pas avec tkinter (1h)
La qualité d’un logiciel passe aussi par son ergonomie. En python, de nombreux programmeurs ont déjà
été confrontés à la problématique d’afficher des images, des dessins, de détecter les clics, d’afficher des
menus déroulants etc…
Certains ont écrit des programmes génériques qui permettent de créer des fenêtres interactives, d’y
placer des éléments (appelés widget) de détecter des évènements et d’y associer des actions.
Nous proposons ici d’utiliser la bibliothèque tkinter, mais il en existe d’autres comme PyGame,
wxPython, pyQT etc…
Tkinter n’a pas pour objectif de réaliser des logiciels professionnels commercialisables, mais c’est une
des bibliothèques les plus rapides à maitriser et à mettre en œuvre . Elle est particulièrement adaptée
pour une première expérience dans les GUI (Graphical User Interface).
Exercice 1 : Créer une fenêtre vide
Pour faire un programme qui affiche une fenêtre, le code minimum est affiché ci-dessous. Il faut (après
avoir importé la bibliothèque tkinter) :
1. Créer une fenêtre et lui donner un nom à l’aide de la procédure tk()
2. Lancer la procédure mainloop() sur la fenêtre que vous venez de créer.
Normalement une fenêtre vide grise s’affiche. La procédure mainloop() lance la fenêtre.. Le code est
stoppé à la ligne mainloop() tant que la fenêtre n’est pas détruite
Exercice 2 : Placer des widgets

Comme dans tout logiciel, nous pourrions avoir besoin de placer des boutons, des champs de texte, des
cases à cocher, des listes déroulantes etc. Pour notre Puissance 4, nous nous contenterons de regarder
en détail les widgets suivants :
• Les boutons : Button (pour commander une action)
• Les labels : Label (pour insérer un texte)
• Les canevas : Canvas (pour insérer des dessins)
Quel que soit le widget créé, la démarche est toujours la même, il faut :
1. D’abord le créer
1
2. Le placer dans la fenêtre.
Dans l’exemple ci-dessous nous allons créer un objet de type bouton (Utilisation du constructeur
Button() et le placer automatiquement (utilisation de la procédure pack())
Vous remarquerez que le constructeur Button() contient 3 arguments :

• Le nom de la fenêtre dans lequel l’afficher ;(ici Mafenêtre)
• Le texte qui devra apparaitre dans le bouton ; (ici « Quitter »)
• L’action à réaliser lorsque l’on cliquera dessus ;(ici la fonction destroy())
Il existe une documentation qui liste l’ensemble des arguments possibles pour chaque constructeur de
widget. Vous trouverez cette documentation exhaustive ici : http://tkinter.fdex.eu/
Exercice 3 : Dessiner un cercle

Nous allons à présent essayer de dessiner un pion (un simple cercle). Il existe de nombreuses méthodes
qui permettent de faire du dessin vectoriel (dessiner des droites, des courbes, des cercles des rectangles
etc…) ou même d’insérer des images. Néanmoins, contrairement aux widgets de base, toutes ces
fonctionnalités de dessin ne fonctionnent que sur un widget appelé Canvas. Il va donc falloir créer un
caneva.(Canvas en anglais) Nous proposons dans cet exemple que le caneva ait une taille de 200 pixels
par 200 pixels. Nous plaçons au centre de ce caneva, un cercle de rayon 20. Pour dessiner un cercle on
utilise l’instruction create_oval qui prend quatre arguments qui seront les coordonn.es des coins
supérieur gauche et inférieur droit d’un rectangle fictif, dans lequel l’ellipse viendra alors s’inscrire. Le
dernier argument est la couleur de remplissage de cercle.
Exercice 4 : Détection des évènements souris

La dernière chose à maitriser est la détection des évènements souris. Pour les widgets, c’est assez simple,
il faut simplement définir la fonction et la passer en paramètre de l’option command =’’ (comme en l’a
déjà fait avec les boutons). En revanche pour un clic sur le canevas, le mieux est de récupérer la position
de la zone cliquée. Pour cela, la fonction bind permet d’associer une fonction à un évènement (event)
souris, le code suivant permet de récupérer les coordonnées X et Y du clic réalisé et de dessiner un pion
de couleur jaune à l’endroit cliqué.
2
Partie 2 : Une interface graphique pour le Puissance 4 (2h)
Dans cette deuxième partie, nous programmons l’interface graphique du jeu avec une approche orientée
classe et objet. Il s’agit ici seulement de programmer l’interface graphique utilisateur, toutes les
fonctions du jeu sont déjà programmées dans la classe Jeu de TP5 et nous allons les réutiliser dans ce
TP. L’interface graphique à réaliser pour le jeu de Puissance 4 est la suivante :
Exercice 1 : Dans un fichier python application.py, créer une nouvelle classe Application. Le
constructeur __init__ de cette classe prend en paramètres le nombre de lignes et le nombre de colonnes
du jeu de puissance 4. Le code de ce constructeur doit réaliser les opérations suivantes :
• Initialiser un objet de votre classe Jeu. Il faut le mémoriser dans une variable de classe. Par
exemple : self.jeu = Jeu()
• Initialiser le numéro du joueur qui commence : self.joueur = 1
• Initialiser une fenêtre tkinter avec le titre ‘ Le jeu de Puissance 4 ‘
• Placer dans cette fenêtre un bouton ‘Nouveau Jeu’. Lorsque l’utilisateur clique sur ce bouton,
la fonction nouveau_jeu de cette classe est exécutée (à coder dans l’exercice 2).
• Placer dans cette fenêtre un bouton ‘Quitter’. Lorsque l’utilisateur clique sur ce bouton, la
fenêtre est détruite.
• Créer dans cette fenêtre une zone de dessin (canvas) de taille 400x430 avec un fond ‘blue’
3
• En bas de la zone de dessin à gauche, créer un rectangle (create_rectangle). Dans ce rectangle,
placer le texte ‘Joueur’ avec l’instruction create_texte et un cercle coloré avec la couleur du
premier joueur (rouge par exemple). Penser à utiliser un tableau à 2 éléments pour mémoriser
les couleurs de joueurs : self.color = ["red", "#EDEF3A"]
• Appeler la fonction mainloop pour activer le récepteur d’évènements de la fenêtre.
A la fin de votre fichier Python, tester votre application de cette façon :
Exercice 2 : Dessiner le plateau

Question 1. Dans la classe Application, coder la fonction dessiner_plateau. Cette fonction place sur le
canvas 6*7 (nombre de lignes*nombre de colonnes) cercles blancs de rayon 25 pour désigner les
emplacements des pions joués par les 2 joueurs. Pour dessiner ces cercles, vous utilisez 2 boucles
imbriqués de cette façon (à adapter et à compléter pour votre programme) :
for i in range(6):
for j in range(7):
x1 = # A compléter
y1= # A compléter
x2 = # A compléter
y2 = # A compléter
canevas.create_oval(x1,y1,x2,y2,fill='white')
Question 2. Dans la classe Application, coder maintenant la fonction nouveau_jeu. Cette dernière fait
appel à la fonction dessiner_plateau. Tester votre programme, pour vérifier l’affichage des cercles.
Exercice 3 : Dans la fonction nouveau_jeu, ajouter l’instruction bind pour associer à un clique gauche
de la souris une fonction nommée clic.
Nous allons coder maintenant la fonction clic qui permet de dérouler le jeu de deux joueurs, avec les
étapes suivantes :
- Récupérer le numéro de la colonne dans laquelle l’utilisateur à cliquer. Il s’agit ici de récupérer la
valeur de event.x et la convertir pour obtenir le numéro de la colonne.
- Empiler le pion du joueur courant
- Placer dans le plateau graphique un pion avec la couleur associée au joueur courant (voir Figure ci-
dessus)
- Vérifier les alignements : si un alignement de 4 pions, on affiche sur l’écran le numéro de joueur
gagnant.
- Modifier l’affichage sur l’interface graphique pour indiquer le joueur courant :
A la différence du jeu en mode console, il n’y a pas ici besoin d’une boucle while pour faire jouer les
deux joueurs. C’est la fonction clic qui permet de faire tourner le jeu lorsqu’un utilisateur clique dans
une colonne de l’interface graphique. Vous pouvez aussi afficher dans la console, le plateau du Jeu en
mode texte avec la fonction affiche de la classe Jeu.
Tester maintenant votre application pour faire quelques parties de Puissance 4!

tp6-puissance-4-gui

Transféré par

Droits d'auteur :

Formats disponibles

tp6-puissance-4-gui

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

tp6-puissance-4-gui

Transféré par

Droits d'auteur :

Formats disponibles

TP N°6 : l’interface graphique du jeu

Partie 1 : Premiers pas avec tkinter (1h)

Exercice 2 : Placer des widgets

Vous remarquerez que le constructeur Button() contient 3 arguments :

Exercice 3 : Dessiner un cercle

Exercice 4 : Détection des évènements souris

A la fin de votre fichier Python, tester votre application de cette façon :

Exercice 2 : Dessiner le plateau

Tester maintenant votre application pour faire quelques parties de Puissance 4!

Vous aimerez peut-être aussi