Tutoriel Tkinter : jeu memory

Présentation du jeu memory¶

Si vous n’avez jamais joué au jeu memory ou si vous ne voyez pas de quoi je parle, le plus simple est d’essayer le jeu. Sur Internet, on pourra y jouer à Jeu memory : fruits

Sous Android, on peut y jouer avec Picture Match.

Le code fonctionne pour Python 3.5 et au-delà. Les images seront des logos de langages de programmation. Ci-dessous, on peut voir le jeu :

Au cas où vous ne connaîtriez pas le jeu, en voici une description. Le jeu memory se joue avec un plateau de quelques dizaines de cartes représentant des motifs, par exemple des fruits. Au début du jeu, les cartes sont faces cachées. Le joueur retourne une paire de cartes. Si les deux cartes représentent la même image, elles restent faces visibles. Sinon, le joueur les retourne pour que leurs faces restent cachées. Le joueur retire alors une autre paire et il continue ainsi jusqu’à ce que toutes les cartes aient été découvertes. Le jeu existe bien sûr en version numérique.

Il peut y avoir des variantes :

• les cartes sont montrées pendant quelques secondes avant le début du jeu
• le temps de recherche est plafonné
• certaines images peuvent être présentes 3, 4, etc fois au lieu de juste 2
• etc.

Le jeu numérique¶

Le joueur choisit (ie retourne) successivement deux cartes en cliquant dessus. Si la 2e carte est identique à la première, elles restent définitivement dans cette position, faces visibles.

La première choisie reste visible tant que la 2e n’a pas été découverte.

Si la 2e carte est différente de la 1re, les deux cartes restent visibles environ une demi seconde puis se replacent automatiquement face cachée.

La difficulté du codage du jeu numérique provient essentiellement de l’animation à gérer : il faut arriver à distinguer les deux clics de souris puis à effectuer le retournement de cartes (s’il doit se faire), le tout sans bug !

Toutes les variables et noms de fonctions sont écrits en anglais (sauf dans certains mini-programmes d’illustration).

Création d’une fenêtre et d’un widget¶

Une application graphique de bureau s’exécute dans une fenêtre qui contient des widgets. Un widget est juste un composant graphique comme un menu ou un bouton. Voici un code « Hello Tkinter! » qui crée une fenêtre et un widget sous Tkinter :

fenetre_widget.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

from tkinter import *

WIDTH=600
HEIGHT=400

my_root=Tk()
cnv=Canvas(my_root, width=WIDTH, height=HEIGHT, background='ivory')
cnv.pack()

my_root.mainloop()

ce qui ouvre l”« application » suivante

• Ligne 1 : on importe toutes les fonctionnalités de Tkinter même si on n’a pas besoin de toutes celles-ci. C’est pratique pour de petits programmes. On procède légèrement autrement dans des usages plus avancés.
• Ligne 6 : on créé une fenêtre Tkinter en appelant le constructeur Tk, dite fenêtre « maîtresse » (master).
• Ligne 7 : on crée un « canevas » dans la fenêtre : c’est un widget permettant d’effectuer du graphisme, des animations, etc.
• Ligne 8 : on indique avec pack comment le widget doit être intégré dans le widget-maître (ici la fenêtre my_root).
• Ligne 10 : on lance la « boucle principale » (mainloop) de l’application. C’est typique de la programmation événementielle.

Repérage dans un canevas¶

Soit le code suivant construisant un canevas :

from tkinter import Tk, Canvas

root=Tk()
cnv=Canvas(root, width=200, height=200, bg="ivory")
cnv.pack()
root.mainloop()

Un canevas (défini par le constructeur Canvas) est muni d’un système de repérage (invisible) dans lequel chaque point du canevas a deux coordonnées :

Attention, le système de repérage est orienté différemment du système utilisé en mathématiques :

• l’origine est le coin en haut à gauche
• l’axe des abscisses est, comme en math, l’axe horizontal orienté de gauche à droite
• l’axe des ordonnées est, comme en math, un axe vertical mais il est orienté vers le bas (assez logique vue la configuration, non ?).

Les coordonnées repèrent des pixels. Pour être plus précis, le premier pixel est numéroté 0, le suivant 1, etc. Si un canevas est créé avec l’option width=200 le pixel le plus à droite du canevas est numéroté 199.

Inclusion d’images sur le canevas¶

Le canevas supporte le placement d’images présentes sur une unité de stockage. Seuls les formats

• png (depuis Python 3.4 sous Windows et peut-être Python 3.6 pour Mac Os)
• gif

sont pris en charge. Le format jpeg ne semble pas pris en charge, cf. ce message Tkinter error: Couldn’t recognize data in image file.

Exemple de code :

inclusion_images.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

from tkinter import *
from random import randrange

SIDE=400
root = Tk()
cnv = Canvas(root, width=SIDE, height=SIDE)
cnv.pack()

logo = PhotoImage(file="python.gif")

for i in range(5):
    centre= (randrange(SIDE),randrange(SIDE))
    cnv.create_image(centre, image=logo)

root.mainloop()

et qui affiche

Le code ci-dessus place aléatoirement 5 images sur un canevas.

Avant de pouvoir utiliser une image (ligne 13), il faut la convertir dans un format propre à Tkinter. Pour cela (ligne 9), on doit utiliser la classe PhotoImage en lui précisant l’adresse du fichier image sur le disque. Une fois l’image convertie par appel à PhotoImage, on peut l’incorporer dans un canevas en utilisant la méthode du canevas appelée create_image. Comme les dimensions d’une image sont invariables, il suffit de donner à create_image les coordonnées du point où on souhaite que le centre de l’image se trouve sur le canevas.

Remarquer qu’on a besoin de créer juste une seule instance de PhotoImage même si elle sert à la création de plusieurs images.

L’image ne s’adapte pas automatiquement au canevas où l’image est placée, si l’image est plus large que le canevas, elle ne sera qu’en partie visible dans le canevas.

Noter qu’il existe une syntaxe peut-être moins lisible pour désigner les coordonnées du centre de l’image : au lieu d’écrire cnv.create_image(c, image=logo) après avoir défini la variable c=(x,y), on peut écrire cnv.create_image(x, y, image=logo).

Pour le support du png sous macOS, voir IDLE and tkinter with Tcl/Tk on macOS.

Identifiant d’image¶

Tout image placée sur un canevas Tkinter et créée avec la méthode du canevas create_image, lors de la création, reçoit une id unique. Cette id est un identifiant entier strictement positif. Il permet de garder trace de l’image créée.

Exemple :

id_images.py

from tkinter import *
from random import randrange

SIDE=400
root = Tk()
cnv = Canvas(root, width=SIDE, height=SIDE)
cnv.pack()

logo = PhotoImage(file="python.gif")

for i in range(5):
    x, y= randrange(SIDE),randrange(SIDE)
    id_image=cnv.create_image(x, y, image=logo)
    print(id_image)

root.mainloop()

1
2
3
4
5

qui produit :

Dans ce code, on fait apparaître, à des endroits aléatoires, 5 images sur le canevas. L’appel à cnv.create_image est récupéré dans une variable et qui contient alors l’id de l’image créée. Les ids sont alors affichées. On remarque que les id ne sont pas des entiers aléatoires mais qu’il s’agit d’entiers consécutifs croissants.

Placement des images en grille¶

Dans un memory game, les images sont placées sur une grille. L’utilisation de grilles est très courante dans l’implémentation de jeux.

On veut réaliser le placement suivant (sans le bouton ni le label) :

Ici, chaque image est carrée, de taille PICT_SIZE = 120 pixels. En réalité, on va ignorer cette dimension et chaque image sera placée dans un carré plus grand de taille SIDE = 130. Il y a donc un espacement PAD=10 pixels entre les deux. La grille est formée de NB_LINES=4 lignes et de NB_COLS=5 colonnes. Désormais, on ne raisonne plus que sur les grands carrés de côté SIDE. Chaque image est placée au centre de l’emplacement, on ne calcule donc que les centres des carrés. La figure ci-dessous aide à comprendre la configuration :

Fixons notre attention sur la carte grisée. En regardant la grille comme un tableau 2D avec des indices de lignes et de colonnes commençant à 0, notre carte est d’indices (line, col) = (2,3). Il est clair alors que le coin supérieur gauche de la carte (en bleu sur le dessin) a pour coordonnées \(\mathtt{(3\times SIDE, 2\times SIDE)}\). Plus généralement, l’image en positions line et col, est telle que son coin supérieur gauche a pour coordonnées \(\mathtt{(col\times SIDE, line\times SIDE)}\). Par suite le centre de cette image est de coordonnées :

\(\mathtt{centre=(X0+col\times SIDE, Y0+line\times SIDE)}\).

où \(\mathtt{(X0, Y0)=(SIDE//2, SIDE//2)}\).

Pour le placement de toutes les images de la grille, typiquement, il est effectué avec deux boucles for imbriquées.

Voici le code pour placer uniquement la face cachée de chaque image :

grille_couvertures.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

from tkinter import *

PICT_SIZE=120
PAD=10
SIDE=PICT_SIZE+PAD

NB_LINES=4
NB_COLS=5

WIDTH=SIDE*NB_COLS
HEIGHT=SIDE*NB_LINES
X0=Y0=SIDE//2

root=Tk()
cnv=Canvas(root, width=WIDTH, height=HEIGHT, bg='gray')
cnv.pack()

cover = PhotoImage(file="./images/cover.gif")

# Placement des images
for line in range(NB_LINES):
    for col in range(NB_COLS):
        centre=(X0+col*SIDE, Y0+line*SIDE)
        cnv.create_image(centre, image=cover)

root.mainloop()

• Lignes 24 : création des images. Le centre de l’image située à la ligne line et à la colonne col a pour coordonnées (X0+col*SIDE, Y0+line*SIDE).

La vue et le modèle¶

Le point qui suit est ESSENTIEL même s’il ne prend pas beaucoup de place : il oriente votre façon de coder.

En programmation graphique, il est très important de distinguer la partie visible de l’application et ce qu’elle représente avec ses données et son traitement. Ainsi, nous allons bien séparer :

• les données de visualisation (la vue, ie Tkinter)
• le traitement de ses données (le modèle).

Pour notre jeu, pendant tout le déroulement de la partie, le programme disposera d’un tableau 2D (une liste de listes), nommé board, indexé par ligne et colonne, et représentant l’état de la grille visible par le joueur. Typiquement, board pourra avoir le contenu suivant :

1

[[2, 3, 6, 3, 9], [9, 4, 4, 7, 5], [8, 1, 7, 2, 0], [1, 8, 6, 0, 5]]

On voit bien que chaque numéro figure deux fois dans la grille.

En particulier, figureront dans ce tableau les cartes qui ont déjà été appariées et les cartes qui sont encore faces cachées. C’est aussi board qui fournira, en début de partie, le plateau mélangé. Les cartes seront placées dans le tableau avec une valeur entière, comme dans l’exemple ci-dessus.

Suppression d’items du canevas¶

Il est possible de supprimer n’importe quel objet créé sur le canevas. Pour cela il suffit de connaître l’id de l’objet à supprimer et d’utiliser la méthode delete du canevas. Illustrons en supprimant une image d’une rangée d’images :

suppression_image.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

from tkinter import *
from random import randrange

NB_IMG=8
SIDE=100
WIDTH=SIDE*NB_IMG
X0=Y0=SIDE//2

root = Tk()
logo = PhotoImage(file="python.gif")
cnv = Canvas(root, width=WIDTH, height=SIDE, bg="ivory")
cnv.pack(pady=100)

ids=[]
for k in range(NB_IMG):
    id_image=cnv.create_image(X0+k*SIDE, Y0, image=logo)
    ids.append(id_image)

j=randrange(NB_IMG)
print(j)
mon_id=ids[j]

cnv.delete(mon_id)

root.mainloop()

26

5

On utilise une même image python.gif carrée de taille SIDE=100. Dans la boucle (lignes 15-17) :

• on dessine côte à côte NB_IMG=8 images
• on mémorise l’id de chaque image dans une liste ids

Puis, on choisit au hasard une id d’image (ligne 19 et ligne 20 pour l’affichage de l’indice) et on supprime du canevas l’objet ayant cet id (ligne 23). Comme on le voit sur la copie d’écran, il y a bien un trou dans l’alignement des images à l’indice choisi.

Mélanger la grille¶

La partie qui suit est indépendante de Tkinter. Le plateau contient 20 images qui se regroupent en 10 paires. Dans le tableau 2D board, chaque image sera représentée par un entier entre 0 et 9, ce qui fait 10 entiers, chaque entier apparaissant deux fois.

Il faut donc construire un tableau 2D board d’entiers mélangés. Une fois ce tableau créé, on pourra l’utiliser pour dessiner la grille du jeu.

Voici un code qui génère board :

melanger_board.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

from random import shuffle

NB_LINES=4
NB_COLS=5
NB_PICT=NB_LINES*NB_COLS // 2

L=[v % NB_PICT for v in range(2*NB_PICT)]
shuffle(L)
print(L)

board=[]
k=0
for line in range(NB_LINES):
    row=[]
    for col in range(NB_COLS):
        row.append(L[k])
        k+=1
    board.append(row)

print(board)

21
22

[2, 3, 6, 3, 9, 9, 4, 4, 7, 5, 8, 1, 7, 2, 0, 1, 8, 6, 0, 5]
[[2, 3, 6, 3, 9], [9, 4, 4, 7, 5], [8, 1, 7, 2, 0], [1, 8, 6, 0, 5]]

On commence par générer une liste d’entiers aléatoires (ligne 7). Pour cela, on place, sous forme de nombres, toutes les cartes

0 0 1 1 2 2 ... 9 9

dans une liste provisoire L. Puis, on mélange cette liste avec la fonction shuffle (attention à la façon de le faire, cf. lignes 8 : L est modifiée). On lit le résultat ligne 21.

Il ne reste plus qu’à placer ligne par ligne et colonne par colonne cette liste mélangée L dans le tableau 2D board (cf. lignes 13-18 et affichage ligne 22).

Pour un code moins chargé, il était possible de définir board en une seule ligne de code en utilisant des listes en compréhension imbriquées puis de remplir :

1
2
3
4
5
6

board=[[None for col in range(NB_COLS)] for line in range(NB_LINES)]
k=0
for line in range(NB_LINES):
    for col in range(NB_COLS):
        board[line][col]=L[k]
        k+=1

voire de définir board directement :

1
2

board=[[L[line*NB_COLS+col] for col in range(NB_COLS)]
                            for line in range(NB_LINES)]

Pour un code plus propre, écrivons une fonction, même si elle est un peu factice puisqu’elle ne prend pas de paramètres :

make_board.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

from random import shuffle


NB_LINES=4
NB_COLS=5
NB_PICT=NB_LINES*NB_COLS // 2

def make_board():
    L=[v % NB_PICT for v in range(2*NB_PICT)]
    shuffle(L)
    board=[]
    k=0
    for line in range(NB_LINES):
        row=[]
        for col in range(NB_COLS):
            row.append(L[k])
            k+=1
        board.append(row)
    return board

print(make_board())

22

[[4, 3, 9, 2, 1], [1, 0, 7, 5, 8], [5, 9, 8, 4, 2], [6, 6, 7, 0, 3]]

Dessiner la grille complète¶

On va maintenant placer dans le jeu toutes les images. Pour cacher les figures, le dos de chaque image est placé au-dessus de la figure. Pour rendre visible une carte, on fera disparaître le dos de l’image. Et puis pour cacher l’image, il faudra replacer au-dessus un dos d’image. On comprend donc qu’il faut disposer d’un identifiant pour chaque dos d’image. Il va donc falloir récupérer dans un tableau 2D les ids des différentes images de couverture.

Le code ci-dessous va produire une figure comme celle-ci :

Le plateau ci-dessus contient les 20 figures (invisibles sauf une) recouvertes par l’image de couverture (ce qui fait au total 40 images à placer sur le canevas). Pour que la réalisation soit bien claire, à la fin de la construction des figures cachées, le programme choisit au hasard une ligne et une colonne de la grille et retire l’image de couverture, ce qui explique le logo visible sur la copie d’écran.

Voici le code :

grille_toutes_images.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

from tkinter import *
from random import shuffle, randrange

PICT_SIZE=120
PAD=10
SIDE=PICT_SIZE+PAD

NB_LINES=4
NB_COLS=5
NB_PICT=NB_LINES*NB_COLS//2
WIDTH=SIDE*NB_COLS
HEIGHT=SIDE*NB_LINES
X0=Y0=SIDE//2

LANG=['c', 'cpp', 'go', 'java', 'js', 'ocaml',
      'php', 'python', 'ruby', 'scratch']

def make_board():
    L=[v % NB_PICT for v in range(2*NB_PICT)]
    shuffle(L)
    board=[]
    k=0
    for line in range(NB_LINES):
        row=[]
        for col in range(NB_COLS):
            row.append(L[k])
            k+=1
        board.append(row)
    return board

root=Tk()
cnv=Canvas(root, width=WIDTH, height=HEIGHT, bg='gray')
cnv.pack()

cover = PhotoImage(file="./images/cover.gif")
logos=[PhotoImage(file="./images/%s.gif" %filename) for filename in LANG]
ids_cover=[[None for j in range(NB_COLS)] for i in range(NB_LINES)]

board=make_board()
print(board)

# Placement des images
for line in range(NB_LINES):
    for col in range(NB_COLS):
        center=(X0+col*SIDE, Y0+line*SIDE)
        nro_image=board[line][col]
        mon_image=logos[nro_image]
        cnv.create_image(center, image=mon_image)
        id_cover=cnv.create_image(center, image=cover)
        ids_cover[line][col] = id_cover

line=randrange(NB_LINES)
col=randrange(NB_COLS)
print(line, col)
im_id=ids_cover[line][col]
cnv.delete(im_id)

root.mainloop()

59
60

[[2, 7, 0, 4, 5], [5, 8, 1, 9, 7], [4, 6, 0, 8, 2], [9, 1, 6, 3, 3]]
1 3

Le principal ajout concerne l’incorporation des images des figures. Ces images sont situées dans un répertoire images à la racine du programme. Par exemple, l’image représentant le langage à Java est accessible par l’adresse ./images/java.gif. Toutes les images sont au format gif, de forme carrée et de taille unique (120 pixels). Pour un logo, le nom de fichier est toujours de la forme lang_programmation.gif.

Les indices de ligne et de colonne choisis au hasard, qui sont affichés à la fin du programme et qui représentent les indices du logo visible dans la grille sont dans notre exemple (repris ci-dessous pour une meilleure lisibilité) line=1 et col=3 :

Si on regarde la sortie console (ligne 60 ci-dessus), dans board, à la position (1, 3), on doit trouver une valeur (ici 9) qui est l’indice du langage représenté dans la liste des langages (lignes 15-16), ici le langage Scratch. Et on constate en effet, c’est bien ce logo qui est visible.

Constantes magiques¶

Le code de ce tutoriel s’efforce de ne pas utiliser de « Constantes magiques ». Utiliser une telle variable consisterait à écrire par exemple :

NB_PICT = 10

au lieu de

NB_PICT = NB_LINES * NB_COLS // 2

L’intérêt d’utiliser des variables et non pas des constantes littérales, est

• d’offrir une meilleure lisibilité : au lieu d’être confronté à une constante anonyme et énigmatique, on a un nom explicite ;
• de permettre, de modifier sans effort le programme.

Ainsi, il est immédiat d’avoir un code qui marche pour un plateau 2 x 2 au lieu de 4 x 5, il suffit juste de changer deux constantes dans le code (lignes 8-10) et toutes les autres constantes s’adaptent :

NB_LINES=2
NB_COLS=2
NB_PICT=NB_LINES*NB_COLS//2

ce qui afficherait le plateau suivant :

Si vous devez devez tester votre jeu pour savoir s’il fonctionne jusqu’au bout sans bug, il est plus simple et rapide de le tester sur un plateau de 4 cartes qu’un plateau de 20 !

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

from tkinter import *
from random import shuffle, randrange

PICT_SIZE=120
PAD=10
SIDE=PICT_SIZE+PAD

NB_LINES=4
NB_COLS=5
NB_PICT=NB_LINES*NB_COLS//2
WIDTH=SIDE*NB_COLS
HEIGHT=SIDE*NB_LINES
X0=Y0=SIDE//2

LANG=['c', 'cpp', 'go', 'java', 'js', 'ocaml',
      'php', 'python', 'ruby', 'scratch']

def make_board():
    L=[v % NB_PICT for v in range(2*NB_PICT)]
    shuffle(L)
    board=[]
    k=0
    for line in range(NB_LINES):
        row=[]
        for col in range(NB_COLS):
            row.append(L[k])
            k+=1
        board.append(row)
    return board

def fill(cnv, board, cover, logos, ids_cover):
    # Placement des images
    for line in range(NB_LINES):
        for col in range(NB_COLS):
            center=(X0+col*SIDE, Y0+line*SIDE)
            nro_image=board[line][col]
            mon_image=logos[nro_image]
            cnv.create_image(center, image=mon_image)
            id_cover=cnv.create_image(center, image=cover)
            ids_cover[line][col] = id_cover

def play():
    root=Tk()
    cnv=Canvas(root, width=WIDTH, height=HEIGHT, bg='gray')
    cnv.pack()

    cover = PhotoImage(file="./images/cover.gif")
    logos=[PhotoImage(file="./images/%s.gif" %filename) for filename in LANG]
    ids_cover=[[None for j in range(NB_COLS)] for i in range(NB_LINES)]
    board=make_board()

    print(board)
    fill(cnv, board, cover, logos, ids_cover)

    line=randrange(NB_LINES)
    col=randrange(NB_COLS)
    print(line, col)
    im_id=ids_cover[line][col]
    cnv.delete(im_id)

    root.mainloop()

play()

L’événement du clic de souris¶

La programmation d’interfaces graphiques est de la programmation événementielle : une boucle infinie (la mainloop) attend des événements (c’est comme ça qu’on dit) tel qu’un appui sur une touche du clavier, un clic de souris ; éventuellement, le programme réagit à ces événements.

Pour surveiller un clic de souris sur le canevas, il suffit

• d’écrire une fonction (disons clic) qui sera appelée (automatiquement) chaque fois qu’un clic aura lieu sur le canevas ;
• de lier l’événement clic de souris à l’appel de la fonction \(\mathtt{clic}\).

On dit que la fonction clic est une fonction de rappel (callback function en anglais). La liaison est appelée binding en anglais, cf. le code ci-dessous.

Le programme présenté ci-dessous :

montre la réaction à un événement de clic de souris sur un canevas affichant les coordonnées du clic et dessinant un disque là où on a cliqué. Le code correspondant est :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

from tkinter import *

root = Tk()
cnv = Canvas(root, width=300, height=300, bg="ivory")
cnv.pack()

def clic(event):
    x, y = event.x, event.y
    print(x, y)
    cnv.create_oval(x-3, y-3, x+3, y+3,
                    fill='red', outline='')

cnv.bind("<Button-1>", clic)
root.mainloop()

15
16
17
18
19
20

151 244
121 225
101 155
92 110
86 89
61 63

• Ligne 9 : la fonction de rappel clic; chaque fois qu’on clique sur le canevas, cette fonction est appelée et reçoit en argument, sans que le programmeur ait la main dessus, un objet appelé ici event qui représente (et donne accès) à toutes les propriétés du clic qui a été effectié.

• Ligne 12 : la liaison de l’événement clic gauche de souris, qui se code en Tkinter par "<Button-1>" et de la fonction clic : chaque fois qu’un événement clic de souris est intercepté sur le canevas, la fonction clic est appelée. -

• La fonction clic effectue ici deux actions :

  • elle affiche dans la console les coordonnées sur le canevas du pixel qui a été cliqué. Dans l’exemple (lignes 15-19), on voit que l’utilisateur a cliqué 6 fois sur le canevas. Remarquez que les valeurs lues sont, bien sûr, entre 0 et 300 ;
  • elle dessine quelque chose au point du clic (ici, un petit disque rouge, c’est juste pour que l’image soit compréhensible).

L’événement "<Button>" (sans numéro) s’applique à tout événement relatif à un bouton de souris, le clic gauche comme le clic droit ou l’action sur la molette. Si on veut capturer exactement un clic gauche de souris, il faut utiliser l’événement "<Button-1>".

Identifier une carte après un clic¶

Dans notre jeu, l’utilisateur clique, dans le canevas, sur une carte. Comment le programme sait-il sur quelle carte il a cliqué ? Pour cela, rappelons-nous que

• nous pouvons récupérer les coordonnées d’un clic sur le canevas ;
• nous connaissons la disposition de chaque carte sur le plateau.

Grâce à ces deux informations et un petit calcul, nous pouvons, récupérer les indices de ligne et de colonne dans la grille de la carte cliquée.

Le point essentiel est de voir notre grille d’images comme un tableau 2D :

Supposons que le clic ait eu lieu au point de coordonnées \((x, y)\) du canevas, en rouge ci-dessous :

Comme les cartes sont régulièrement espacées d’une distance SIDE, en supposant que chaque ligne et chaque colonne de cartes soit numérotée à partir de 0, le numéro de

• la colonne col vaut le quotient entier de \(\mathtt{x}\) par \(\mathtt{SIDE}\) : \(\mathtt{col = x // SIDE}\),
• la ligne lig vaut le quotient entier de \(\mathtt{y}\) par \(\mathtt{SIDE}\) : \(\mathtt{lin = y // SIDE}\).

On fera attention à l’ordre :

• ligne → ordonnée
• colonne → abscisse

Faisons un essai de code :

id_clic_image.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

from tkinter import *

PICT_SIZE=120
PAD=10
SIDE=PICT_SIZE+PAD

NB_LINES=4
NB_COLS=5
WIDTH=SIDE*NB_COLS
HEIGHT=SIDE*NB_LINES
X0=Y0=SIDE//2

root=Tk()
cnv=Canvas(root, width=WIDTH, height=HEIGHT, bg='gray')
cnv.pack()

cover = PhotoImage(file="./images/cover.gif")

for line in range(NB_LINES):
    for col in range(NB_COLS):
        cnv.create_image(X0+col*SIDE, Y0+line*SIDE, image=cover)

def clic(event):
    x=event.x
    y=event.y
    line=x//SIDE
    col=y//SIDE
    print(line, col)

cnv.bind("<Button>", clic)
root.mainloop()

32
33
34

2 2
4 3
4 0

Dans l’affichage (lignes 32-34), on voit sur quelles cartes l’utilisateur a cliqué.

Pour être très précis, ce code fonctionne aussi si on clique légèrement en dehors de la carte puisqu’il y a un écart de 10 pixels (cf. lignes 4-5) entre la largeur de la carte et la largeur de son emplacement sur la grille du canevas. Ce genre d’approximation est courant.

Retourner une carte suite à un clic¶

Désormais, il va nous être possible de découvrir les cartes grâce à simple clic. Pour cela, on a besoin, bien sûr, d’un plateau avec toutes ses cartes cachées et de disposer des ids des couvertures d’image. Ensuite, il suffit de demander à la fonction de callback du clic de supprimer avec la méthode delete la couverture. Il est même possible d’écrire un message dans la console où on affiche le langage de programmation dont le logo est découvert (le programme ci-dessous étant exécuté sous IDLE, cf. la copie d’écran ci-dessous) :

Voici le code :

decouvrir_logo_clic.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

from tkinter import *
from random import shuffle, randrange

PICT_SIZE=120
PAD=10
SIDE=PICT_SIZE+PAD

NB_LINES=4
NB_COLS=5
NB_PICT=NB_LINES*NB_COLS//2
WIDTH=SIDE*NB_COLS
HEIGHT=SIDE*NB_LINES
X0=Y0=SIDE//2

LANG=['c', 'cpp', 'go', 'java', 'js', 'ocaml',
      'php', 'python', 'ruby', 'scratch']

def make_board():
    L=[v % NB_PICT for v in range(2*NB_PICT)]
    shuffle(L)
    board=[]
    k=0
    for line in range(NB_LINES):
        row=[]
        for col in range(NB_COLS):
            row.append(L[k])
            k+=1
        board.append(row)
    return board

def fill(cnv, board, cover, logos, ids_cover):
    # Placement des images
    for line in range(NB_LINES):
        for col in range(NB_COLS):
            center=(X0+col*SIDE, Y0+line*SIDE)
            nro_image=board[line][col]
            mon_image=logos[nro_image]
            cnv.create_image(center, image=mon_image)
            id_cover=cnv.create_image(center, image=cover)
            ids_cover[line][col] = id_cover

def clic(event):
    x=event.x
    y=event.y
    col=x//SIDE
    line=y//SIDE
    cnv.delete(ids_cover[line][col])
    i=board[line][col]
    print(LANG[i].upper())



root=Tk()
cnv=Canvas(root, width=WIDTH, height=HEIGHT, bg='gray')
cnv.pack()
cnv.bind("<Button>", clic)

cover = PhotoImage(file="./images/cover.gif")
logos=[PhotoImage(file="./images/%s.gif" %filename) for filename in LANG]
ids_cover=[[None for j in range(NB_COLS)] for i in range(NB_LINES)]

board=make_board()
fill(cnv, board, cover, logos, ids_cover)



root.mainloop()

qui comme l’indiquait la copie d’écran, montre ceci dans la console d’IDLE:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

>>>
GO
SCRATCH
GO
RUBY
RUBY
JAVA
SCRATCH
CPP
CPP
C

• Ligne 56 : le clic gauche est associé à la fonction clic.

• Lignes 42-49 : la fonction clic :

  • lignes 43-46 : calcule la position (line, col) dans la grille de la carte cliquée,
  • ligne 47 : va regarder dans ids_cover quel est l’id de la couverture à cette position,
  • lignes 47 : supprime la couverture,
  • lignes 48 : détermine le représentant entier du logo découvert,
  • lignes 49 : affiche en majuscule dans la console le nom du langage du logo qui est découvert.

Une question qui vous intrigue peut-être : que se passe-t-il lorsqu’on re-clique sur une carte déjà découverte ? Réponse : à ce moment-là, la ligne 47 du code va toujours être exécutée : le canevas va essayer de supprimer un objet mais dont l’id n’existe plus. Il se trouve que le canevas est conçu pour ne pas réagir dans ce cas, ce qui ne cause donc aucun plantage du programme.

Illustrer after en créant des images¶

La méthode after permet de déclencher avec un certain délai de temps une action définie par une fonction.

Soit par exemple le code ci-dessous :

after_images.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

from tkinter import *
from random import randrange

SIDE=400
root = Tk()
cnv = Canvas(root, width=SIDE, height=SIDE)
cnv.pack()

logo = PhotoImage(file="python.gif")

def action(x, y):
    cnv.create_image((x, y), image=logo)

x, y= randrange(SIDE),randrange(SIDE)
cnv.after(1000, action, x, y)

x, y= randrange(SIDE),randrange(SIDE)
cnv.after(2000, action, x, y)

x, y= randrange(SIDE),randrange(SIDE)
cnv.after(3000, action, x, y)

x, y= randrange(SIDE),randrange(SIDE)
cnv.after(4000, action, x, y)

x, y= randrange(SIDE),randrange(SIDE)
cnv.after(5000, action, x, y)

x, y= randrange(SIDE),randrange(SIDE)
cnv.after(6000, action, x, y)

root.mainloop()

On a défini une fonction action qui prend deux paramètres (le nom action n’a rien d’obligatoire).

Voici l’exécution :

Lorsque le programme est lancé, les 6 instructions cnv.after(ms, action, x, y) vont être exécutées les unes après les autres et instantanément. Chacune de ces instructions va déclencher l’exécution de la fonction action mais après le délai en ms indiqué par l’appel cnv.after(ms, action, x, y). Par exemple, une instruction telle que cnv.after(4000, action, 200, 300) va provoquer, 4 secondes (4000 ms) après avoir été activée, l’exécution de l’appel action(200, 300). D’où l’effet d’animation.

La méthode after n’est pas spécifique de Canvas : dans le code ci-dessus, on pourrait remplacer les appels cnv.after par des appels root.after.

Retourner une carte avec la méthode after¶

Le memory game doit être animé puisque lorsque le joueur retourne deux cartes qui sont différentes, les cartes doivent, au bout d’un certain délai, revenir faces cachées.

Pour se familiariser avec la méthode after, on va écrire un code qui, à partir d’un plateau de cartes faces cachées, retourne aléatoirement certaines cartes, à raison d’une chaque seconde (c’est à cause de cette question de délai qu’on utilise after) :

after_decouvre_alea.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

from tkinter import *
from random import shuffle, randrange

PICT_SIZE=120
PAD=10
SIDE=PICT_SIZE+PAD

NB_LINES=4
NB_COLS=5
NB_PICT=NB_LINES*NB_COLS//2
WIDTH=SIDE*NB_COLS
HEIGHT=SIDE*NB_LINES
X0=Y0=SIDE//2

LANG=['c', 'cpp', 'go', 'java', 'js', 'ocaml',
      'php', 'python', 'ruby', 'scratch']

def make_board():
    L=[v % NB_PICT for v in range(2*NB_PICT)]
    shuffle(L)
    board=[]
    k=0
    for line in range(NB_LINES):
        row=[]
        for col in range(NB_COLS):
            row.append(L[k])
            k+=1
        board.append(row)
    return board

def fill(cnv, board, cover, logos, ids_cover):
    # Placement des images
    for line in range(NB_LINES):
        for col in range(NB_COLS):
            center=(X0+col*SIDE, Y0+line*SIDE)
            nro_image=board[line][col]
            mon_image=logos[nro_image]
            cnv.create_image(center, image=mon_image)
            id_cover=cnv.create_image(center, image=cover)
            ids_cover[line][col] = id_cover

def clic(event):
    x=event.x
    y=event.y
    col=x//SIDE
    line=y//SIDE
    cnv.delete(ids_cover[line][col])
    i=board[line][col]
    print(LANG[i].upper())

def swap(ids_cover, cnv):
    line=randrange(NB_LINES)
    col=randrange(NB_COLS)
    im_id=ids_cover[line][col]
    cnv.delete(im_id)

def play():
    root=Tk()
    cnv=Canvas(root, width=WIDTH, height=HEIGHT, bg='gray')
    cnv.pack()

    cover = PhotoImage(file="./images/cover.gif")
    logos=[PhotoImage(file="./images/%s.gif" %filename) for filename in LANG]
    ids_cover=[[None for j in range(NB_COLS)] for i in range(NB_LINES)]

    board=make_board()
    fill(cnv, board, cover, logos, ids_cover)

    cnv.after(1000, swap, ids_cover, cnv)
    cnv.after(2000, swap, ids_cover, cnv)
    cnv.after(3000, swap, ids_cover, cnv)
    cnv.after(4000, swap, ids_cover, cnv)
    cnv.after(5000, swap, ids_cover, cnv)

    root.mainloop()

play()

On a écrit une fonction swap (ligne 51) qui retourne aléatoirement une carte (rappel : retourner c’est effacer la couverture). Quand on exécute le programme, on voit 5 cartes (ou peut-être moins dans certains cas) être automatiquement retournées.

Lorsque le programme est exécuté, les cinq appels (lignes 69-73) à la fonction after sont effectués quasiment simultanément. Mais ces appels vont déclencher des appels de la fonction swap après l’intervalle de temps défini par le premier argument de l’appel de after. Par exemple, quand l’appel cnv.after(4000, swap) a lieu (ligne 72), c’est à dire quasiment immédiatement après le lancement du programme, il faut attendre 4 s (4000 ms) avant que la fonction swap ne soit appelée. Une seconde plus tard, la fonction swap est à nouveau appelée suite à l’appel cnv.after(5000, swap), cf. ligne 73.

Animer le clic pour retourner une carte¶

Le retournement de carte :

s’effectue ainsi :

• un clic provoque le démasquage de la carte
• une seconde plus tard, la carte revient en position cachée.

Le code ci-dessous implémente le retournement :

clic_after.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

from tkinter import *
from random import shuffle

COTE = 120
PAD = 5
SIDE = COTE + PAD

NB_LIG = 4
NB_COL = 5

LARG = SIDE * NB_COL
HAUT = SIDE * NB_LIG
X0 = Y0 = SIDE // 2

NB_CARTES=NB_LIG*NB_COL//2

LANG=['c', 'cpp', 'go', 'java', 'js', 'ocaml',
      'php', 'python', 'ruby', 'scratch']

def melanger_grille():
    cartes=list(range(NB_CARTES))*2
    shuffle(cartes)

    P=[]
    k=0
    for lig in range(NB_LIG):
        L=[]
        for col in range(NB_COL):
            L.append(cartes[k])
            k+=1
        P.append(L)
    return P


fen = Tk()
cnv = Canvas(fen, width=LARG, height=HAUT, bg='gray')
cnv.pack()

plateau=melanger_grille()

# Liste logos
logos=[]

for i in range(NB_CARTES):
    lang=LANG[i]
    nom="./images/"+lang+".gif"
    logo=PhotoImage(file=nom)
    logos.append(logo)


ids_cover=[]
cover=PhotoImage(file="./images/cover.gif")

# Placement des images
for lig in range(NB_LIG):
    L=[]
    for col in range(NB_COL):
        centre = (X0 + col * SIDE, Y0 + lig * SIDE)
        i=plateau[lig][col]
        logo=logos[i]
        cnv.create_image(centre, image=logo)
        id_cover=cnv.create_image(centre, image=cover)
        L.append(id_cover)
    ids_cover.append(L)

def clic(event):
    X=event.x
    Y= event.y
    col=X//SIDE
    lig=Y//SIDE
    id_cover=ids_cover[lig][col]
    cnv.delete(id_cover)
    cnv.after(1000, recouvrir, (lig, col))

def recouvrir(pos):
    lig, col=pos
    c = (X0 + col * SIDE, Y0 + lig * SIDE)
    id_cover=cnv.create_image(c, image=cover)
    ids_cover[lig][col]=id_cover

cnv.bind("<Button>", clic)

fen.mainloop()

• Lignes 71-72 : quand l’utilisateur clique sur une carte cachée, la couverture est retirée, ce qui démasque la carte
• Ligne 73 : la fonction recouvrir (lignes 75-79) est appelée une seconde plus tard pour cacher la carte. La fonction recouvrir est appelée avec la position ligne, colonne concernée.
• Ligne 76-79 : la fonction recouvrir reçoit les indices de ligne et colonne où elle doit recouvrir la carte visible. Une couverture est créée (ligne 78) et son id est enregistrée dans la liste des id, afin de pouvoir être à nouveau retirée si l’utilisateur clique à nouveau sur la carte.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

from tkinter import *
from random import shuffle

COTE = 120
PAD = 5
SIDE = COTE + PAD

NB_LIG = 4
NB_COL = 5

LARG = SIDE * NB_COL
HAUT = SIDE * NB_LIG
X0 = Y0 = SIDE // 2

NB_CARTES=NB_LIG*NB_COL//2

LANG=['c', 'cpp', 'go', 'java', 'js', 'ocaml',
      'php', 'python', 'ruby', 'scratch']

def melanger_grille():
    cartes=list(range(NB_CARTES))*2
    shuffle(cartes)

    P=[]
    k=0
    for lig in range(NB_LIG):
        L=[]
        for col in range(NB_COL):
            L.append(cartes[k])
            k+=1
        P.append(L)
    return P


fen = Tk()
cnv = Canvas(fen, width=LARG, height=HAUT, bg='gray')
cnv.pack()

plateau=melanger_grille()

# Liste logos
logos=[]

for i in range(NB_CARTES):
    lang=LANG[i]
    nom="./images/"+lang+".gif"
    logo=PhotoImage(file=nom)
    logos.append(logo)


ids_cover=[]
cover=PhotoImage(file="./images/cover.gif")

# Placement des images
for lig in range(NB_LIG):
    L=[]
    for col in range(NB_COL):
        centre = (X0 + col * SIDE, Y0 + lig * SIDE)
        i=plateau[lig][col]
        logo=logos[i]
        cnv.create_image(centre, image=logo)
        id_cover=cnv.create_image(centre, image=cover)
        L.append(id_cover)
    ids_cover.append(L)

def clic(event):
    X=event.x
    Y= event.y
    col=X//SIDE
    lig=Y//SIDE
    id_cover=ids_cover[lig][col]
    if id_cover is not None:
        cnv.delete(id_cover)
        ids_cover[lig][col]=None
        cnv.after(2000, recouvrir, (lig, col))

def recouvrir(pos):
    lig, col=pos
    c = (X0 + col * SIDE, Y0 + lig * SIDE)
    id_cover=cnv.create_image(c, image=cover)
    ids_cover[lig][col]=id_cover

cnv.bind("<Button>", clic)



fen.mainloop()

Codage d’un plateau jouable¶

Pour obtenir un plateau jouable, il reste à coder la gestion des paires cliquées :

ce qui est la partie la moins abordable du programme à coder. Pour cela, on va :

• compléter la fonction clic ;
• créer une fonction handle_move qui va gérer la paire cliquée ;
• créer une fonction hide qui va se charger de l’animation du recouvrement des cartes lorsqu’elles sont différentes.

On va partir d’un code écrit avec quelques fonctions et qui prépare le plateau avec les cartes couvertes et qui est capable de distinguer la ligne et la colonne où l’utilisateur clique :

final0.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

from tkinter import *
from random import shuffle

PICT_SIZE=120
PAD=10
SIDE=PICT_SIZE+PAD

NB_LINES=4
NB_COLS=5
WIDTH=SIDE*NB_COLS
HEIGHT=SIDE*NB_LINES
X0=Y0=SIDE//2
NB_PICT=NB_LINES*NB_COLS//2
LANG=['c', 'cpp', 'go', 'java', 'js', 'ocaml',
      'php', 'python', 'ruby', 'scratch']

def make_board():
    L=[v % NB_PICT for v in range(2*NB_PICT)]
    shuffle(L)
    board=[]
    k=0
    for line in range(NB_LINES):
        row=[]
        for col in range(NB_COLS):
            row.append(L[k])
            k+=1
        board.append(row)
    return board

def fill(cnv, images, board, cover, ids_cover):
    for line in range(NB_LINES):
        for col in range(NB_COLS):
            center=(X0+col*SIDE, Y0+line*SIDE)
            k=board[line][col]
            cnv.create_image(center, image=images[k])
            ids_cover[line][col]=cnv.create_image(center, image=cover)

def lin_col(x, y):
    return (y//SIDE, x//SIDE)

def clic(event):
    lin, col = lin_col(event.x, event.y)
    print(lin, col)

root=Tk()
cnv=Canvas(root, width=WIDTH, height=HEIGHT, bg='gray42')
cnv.pack()
cnv.bind("<Button>", clic)

cover = PhotoImage(file="./images/cover.gif")
images=[PhotoImage(file="./images/%s.gif" %filename) for filename in LANG]
ids_cover=[[None for j in range(NB_COLS)] for i in range(NB_LINES)]

board=make_board()
fill(cnv, images, board, cover, ids_cover)
root.mainloop()

1
2
3
4
5
6

def clic(event):
    if move[1] is not None:
        return
    col, line=event.x//SIDE, event.y//SIDE
    if board[line][col]!=-1:
        handle_move(line, col)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

def handle_move(line, col):
    item=ids_cover[line][col]
    cnv.delete(item)
    if move[0] is None :
        move[0]=(line, col)
    else:
        if move[0]==(line, col):
            return
        move[1]=(line, col)
        i, j=move[0]
        if board[i][j]==board[line][col]!=-1:
            board[i][j]=board[line][col]=-1
            move[0]=move[1]=None
        else:
            cnv.after(400, hide, i, j, line, col)

1
2
3
4

def hide(i, j, line,col):
    ids_cover[i][j]=cnv.create_image(X0+j*SIDE, Y0+i*SIDE, image=cover)
    ids_cover[line][col]=cnv.create_image(X0+col*SIDE, Y0+line*SIDE, image=cover)
    move[0]=move[1]=None

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

from tkinter import *
from random import shuffle

PICT_SIZE=120
PAD=10
SIDE=PICT_SIZE+PAD

NB_LINES=4
NB_COLS=5
WIDTH=SIDE*NB_COLS
HEIGHT=SIDE*NB_LINES
X0=Y0=SIDE//2
NB_PICT=NB_LINES*NB_COLS//2
LANG=['c', 'cpp', 'go', 'java', 'js', 'ocaml',
      'php', 'python', 'ruby', 'scratch']

def make_board():
    L=[v % NB_PICT for v in range(2*NB_PICT)]
    shuffle(L)
    board=[]
    k=0
    for line in range(NB_LINES):
        row=[]
        for col in range(NB_COLS):
            row.append(L[k])
            k+=1
        board.append(row)
    return board

def fill(cnv, images, board, cover, ids_cover):
    for line in range(NB_LINES):
        for col in range(NB_COLS):
            center=(X0+col*SIDE, Y0+line*SIDE)
            k=board[line][col]
            cnv.create_image(center, image=images[k])
            ids_cover[line][col]=cnv.create_image(center, image=cover)

def lin_col(x, y):
    return (y//SIDE, x//SIDE)

def hide(i, j, line,col):
    ids_cover[i][j]=cnv.create_image(X0+j*SIDE, Y0+i*SIDE, image=cover)
    ids_cover[line][col]=cnv.create_image(X0+col*SIDE, Y0+line*SIDE, image=cover)
    move[0]=move[1]=None

def handle_move(line, col):
    item=ids_cover[line][col]
    cnv.delete(item)
    if move[0] is None :
        move[0]=(line, col)
    else:
        if move[0]==(line, col):
            return
        move[1]=(line, col)
        i, j=move[0]
        if board[i][j]==board[line][col]!=-1:
            board[i][j]=board[line][col]=-1
            move[0]=move[1]=None
        else:
            cnv.after(400, hide, i, j, line, col)

def clic(event):
    if move[1] is not None:
        return
    col, line=event.x//SIDE, event.y//SIDE
    if board[line][col]!=-1:
        handle_move(line, col)

root=Tk()
cnv=Canvas(root, width=WIDTH, height=HEIGHT, bg='gray42')
cnv.pack()
cnv.bind("<Button>", clic)

cover = PhotoImage(file="./images/cover.gif")
images=[PhotoImage(file="./images/%s.gif" %filename) for filename in LANG]
ids_cover=[[None for j in range(NB_COLS)] for i in range(NB_LINES)]

board=make_board()
fill(cnv, images, board, cover, ids_cover)

move=[None, None]
root.mainloop()

Factorisation complète en fonctions¶

La dernière partie du code précédent n’est pas enveloppée dans une fonction (lignes 69-82). Faisons une tentative de placer cette portion de code dans une fonction play :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

# Code des autres fonctions omis

def play():
    root=Tk()
    cnv=Canvas(root, width=WIDTH, height=HEIGHT, bg='gray42')
    cnv.pack()
    cnv.bind("<Button-1>", clic)

    logo = PhotoImage(file="./images/cover.gif")
    images=[PhotoImage(file="./images/%s.gif" %filename) for filename in LANG]
    items_back=[[None for j in range(NB_COLS)] for i in range(NB_LINES)]

    board=make_board()
    fill(cnv, images, board, logo, items_back)

    root.mainloop()

play()

Le code ne fonctionnera pas : en effet les fonctions clic, handle_move et cover dépendent d’objets (comme board, ligne 13) qui désormais sont définis dans la fonction play et sont devenus inaccessibles. Par ailleurs, on ne peut pas envisager de rendre accessibles ces objets par retour de la fonction play : cette dernière ne peut rien renvoyer puisqu’elle contient la mainloop du jeu (ligne 16). Enfin, on ne peut pas transmettre ces objets à clic car, il n’y a aucun moyen de lui transmettre des arguments, elle n’accepte que event comme paramètre (ce comportement est imposé par Tkinter).

Une première solution est de déclarer dans la fonction play, comme variables global, toutes les variables qui manquent aux autres fonctions (cf. ligne 67 dans le code ci-dessous). Il n’est pas nécessaire de les déclarer à l’extérieur de la fonction play. Ce qui donne le code suivant :

final2.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

from tkinter import *
from random import shuffle

PICT_SIZE=120
PAD=10
SIDE=PICT_SIZE+PAD

NB_LINES=4
NB_COLS=5
WIDTH=SIDE*NB_COLS
HEIGHT=SIDE*NB_LINES
X0=Y0=SIDE//2
NB_PICT=NB_LINES*NB_COLS//2
LANG=['c', 'cpp', 'go', 'java', 'js', 'ocaml',
      'php', 'python', 'ruby', 'scratch']

def make_board():
    L=[v % NB_PICT for v in range(2*NB_PICT)]
    shuffle(L)
    board=[]
    k=0
    for line in range(NB_LINES):
        row=[]
        for col in range(NB_COLS):
            row.append(L[k])
            k+=1
        board.append(row)
    return board

def fill(cnv, images, board, cover, ids_cover):
    for line in range(NB_LINES):
        for col in range(NB_COLS):
            center=(X0+col*SIDE, Y0+line*SIDE)
            k=board[line][col]
            cnv.create_image(center, image=images[k])
            ids_cover[line][col]=cnv.create_image(center, image=cover)

def hide(i, j, line,col):
    ids_cover[i][j]=cnv.create_image(X0+j*SIDE, Y0+i*SIDE, image=cover)
    ids_cover[line][col]=cnv.create_image(X0+col*SIDE, Y0+line*SIDE, image=cover)
    move[0]=move[1]=None

def handle_move(line, col):
    item=ids_cover[line][col]
    cnv.delete(item)
    if move[0] is None :
        move[0]=(line, col)
    else:
        if move[0]==(line, col):
            return
        move[1]=(line, col)
        i, j=move[0]
        if board[i][j]==board[line][col]!=-1:
            board[i][j]=board[line][col]=-1
            move[0]=move[1]=None
        else:
            cnv.after(400, hide, i, j, line, col)

def clic(event):
    if move[1] is not None:
        return
    col, line=event.x//SIDE, event.y//SIDE
    if board[line][col]!=-1:
        handle_move(line, col)

def play():
    global cnv, board, ids_cover, cover, move
    root=Tk()
    cnv=Canvas(root, width=WIDTH, height=HEIGHT, bg='gray42')
    cnv.pack()
    cnv.bind("<Button>", clic)

    cover = PhotoImage(file="./images/cover.gif")
    images=[PhotoImage(file="./images/%s.gif" %filename) for filename in LANG]
    ids_cover=[[None for j in range(NB_COLS)] for i in range(NB_LINES)]

    board=make_board()
    fill(cnv, images, board, cover, ids_cover)

    move=[None, None]
    root.mainloop()

play()

La 2e solution consiste à définir les fonctions qui ont besoin des variables qu’on a placées en global dans le dernier code, dans le corps même de la fonction play (lignes 39-66 dans le code ci-dessous). Il en effet possible en Python de définir une fonction g dans une fonction f et la fonction g lors de son exécution, peut lire des données dans le corps de la fonction f. D’où le code suivant :

final3.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

from tkinter import *
from random import shuffle

PICT_SIZE=120
PAD=10
SIDE=PICT_SIZE+PAD

NB_LINES=4
NB_COLS=5
WIDTH=SIDE*NB_COLS
HEIGHT=SIDE*NB_LINES
X0=Y0=SIDE//2
NB_PICT=NB_LINES*NB_COLS//2
LANG=['c', 'cpp', 'go', 'java', 'js', 'ocaml',
      'php', 'python', 'ruby', 'scratch']

def make_board():
    L=[v % NB_PICT for v in range(2*NB_PICT)]
    shuffle(L)
    board=[]
    k=0
    for line in range(NB_LINES):
        row=[]
        for col in range(NB_COLS):
            row.append(L[k])
            k+=1
        board.append(row)
    return board

def fill(cnv, images, board, cover, ids_cover):
    for line in range(NB_LINES):
        for col in range(NB_COLS):
            center=(X0+col*SIDE, Y0+line*SIDE)
            k=board[line][col]
            cnv.create_image(center, image=images[k])
            ids_cover[line][col]=cnv.create_image(center, image=cover)

def play():
    def hide(i, j, line,col):
        ids_cover[i][j]=cnv.create_image(X0+j*SIDE, Y0+i*SIDE, image=cover)
        ids_cover[line][col]=cnv.create_image(X0+col*SIDE, Y0+line*SIDE, image=cover)
        move[0]=move[1]=None

    def handle_move(line, col):
        item=ids_cover[line][col]
        cnv.delete(item)
        if move[0] is None :
            move[0]=(line, col)
        else:
            if move[0]==(line, col):
                return
            move[1]=(line, col)
            i, j=move[0]
            if board[i][j]==board[line][col]!=-1:
                board[i][j]=board[line][col]=-1
                move[0]=move[1]=None
            else:
                cnv.after(400, hide, i, j, line, col)

    def clic(event):
        if move[1] is not None:
            return
        col, line=event.x//SIDE, event.y//SIDE
        if board[line][col]!=-1:
            handle_move(line, col)

    root=Tk()
    cnv=Canvas(root, width=WIDTH, height=HEIGHT, bg='gray42')
    cnv.pack()
    cnv.bind("<Button>", clic)

    cover = PhotoImage(file="./images/cover.gif")
    images=[PhotoImage(file="./images/%s.gif" %filename) for filename in LANG]
    ids_cover=[[None for j in range(NB_COLS)] for i in range(NB_LINES)]

    board=make_board()
    fill(cnv, images, board, cover, ids_cover)

    move=[None, None]
    root.mainloop()

play()

Un bouton pour montrer une image¶

Un bouton, de même que le canevas est un widget. Le code ci-dessous place un bouton à côté d’un canevas :

bouton_image.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

from tkinter import *

SIDE=400
root = Tk()
cnv = Canvas(root, width=SIDE, height=SIDE, bg='ivory')
cnv.pack()

btn=Button(root, text="Nouveau")
btn.pack()

root.mainloop()

• Ligne 8 : un bouton est construit avec le constructeur Button (c’est une classe).
• Ligne 9 : comme pour tout widget, il faut l’inclure dans son environnement avec une méthode particulière, ici la méthode pack.
• Ligne 8 : le texte passé dans l’option text est affiché sur le bouton.
• Si on clique sur le bouton, rien ne se passe de visible. Pour lier une action à un bouton, il faudrait lui passer une option command.

Donnons une possibilité d’action au bouton : chaque fois qu’on clique le bouton, un logo 80x80 est dessiné sur le canevas :

Voici le code :

bouton_image1.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

from tkinter import *
from random import randrange

SIDE=400
root = Tk()
cnv = Canvas(root, width=SIDE, height=SIDE, bg='ivory')
cnv.pack()

logo = PhotoImage(file="python80.png")

def show():
    center= (randrange(SIDE),randrange(SIDE))
    cnv.create_image(center, image=logo)

btn=Button(root, text="Nouveau", command=show)
btn.pack()

root.mainloop()

• Ligne 15 : une option command a été donnée au constructeur Button : command référence une fonction sans paramètre, ici la fonction show, qui est exécutée à chaque pression sur le bouton.
• Lignes 11-13 : la fonction show ne peut prendre aucun paramètre ; elle dessine un logo Python aléatoire sur le canevas.

Un bouton pour rejouer¶

Revenons au memory game. On va ajouter un bouton pour réinitialiser le jeu (soit en cours de partie, soit en fin de partie).

On va repartir d’un code précédent :

final1.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

from tkinter import *
from random import shuffle

PICT_SIZE=120
PAD=10
SIDE=PICT_SIZE+PAD

NB_LINES=4
NB_COLS=5
WIDTH=SIDE*NB_COLS
HEIGHT=SIDE*NB_LINES
X0=Y0=SIDE//2
NB_PICT=NB_LINES*NB_COLS//2
LANG=['c', 'cpp', 'go', 'java', 'js', 'ocaml',
      'php', 'python', 'ruby', 'scratch']

def make_board():
    L=[v % NB_PICT for v in range(2*NB_PICT)]
    shuffle(L)
    board=[]
    k=0
    for line in range(NB_LINES):
        row=[]
        for col in range(NB_COLS):
            row.append(L[k])
            k+=1
        board.append(row)
    return board

def fill(cnv, images, board, cover, ids_cover):
    for line in range(NB_LINES):
        for col in range(NB_COLS):
            center=(X0+col*SIDE, Y0+line*SIDE)
            k=board[line][col]
            cnv.create_image(center, image=images[k])
            ids_cover[line][col]=cnv.create_image(center, image=cover)

def lin_col(x, y):
    return (y//SIDE, x//SIDE)

def hide(i, j, line,col):
    ids_cover[i][j]=cnv.create_image(X0+j*SIDE, Y0+i*SIDE, image=cover)
    ids_cover[line][col]=cnv.create_image(X0+col*SIDE, Y0+line*SIDE, image=cover)
    move[0]=move[1]=None

def handle_move(line, col):
    item=ids_cover[line][col]
    cnv.delete(item)
    if move[0] is None :
        move[0]=(line, col)
    else:
        if move[0]==(line, col):
            return
        move[1]=(line, col)
        i, j=move[0]
        if board[i][j]==board[line][col]!=-1:
            board[i][j]=board[line][col]=-1
            move[0]=move[1]=None
        else:
            cnv.after(400, hide, i, j, line, col)

def clic(event):
    if move[1] is not None:
        return
    col, line=event.x//SIDE, event.y//SIDE
    if board[line][col]!=-1:
        handle_move(line, col)

root=Tk()
cnv=Canvas(root, width=WIDTH, height=HEIGHT, bg='gray42')
cnv.pack()
cnv.bind("<Button>", clic)

cover = PhotoImage(file="./images/cover.gif")
images=[PhotoImage(file="./images/%s.gif" %filename) for filename in LANG]
ids_cover=[[None for j in range(NB_COLS)] for i in range(NB_LINES)]

board=make_board()
fill(cnv, images, board, cover, ids_cover)

move=[None, None]
root.mainloop()