Cliquer sur une toile : créer des boutons
Une toile ne sert pas qu'à dessiner : l'utilisateur peut aussi cliquer dessus. C'est la porte d'entrée vers les interfaces et les jeux à la souris.
Attendre un clic
cliquer met le programme en attente jusqu'à ce que l'utilisateur clique sur la toile. Les coordonnées du clic sont rangées dans deux variables de type nombre :
t est une toile
dimension(t, 300, 200)
remplir(t, #E8F4FD)
label(t, 70, 105, 'Clique où tu veux !', #0F1419, 16)
affiche t
x est un nombre
y est un nombre
cliquer t dans x, y
affiche 'Tu as cliqué en x = ' + x + ' et y = ' + y
La toile doit avoir été affichée avec affiche avant le cliquer. Et les deux variables doivent être déclarées comme nombre.
Un clic dans une zone
Pour faire un bouton, il faut savoir si le clic est tombé dedans. La fonction clique le dit : on lui donne le point cliqué, puis le coin haut-gauche, la largeur et la hauteur de la zone.
t est une toile
dimension(t, 300, 200)
remplir(t, #0D1117)
rectangle(t, 100, 80, 100, 45, #1D9BF0)
label(t, 126, 108, 'Jouer', #FFFFFF, 16)
affiche t
x est un nombre
y est un nombre
cliquer t dans x, y
si clique(x, y, 100, 80, 100, 45) alors
affiche 'Tu as cliqué sur le bouton !'
sinon
affiche 'Raté, à côté du bouton.'
fin si
Le secret d'un bon bouton : utiliser les mêmes valeurs pour dessiner le rectangle et pour tester la zone (100, 80, 100, 45).
Question : Quelle est la différence entre cliquer et clique ? — cliquer attend un clic ; clique teste si un point est dans une zone. cliquer est une instruction qui attend ; clique(...) est une fonction qui répond vrai ou faux.
Plusieurs boutons et une boucle
Une vraie interface réagit à plusieurs clics. On répète donc : dessiner, attendre un clic, réagir. Voici un compteur avec trois boutons :
t est une toile
dimension(t, 320, 200)
compteur est un nombre vaut 0
x est un nombre
y est un nombre
fini est un booléen vaut faux
tant que non fini
// dessiner l'écran
effacer(t)
remplir(t, #F5F7FA)
label(t, 130, 70, 'Total : ' + compteur, #0F1419, 20)
rectangle_arrondi(t, 30, 110, 70, 45, 8, #F4212E)
label(t, 58, 139, '-1', #FFFFFF, 16)
rectangle_arrondi(t, 125, 110, 70, 45, 8, #00BA7C)
label(t, 151, 139, '+1', #FFFFFF, 16)
rectangle_arrondi(t, 220, 110, 70, 45, 8, #536471)
label(t, 237, 139, 'Fin', #FFFFFF, 16)
affiche t
// attendre un clic, puis réagir
cliquer t dans x, y
si clique(x, y, 30, 110, 70, 45) alors
compteur soustrait 1
sinon si clique(x, y, 125, 110, 70, 45) alors
compteur ajoute 1
sinon si clique(x, y, 220, 110, 70, 45) alors
fini vaut vrai
fin si
fin tant que
affiche 'Total final : ' + compteur
À chaque tour, l'écran est redessiné avec la nouvelle valeur du compteur. Un clic en dehors des boutons ne fait rien : la boucle recommence simplement.
Pour un bouton rond, clique(x, y, centreX, centreY, rayon) teste une zone circulaire : cinq arguments au lieu de six.
En résumé
cliquer toile dans x, y attend un clic et donne ses coordonnées.clique(x, y, coinX, coinY, largeur, hauteur) teste si le clic est dans un rectangle.- Un bouton = un rectangle dessiné + un test
clique avec les mêmes valeurs. - Une interface : une boucle qui dessine, attend un clic et réagit.
