deplacer une balle sur un canvas en utilisant les flèches

**Lililae** · 17/05/2012, 19h26

Bonjour à tous,

voilà, ça fait très peu de temps qu'on a commencé le langage python dans ma classe d'option informatique et je dois avoué que je suis larguée. Je suis sensée rendre un projet vendredi prochain, mais j'ai beaucoup de peine c'est pourquoi je sollicite votre aide.
Le prof nous a donné le cours de Swinnen et on est sensé choisir l'un des exemples ou exercices pour le programme à réaliser.
J'ai choisi l'exemple 8.7 que j'ai modifié un peu. Mon but était que la balle avance toute seule (par exemple vers la droite) et qu'au moment où l'on appuit sur les touches de changement de direction elle part dans cette nouvelle direction.
Avec mon code actuel, la balle fait un carré bizarre et lorsque l'on appuie sur les boutons, elle se déplace de 50 (comme je l'ai paramétré) mais elle continue son chemin habituel. C'est donc pas du tout ce que je voulais.
Je suis débutante et j'ai beaucoup de mal, donc je me permets de vous demander de l'aide. Est-ce que quelqu'un aurait une solution à m'apporter ? (Si possible simple et en rapport avec le cours)

Voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
from tkinter import *
from random import randrange
 
# procédure générale de déplacement :
def move():
    "déplacement de la balle"
    global x1, y1, dx, dy, flag
    x1, y1 = x1 +dx, y1 + dy
    if x1 >210:
        x1, dx, dy = 210,0,15
    if y1 >210:
        y1, dx, dy = 210,-15,0
    if x1 <10:
        x1, dx, dy = 10,0,-15
    if y1 <10:
        y1, dx, dy = 10,15,0
 
    can1.coords(oval1, x1,y1, x1+30,y1+30)
    if flag >0:
        fen1.after(100,move)     # boucler, après 50 millisecondes
 
def start_it():
    "démarrage de l'animation"
    global flag
    if flag ==0:
        flag =1
        move()
 
def avance(gb, hb):
    global x1, y1
    x1, y1 = x1 +gb, y1 +hb
    can1.coords(oval1, x1,y1, x1+30,y1+30)
 
# gestionnaires d'évènements:
def dep1_gauche():
    avance(-50, 0)
 
def dep1_droite():
    avance(50, 0)
 
def dep1_haut():
    avance(0, -50)
 
def dep1_bas():
    avance(0, 50)
 
# Programme principal
 
# les variables suivantes seront utilisées de manière globale:
x1, y1 = 10, 10   #coordonnées initiales
dx, dy = 15, 0
flag =0   #commutateur
 
# Création du widget principal ("maître"):
fen1 = Tk()
fen1.title("Super Ball")
 
# création des widgets "esclaves":
can1 = Canvas (fen1, bg='blue', height=300, width=300)
oval1= can1.create_oval(x1,y1,x1+30,y1+30,width=2,fill='yellow')
can1.pack(side=LEFT)
Button(fen1, text='Démarrer', command=start_it).pack(side=BOTTOM)
Button(fen1, text='Quitter', command=fen1.destroy).pack(side=BOTTOM)
Button(fen1, text='Gauche',command=dep1_gauche).pack()
Button(fen1, text='Droite', command=dep1_droite).pack()
Button(fen1, text='Haut', command=dep1_haut).pack()
Button(fen1, text='Bas', command=dep1_bas).pack()
 
# démarrage du réceptionnaire d'évènements (boucle principale):
fen1.mainloop()

**VinsS** · 18/05/2012, 04h14

Salut,

En fait il faut que tu identifies les contacts de la balle avec les coins

Coin supérieur droit après déplacement horizontal;
Coin supérieur gauche après déplacement horizontal;
Coin supérieur droit après déplacement vertical;
Coin supérieur gauche après déplacement vertical;
Coin inférieur droit après déplacement horizontal;
Coin inférieur droit après déplacement vertical;
etc ...

Tu peux donc te contenter d'une valeur de déplacement (15 dans ton exemple) et de deux sens de déplacement:

sx > déplacement x: -1 = gauche, 0 = aucun, 1 = droite;
sy > déplacement y: -1 = haut, 0 = aucun, 1 = bas.

Il te suffit de jouer avec les valeurs de sx et sy en fonction de l'arrivée de la balle près des bords ou en fonction des évènements boutons.

Exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
88
89
90
91
92
93
94
 
#!/usr/bin/python
# -*- coding: utf8 -*-
 
from Tkinter import *
from random import randrange
 
# procédure générale de déplacement :
def move():
    """déplacement de la balle"""
    global x1, y1, dep, sx, sy, flag
    can1.coords(oval1, x1, y1, x1+30, y1+30)
 
    x1 += (dep * sx)
    if x1 > 260:
        # bord droit
        x1, sx = 260, 0
        if sy == 0:
            # deplacement horizontal
            sy = 1 if y1 < 260 else -1
 
    elif x1 < 10:
        # bord gauche
        x1, sx = 10, 0
        if sy == 0:
            # deplacement horizontal
            sy = -1 if y1 >= 260 else 1
 
    y1 += (dep * sy)
    if y1 > 260:
        # bord inferieur
        y1, sy = 260, 0
        if sx == 0:
            # deplacement vertical
            sx = 1 if x1 < 260 else -1
 
    elif y1 < 10:
        # bord superieur
        y1, sy = 10, 0
        if sx == 0:
            # deplacement vertical
            sx = -1 if x1 >= 260 else 1
 
    if flag > 0:
        fen1.after(20, move)     # boucler, après 20 millisecondes
 
def start_it():
    "démarrage de l'animation"
    global flag
    flag = not flag
    move()
 
# gestionnaires d'évènements:
def dep1_gauche():
    global sx
    sx = -1
 
def dep1_droite():
    global sx
    sx = 1
 
def dep1_haut():
    global sy
    sy = -1
 
def dep1_bas():
    global sy
    sy = 1
 
# Programme principal
 
# les variables suivantes seront utilisées de manière globale:
dep = 5   # valeur de deplacement
x1, y1 = 10, 10 #coordonnées initiales
sx, sy = 1, 0
flag =0   #commutateur
 
# Création du widget principal ("maître"):
fen1 = Tk()
fen1.title("Super Ball")
 
# création des widgets "esclaves":
can1 = Canvas (fen1, bg='blue', height=300, width=300)
oval1= can1.create_oval(10, 10, 40, 40, width=2, fill='yellow')
can1.pack(side=LEFT)
Button(fen1, text='Démarrer', command=start_it).pack(side=BOTTOM)
Button(fen1, text='Quitter', command=fen1.destroy).pack(side=BOTTOM)
Button(fen1, text='Gauche',command=dep1_gauche).pack()
Button(fen1, text='Droite', command=dep1_droite).pack()
Button(fen1, text='Haut', command=dep1_haut).pack()
Button(fen1, text='Bas', command=dep1_bas).pack()
 
# démarrage du réceptionnaire d'évènements (boucle principale):
fen1.mainloop()

Si j'ai bien compris, les boutons changent le sens de déplacement de la balle.

J'ai modifié la valeur de déplacement (5 au lieu de 15) et la valeur du timing (20 au lieu de 100) pour améliorer la fluidité du mouvement.

Tu remarqueras que le bouton démarrer permet maintenant aussi de mettre en pause.
Il faudrait que le texte de ce bouton change selon son état -Démarrer/Pause-. Ça, je te le laisse comme exercice.

**Lililae** · 18/05/2012, 18h54

Merci beaucoup pour cette aide qui m'est très utile

Je vais essayer pour le changement d'état du bouton "Démarrer", c'est vrai que ça ferait mieux !

**FatP0ney** · 02/04/2014, 21h11

Bonjour je me permet de solliciter votre aide car je réalise un projet du même type.
J'aimerais réaliser quelque chose de similaire à ce que vous avez fait mais sans limiter le canvas (je réalise une sorte de maze ou la boule ne devrait pas sortir d'un parcours et non d'un canvas et j'ai déjà traité la partie qui concernait les limites du parcours...)
Du coup si vous pouviez m'expliquer comment faire en sorte d'enlever les limites du canvas ca me serait d'une grande aide

De plus , je ne comprends pas très bien comment vous faites pour faire en sorte que la boule change definitivement (avec un angle de 90° par rapport a sa trajectoire précédente) de sens...
Merci de votre aide future!
Un débutant ...

Invité · 03/04/2014, 10h00

Envoyé par FatP0ney

Bonjour je me permet de solliciter votre aide car je réalise un projet du même type.
J'aimerais réaliser quelque chose de similaire à ce que vous avez fait mais sans limiter le canvas (je réalise une sorte de maze ou la boule ne devrait pas sortir d'un parcours et non d'un canvas et j'ai déjà traité la partie qui concernait les limites du parcours...)
Du coup si vous pouviez m'expliquer comment faire en sorte d'enlever les limites du canvas ca me serait d'une grande aide

De plus , je ne comprends pas très bien comment vous faites pour faire en sorte que la boule change definitivement (avec un angle de 90° par rapport a sa trajectoire précédente) de sens...
Merci de votre aide future!
Un débutant ...

Bonjour,

Une capture d'écran pour illustrer votre propos serait la bienvenue.
Merci.
@+.

**FatP0ney** · 03/04/2014, 19h48

Je vous envoie le code que j'ai un peu avancé. Je me suis inspiré du code trouvé précédemment sur cette page et d'un tp que nous avions réalisé en début d'année... J'ai notamment changé la fonction "move" mais je ne la comprends pas vraiment et j'aimerais pouvoir l'adapter sans avoir à utiliser de limites du tout et qu'elle réponde aux commandes ce qui n'est pas le cas actuellement.
Merci de votre aide

déplacement_internet.py

Invité · 03/04/2014, 20h31

Envoyé par FatP0ney

Je vous envoie le code que j'ai un peu avancé. Je me suis inspiré du code trouvé précédemment sur cette page et d'un tp que nous avions réalisé en début d'année... J'ai notamment changé la fonction "move" mais je ne la comprends pas vraiment et j'aimerais pouvoir l'adapter sans avoir à utiliser de limites du tout et qu'elle réponde aux commandes ce qui n'est pas le cas actuellement.
Merci de votre aide

déplacement_internet.py

Bonjour,

Concentrons-nous sur la fonction move() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
def move():
    """déplacement automatique de la balle de gauche à droite"""
    global x1, y1, dep
    if x1 > 380:
        dep = dep
    elif x1 <60:
        dep = dep
    x1 = x1 + dep
    can1.coords(oval1, x1, y1, x1+10, y1+10)
    # => boucler après 100 millisecondes
    fen1.after(20, move)

Plusieurs choses :

* pour moi dep = dep ne sert strictement à rien : faire une condition pour ne rien changer, autant supprimer la condition purement et simplement ;

* faire un canvas.coords() pour un mouvement relatif ?

* pourquoi ne pas utiliser directement canvas.move(oval1, dx, dy) avec dx = sx * dep et dy = sy * dep ?

* quand on limite un mouvement, on borne les coordonnées (x, y) et non pas le facteur de déplacement dep ;

* si vous modifiez dep, comment ferez-vous ensuite pour retrouver sa valeur initiale ?

* attention aux commentaires qui ne sont pas en accord avec le code : mieux vaut pas de commentaire du tout qu'un commentaire qui dit n'importe quoi ;

Avec ces indications, comment voyez-vous la nouvelle fonction move() à présent (quel code) ?

Ne postez ici que le code de move(), nous n'avons pas besoin d'autre chose pour le moment.

@+.

**FatP0ney** · 04/04/2014, 20h45

Bonjour et merci pour votre réponse!
J'ai essayé de saisir un maximum de ce que vous m'avez dit mais certains points restent un peu sombre...
J'ai compris qu'il n'était pas nécéssaire d'utiliser le "dep = dep" mais je ne voyais pas trop comment décrire le fait que l'on conserve le pas tant que l'on ne fait aucune action. J'avais donc utilisé cette méthode en me servant d'un code que nous avions déja traité en cours mais je comprends bien que ce soit parfaitement inutile.
Si j'ai bien compris la suite de votre message il faudrait que je recrée la fonction move en utilisant un autre élément : "canvas.move(oval1, dx, dy) avec dx = sx * dep et dy = sy * dep"

J'ai donc transformé ma fonction qui donne cela à présent :

--------
Code :

def move():
global dep, dx, dy
can1.move(oval1, dx, dy)
dx = sx*dep
dy = sy*dep

-----------
Lorsque j'utilise ce code une erreur s'affiche : "unexpected ident" je comprend donc que je dois essayer de présenter mes variables mais faut il le faire dans la fonction ou après?
Deplus je ne comprends pas à quoi correspond le sx*dep

Merci encore et excusez mes erreurs et incompréhensions de débutant

Invité · 04/04/2014, 21h34

Envoyé par FatP0ney

Bonjour et merci pour votre réponse!
J'ai essayé de saisir un maximum de ce que vous m'avez dit mais certains points restent un peu sombre...
J'ai compris qu'il n'était pas nécéssaire d'utiliser le "dep = dep" mais je ne voyais pas trop comment décrire le fait que l'on conserve le pas tant que l'on ne fait aucune action. J'avais donc utilisé cette méthode en me servant d'un code que nous avions déja traité en cours mais je comprends bien que ce soit parfaitement inutile.
Si j'ai bien compris la suite de votre message il faudrait que je recrée la fonction move en utilisant un autre élément : "canvas.move(oval1, dx, dy) avec dx = sx * dep et dy = sy * dep"

J'ai donc transformé ma fonction qui donne cela à présent :

--------
Code :

def move():
global dep, dx, dy
can1.move(oval1, dx, dy)
dx = sx*dep
dy = sy*dep

-----------
Lorsque j'utilise ce code une erreur s'affiche : "unexpected ident" je comprend donc que je dois essayer de présenter mes variables mais faut il le faire dans la fonction ou après?
Deplus je ne comprends pas à quoi correspond le sx*dep

Merci encore et excusez mes erreurs et incompréhensions de débutant

Bonjour,

Note : pour insérer du code dans les posts de ce forum, vous avez un bouton "#" (dièse) dans l'éditeur qui vous permet de le faire simplement.

L'erreur affichée c'est "unexpected indent" (indentation) => c'est parce que votre code est décalé par des espaces ou des tabulations injustifiées.

Le langage Python est sensible à l'indentation : vous devez toujours aligner votre code en fonction du bloc dans lequel il se trouve.

Exemple :

ceci est INCORRECT :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
def move():
   global dep, dx, dy
    can1.move(oval1, dx, dy)     # ici le code est décalé sans raison
      dx = sx*dep    # ici le code est décalé sans raison
      dy = sy*dep    # ici le code est décalé sans raison

alors que ceci est CORRECT (d'un point de vue des tabulations/indentations) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
def move():
    global dep, dx, dy
    can1.move(oval1, dx, dy)
    dx = sx*dep
    dy = sy*dep

là, c'est aligné.

Ensuite, je vous expliquais la signature théorique de canvas.move() qui est : canvas.move(oval1, dx, dy)

En mathématiques et en Physique dx et dy sont des différentiels (des évolutions localisées si vous préférez, des mouvements relatifs à un instant donné).

Il fallait donc transposer la théorie dans la pratique avec les indications dx = sx*dep et dy = sy*dep

ce qui nous donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
def move():
    global dep, sx, sy
    can1.move(oval1, sx*dep, sy*dep)

En revanche, si vous avez besoin de borner votre objet, nous devrons soit recourir à canvas.bbox(oval1) soit à canvas.coords(oval1) selon les possibilités qui nous sont offertes.

La programmation, ce n'est pas de la magie incantatoire : vous devez comprendre ce que vous faites et vous mettre aussi à la place de l'ordinateur qui va exécuter vos instructions ligne après ligne.

Quand vous écrivez du code, essayez d'imaginer l'ordinateur en train d'exécuter votre code dans l'ordre où vous le tapez et vous vous rendrez facilement compte de ce qui est cohérent et de ce qui ne l'est pas.

Tout n'est qu'une question de temps, d'étape, de moment où les choses sont faites, et d'ordre d'exécution dans lequel les choses sont faites.

Bien.

Avant de penser à borner l'objet oval1, vérifions à présent si quelque chose ne cloche pas dans le code des déplacements :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
def move():
    global dep, sx, sy
    can1.move(oval1, sx*dep, sy*dep)
 
# gestionnaires d'évènements:
def dep1_gauche():
    global sx
    sx = -1
 
def dep1_droite():
    global sx
    sx = 1
 
def dep1_haut():
    global sy
    sy = -1
 
def dep1_bas():
    global sy
    sy = 1

Que devriez-vous rectifier à présent ?

**FatP0ney** · 05/04/2014, 17h55

Bonjour,
Merci à nouveau pour votre pédagogie et le temps que vous me consacrez!
Avec votre fonction la balle n’avançait qu'au coup par coup .Comme vous le suggériez j'ai donc rajouté un élément nouveau : une boucle (je crois qu'on appelle ça comme ça).
Voila mon code actuel :

Code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
def move():
    global dep, sx, sy
    can1.move(oval1, sx*dep, sy*dep)
    zone_dessin.after(100, move)

Merci de m'avoir aidé à résoudre ce problème

Néanmoins il me reste un soucis : la balle ne modifie pas sa trajectoire avec un angle droit si elle descend et qu'on lui demande par exemple de tourner à gauche : elle prend un mouvement en diagonale ce qui ne correspond pas vraiment à ce que j'essaie de faire ...
Auriez vous une idée sur ce nouveau point?
Merci encore!

Invité · 05/04/2014, 18h26

Envoyé par FatP0ney

Bonjour,
Merci à nouveau pour votre pédagogie et le temps que vous me consacrez!
Avec votre fonction la balle n’avançait qu'au coup par coup .Comme vous le suggériez j'ai donc rajouté un élément nouveau : une boucle (je crois qu'on appelle ça comme ça).
Voila mon code actuel :

Code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
def move():
    global dep, sx, sy
    can1.move(oval1, sx*dep, sy*dep)
    zone_dessin.after(100, move)

Merci de m'avoir aidé à résoudre ce problème

Bonjour, oui, j'allais y venir.

Je voulais tout d'abord que vous vous penchiez sur le problème des directions que vous venez de constater à l'essai :

Néanmoins il me reste un soucis : la balle ne modifie pas sa trajectoire avec un angle droit si elle descend et qu'on lui demande par exemple de tourner à gauche : elle prend un mouvement en diagonale ce qui ne correspond pas vraiment à ce que j'essaie de faire ...
Auriez vous une idée sur ce nouveau point?
Merci encore!

C'est bien pour cela que je vous avais republié le code du post #9 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
def move():
    global dep, sx, sy
    can1.move(oval1, sx*dep, sy*dep)
    zone_dessin.after(100, move)
 
# gestionnaires d'évènements:
def dep1_gauche():
    global sx
    sx = -1
 
def dep1_droite():
    global sx
    sx = 1
 
def dep1_haut():
    global sy
    sy = -1
 
def dep1_bas():
    global sy
    sy = 1

En vous posant cette question :

Que devriez-vous rectifier à présent ?

Essayez de faire l'effort de trouver par vous-même : moi, je connais la réponse, mais ce n'est pas moi qui apprends ici.

Réfléchissez bien : mettez-vous à la place de l'ordinateur qui exécute les instructions telles qu'elles sont écrites pour le moment...

**FatP0ney** · 05/04/2014, 19h15

Et voila , trouvé!

Je crois qu'il fallait modifier le déplacement horizontal/vertical de manière à ce que le changement de direction se fasse!
Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
def dep1_gauche():
    global sx, sy
    sx = -1
    sy = 0
 
def dep1_droite():
    global sx, sy
    sx = 1
    sy = 0
 
def dep1_haut():
    global sy, sx
    sy = -1 
    sx = 0 
 
def dep1_bas():
    global sy, sx
    sy = 1 
    sx = 0

Il ne me reste maintenant plus q'une fonction qui permettrait d'assigner le déplacement de la boule aux touches du clavier ce que je devrais trouver sur internet ...
Merci pour votre aide en tout cas elle a été très précieuse je reviendrais surement vers vous si j'ai d'autres soucis par la suite (surement pour les limites du parcours)!
Bonne soirée

Invité · 05/04/2014, 19h27

Envoyé par FatP0ney

Et voila , trouvé!

Je crois qu'il fallait modifier le déplacement horizontal/vertical de manière à ce que le changement de direction se fasse!
Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
def dep1_gauche():
    global sx, sy
    sx = -1
    sy = 0
 
def dep1_droite():
    global sx, sy
    sx = 1
    sy = 0
 
def dep1_haut():
    global sy, sx
    sy = -1 
    sx = 0 
 
def dep1_bas():
    global sy, sx
    sy = 1 
    sx = 0

Il ne me reste maintenant plus q'une fonction qui permettrait d'assigner le déplacement de la boule aux touches du clavier ce que je devrais trouver sur internet ...
Merci pour votre aide en tout cas elle a été très précieuse je reviendrais surement vers vous si j'ai d'autres soucis par la suite (surement pour les limites du parcours)!
Bonne soirée

Bravo.

**FatP0ney** · 05/04/2014, 19h40

Je me permet à nouveau de vous embêter en fait....
Est il possible de créer un système de score avec python par exemple en fonction du nombre de lignes passées ou est-ce hors de portée étant donné mon niveau?

Invité · 05/04/2014, 19h48

Envoyé par FatP0ney

Je me permet à nouveau de vous embêter en fait....
Est il possible de créer un système de score avec python par exemple en fonction du nombre de lignes passées ou est-ce hors de portée étant donné mon niveau?

C'est tout à fait possible, mais nous verrons ça lorsque vous aurez progressé dans votre jeu.

Pensez à cliquer sur le bouton "Résolu" à côté de "Répondre à la discussion".

Merci et à bientôt.