Informatique 5 leçons

Programmer en Python

Leçon 4 - Programmer un jeu vidéo avec Pygame

Imprimer / PDF

Ce que tu sauras faire à la fin. Ouvrir une fenêtre, dessiner, écouter le clavier, animer, gérer les chocs, compter les points, et assembler le tout en un jeu jouable.

Moment	Ce que tu fais
🎯 Point de départ	Une question posée avant la leçon. Prends une feuille et cherche seul quelques minutes. Se tromper à ce moment-là fait partie du travail.
Le corps du chapitre	La notion est expliquée, montrée en schéma, puis écrite en code. Tape les programmes toi-même plutôt que de les recopier par copier-coller : la main retient.
🚀 À toi de jouer	Trois défis à traiter seul. Les réponses figurent à la fin du fascicule, mais cherche d’abord.

Signature	Contenu
📘 Définition	À connaître par cœur.
💡 Le savais-tu ?	Un fait surprenant, vrai et vérifié.
📜 Histoire vraie	Un épisode réel de l’histoire de l’informatique.
🔬 À l’essai	Une manipulation à faire, ou une mesure relevée pour ce cours.
🧵 Fil rouge	Le lien avec le chapitre suivant.
📋 Récapitulatif	Les cinq points à retenir.

Système	Commande à taper dans le terminal
Windows	`pip install pygame`
macOS	`pip3 install pygame`
Linux	`pip3 install pygame --break-system-packages`

Module	Rôle	Chapitre où tu le rencontreras
`pygame.display`	Créer la fenêtre et rafraîchir l’image	2
`pygame.draw`	Tracer rectangles, cercles et traits	4
`pygame.event`	Recevoir les actions du joueur	6
`pygame.key`	Savoir quelles touches sont enfoncées	6
`pygame.time`	Mesurer le temps, régler la vitesse	8
`pygame.Rect`	Manipuler des rectangles, détecter les chocs	10
`pygame.font`	Écrire du texte à l’écran	11

Instruction	Ce qu’elle fait	Ce qui arrive si tu l’oublies
`pygame.init()`	Réveille les modules de Pygame	Certaines fonctions refusent de travailler
`set_mode((800, 600))`	Crée la fenêtre et renvoie sa surface	Rien à dessiner, rien à afficher
`set_caption("...")`	Écrit le titre de la fenêtre	Le titre reste `pygame window`
`fenetre.fill(couleur)`	Repeint toute la surface	Le fond garde son gris d’origine
`pygame.display.flip()`	Montre le dessin au joueur	Ton dessin existe mais reste invisible
`pygame.quit()`	Range proprement avant de partir	La fenêtre peut se figer à la fermeture

Coin de la fenêtre	Coordonnées	Lecture
Supérieur gauche	`(0, 0)`	l’origine
Supérieur droit	`(800, 0)`	tout à droite, tout en haut
Inférieur gauche	`(0, 600)`	tout à gauche, tout en bas
Inférieur droit	`(800, 600)`	le coin le plus éloigné
Centre	`(400, 300)`	la moitié de chaque dimension

Instruction	Arguments	Ce qu’elle trace
`pygame.draw.rect`	surface, couleur, `(x, y, largeur, hauteur)`	un rectangle dont le coin supérieur gauche est en (x, y)
`pygame.draw.circle`	surface, couleur, `(x, y)`, rayon	un disque dont le centre est en (x, y)
`pygame.draw.line`	surface, couleur, départ, arrivée, épaisseur	un segment entre deux points
`pygame.draw.ellipse`	surface, couleur, `(x, y, largeur, hauteur)`	une ellipse inscrite dans ce rectangle

Temps	Dans le programme 6	Ce qui s’y ajoutera plus tard
1. Écouter	`for evenement in pygame.event.get()`	les touches du clavier, au chapitre 6
2. Calculer	rien pour l’instant	le déplacement, les chocs, le score
3. Dessiner	`fill`, `draw`, `flip`	le texte du score, au chapitre 11

	`KEYDOWN` dans la file	`pygame.key.get_pressed()`
Ce qu’elle rapporte	l’instant où la touche est enfoncée	l’état de la touche à cet instant
Nombre de déclenchements	une seule fois par appui	à chaque tour, tant que la touche reste enfoncée
Usage adapté	tirer, sauter, valider, mettre en pause	marcher, avancer, tourner
Si tu te trompes	le personnage avance d’un pas puis se fige	le personnage tire des centaines de fois par seconde

Tour de boucle	Valeur de `x`	Position du cercle
1	4	presque collé au bord gauche
2	8	4 pixels plus à droite
3	12	4 pixels plus à droite
100	400	au milieu de la fenêtre
200	800	il sort par la droite
300	1200	il est loin hors de la fenêtre, et continue

Réglage	Effet sur l’image	Effet sur la machine
pas de `tick`	vitesse différente sur chaque ordinateur	le processeur tourne à fond sans raison
`tick(30)`	mouvement un peu saccadé	charge légère
`tick(60)`	fluide, valeur usuelle des jeux	charge modérée
`tick(120)`	très fluide, visible sur les écrans rapides	charge deux fois plus élevée

	S’arrêter	Rebondir
Ce qui change	la position seulement	la position et le signe de la vitesse
Variables nécessaires	la position	la position et une vitesse
Usage typique	un personnage dirigé par le joueur	une balle, un projectile
Piège	oublier le rayon ou la largeur	inverser la vitesse sans replacer l’objet

Écriture	Ce qu’elle donne
`r = pygame.Rect(100, 50, 200, 120)`	crée le rectangle
`r.x = r.x + 5`	déplace de 5 pixels vers la droite
`r.left = 0`	colle le rectangle au bord gauche
`r.right = 800`	colle le rectangle au bord droit
`r.center = (400, 300)`	centre le rectangle dans la fenêtre
`a.colliderect(b)`	`True` si a et b se chevauchent
`r.collidepoint(x, y)`	`True` si le point est dedans
`pygame.draw.rect(fenetre, couleur, r)`	dessine directement le Rect

Geste	Instruction	Quand l’exécuter
1. Choisir une police	`police = pygame.font.SysFont(None, 40)`	une seule fois, avant la boucle
2. Fabriquer l’image du texte	`texte = police.render("Score : 3", True, couleur)`	à chaque tour, dans la boucle
3. Poser cette image	`fenetre.blit(texte, (20, 20))`	à chaque tour, juste après

Chapitre	Notion	Ligne du programme 14 qui l’emploie
1	la bibliothèque	`import pygame`
2	la fenêtre et son affichage	`set_mode`, `flip`
3	le repère de l’écran	`goutte.y = goutte.y + vitesse_goutte`
4	les couleurs et les formes	`BLANC`, `draw.rect`, `draw.ellipse`
5	la boucle de jeu	`while en_marche`
6	les événements et le clavier	`event.get`, `key.get_pressed`
7	le mouvement	l’addition sur `goutte.y`
8	l’horloge	`horloge.tick(60)`
9	les bords	`panier.left` et `panier.right`
10	les collisions	`panier.colliderect(goutte)`
11	le texte et le score	`police.render`, `fenetre.blit`

Message affiché	Cause	Remède
`ModuleNotFoundError: No module named 'pygame'`	La bibliothèque n’est pas installée, ou Python ne la trouve pas.	Reprendre `pip install pygame` (chapitre 1).
`pygame.error: font not initialized`	`pygame.init()` manque avant l’emploi du texte.	Placer `pygame.init()` au début du programme.
`pygame.error: Display mode not set`	`flip` appelé alors que la fenêtre n’a pas été créée.	Ajouter `set_mode` avant toute chose.
`pygame.error: display Surface quit`	Un dessin a lieu après `pygame.quit()`.	Déplacer `pygame.quit()` à la toute fin.
`TypeError: can only concatenate str (not "int") to str`	Un nombre est ajouté à du texte sans conversion.	Écrire `"Score : " + str(score)` (chapitre 11).
`TypeError: size must be two numbers`	Les dimensions ont été données sans les parenthèses intérieures.	Écrire `set_mode((800, 600))`, avec les deux paires.
`TypeError: rect argument is invalid`	Un rectangle a reçu trois nombres au lieu de quatre.	Fournir `(x, y, largeur, hauteur)`.
`ValueError: invalid color argument`	Une composante de couleur dépasse 255 ou descend sous 0.	Ramener les trois nombres entre 0 et 255.
`IndentationError`	Les décalages en début de ligne sont irréguliers.	Employer partout quatre espaces, et proscrire le mélange avec des tabulations.

Symptôme	Cause la plus probable	Remède
La fenêtre s’ouvre et se referme aussitôt.	Le programme arrive à sa fin sans attendre.	Ajouter la boucle de jeu du chapitre 5.
La fenêtre reste grise malgré `fill`.	`pygame.display.flip()` manque.	Ajouter `flip` après les dessins.
L’objet laisse une traînée derrière lui.	`fill` se trouve hors de la boucle.	Repeindre le fond à chaque tour, avant les dessins.
La fenêtre refuse de se fermer.	Le test sur `pygame.QUIT` manque.	Rétablir le test et le passage de `en_marche` à `False`.
Le jeu file trop vite, ou rame.	L’horloge manque.	Créer `pygame.time.Clock()` et appeler `tick(60)`.
Le personnage avance d’un pas puis se fige.	Le déplacement passe par `KEYDOWN`.	Employer `pygame.key.get_pressed()` (chapitre 6).
Le tir part en rafale continue.	Le tir passe par `get_pressed`.	Employer `KEYDOWN` dans la file d’événements.
Un objet à vitesse décimale ne bouge pas.	Un `Rect` arrondit à l’entier le plus proche.	Garder une vitesse entière, ou tenir la position dans une variable séparée (chapitre 10).
Deux objets se touchent sans rien déclencher.	`colliderect` exige un chevauchement réel.	Vérifier les positions : bord contre bord renvoie `False`.
L’objet tremble contre un mur au lieu de rebondir.	La vitesse s’inverse à chaque tour.	Replacer l’objet sur la limite avant d’inverser la vitesse (chapitre 9).
La moitié du cercle dépasse de la fenêtre.	Le rayon n’entre pas dans le calcul de la limite.	Borner le centre entre le rayon et la dimension moins le rayon.

Instruction	Rôle
`touches = pygame.key.get_pressed()`	état de toutes les touches à cet instant
`if touches[pygame.K_LEFT]:`	vrai tant que la flèche gauche est enfoncée
`if evenement.type == pygame.KEYDOWN:`	l’instant précis d’un appui
`if evenement.key == pygame.K_SPACE:`	quelle touche vient d’être pressée
Constantes usuelles	`K_LEFT`, `K_RIGHT`, `K_UP`, `K_DOWN`, `K_SPACE`, `K_ESCAPE`, `K_a` à `K_z`

Nom	Triplet	Nom	Triplet
blanc	`(255, 255, 255)`	rouge	`(200, 40, 40)`
noir	`(0, 0, 0)`	vert	`(30, 140, 90)`
gris	`(150, 150, 150)`	bleu	`(40, 90, 200)`
sable	`(235, 215, 170)`	violet	`(120, 60, 160)`
jaune	`(240, 200, 40)`	brun	`(150, 96, 42)`

Instruction	Rôle
`import pygame`	charge la bibliothèque
`pygame.init()`	réveille les modules
`fenetre = pygame.display.set_mode((800, 600))`	crée la fenêtre, renvoie sa surface
`pygame.display.set_caption("Titre")`	écrit le titre de la fenêtre
`pygame.quit()`	range tout à la fin

Instruction	Rôle
`fenetre.fill((255, 255, 255))`	repeint toute la surface
`pygame.draw.rect(fenetre, couleur, (x, y, l, h))`	rectangle plein, repéré par son coin
`pygame.draw.rect(fenetre, couleur, (x, y, l, h), 3)`	le même, en contour de 3 pixels
`pygame.draw.circle(fenetre, couleur, (x, y), r)`	disque, repéré par son centre
`pygame.draw.ellipse(fenetre, couleur, (x, y, l, h))`	ellipse inscrite dans le rectangle
`pygame.draw.line(fenetre, couleur, depart, arrivee, ep)`	segment
`pygame.display.flip()`	montre le dessin au joueur

Instruction	Rôle
`r = pygame.Rect(x, y, largeur, hauteur)`	crée un rectangle
`r.x`, `r.y`	coin supérieur gauche
`r.left`, `r.right`	bords gauche et droit
`r.top`, `r.bottom`	bords haut et bas
`r.center`	centre, sous forme de couple
`a.colliderect(b)`	vrai si a et b se chevauchent
`r.collidepoint(x, y)`	vrai si le point est à l’intérieur

Instruction	Rôle
`horloge = pygame.time.Clock()`	crée l’horloge, avant la boucle
`horloge.tick(60)`	plafonne à 60 tours par seconde
`horloge.get_fps()`	fréquence réellement obtenue
`pygame.time.wait(3000)`	met en pause trois secondes
`police = pygame.font.SysFont(None, 40)`	choisit une police, avant la boucle
`texte = police.render("Score : " + str(s), True, couleur)`	fabrique l’image du texte
`fenetre.blit(texte, (20, 20))`	pose cette image

N°	Réponse	Énoncé de la bonne réponse	Pourquoi
1	c	En haut à gauche.	L’origine de l’écran est le coin supérieur gauche, et l’axe des ordonnées descend.
2	b	Les dessins ont lieu mais restent invisibles.	Les dessins se font sur une surface cachée. `flip` est le geste qui la montre au joueur.
3	c	16 777 216	Chaque composante admet 256 valeurs, donc 256 × 256 × 256 = 16 777 216.
4	b	Écouter, calculer, dessiner.	L’ordre compte : il faut connaître les actions du joueur avant d’en calculer les conséquences, et achever ce calcul avant de dessiner.
5	b	`pygame.key.get_pressed()`.	Un mouvement continu réclame l’état de la touche, relu à chaque tour. `KEYDOWN` ne se déclenche qu’une fois par appui.
6	c	À empêcher la boucle de dépasser environ soixante tours par seconde.	`tick` impose un plafond. La mesure effectuée pour ce cours donne 61,7 images par seconde, et non 60 précisément.
7	c	760	Le centre doit rester à au moins un rayon du bord : 800 - 40 = 760.
8	b	`False`, car le chevauchement est nul.	Le contact bord contre bord ne suffit pas. Il faut au moins un pixel commun, comme le montre la figure 6.
9	b	Parce que Python refuse d’ajouter un nombre à du texte.	Sans conversion, Python signale `TypeError: can only concatenate str (not "int") to str`.
10	c	Si le score est un multiple de 5.	L’opérateur `%` donne le reste d’une division. Un reste nul par 5 signale un multiple de 5.

Défi	Réponse
1.1	Le programme tient en deux lignes : `import pygame` puis `print(pygame.version.ver)`.
1.2	Ajouter `print(pygame.version.SDL)`. Deux `print` produisent deux lignes.
1.3	`pygame.display` crée la fenêtre, `pygame.draw` trace le cercle.
2.1	`set_mode((500, 500))`, `set_caption("Mon premier carré")`, et un remplissage avec un bleu clair, par exemple `(170, 210, 240)`.
2.2	`pygame.time.wait(10000)`, puisque la valeur s’exprime en millisecondes.
2.3	Le remplissage a lieu après l’affichage : il peint la surface cachée, que personne ne montre ensuite. Le joueur voit donc l’état précédent, c’est-à-dire le gris d’origine.
3.1	Le point (100 ; 50) est le plus haut. Une ordonnée plus petite signifie une position plus haute, puisque l’axe descend.
3.2	`(320, 240)`, soit la moitié de 640 et la moitié de 480.
3.3	Une boucle `for i in range(5)` avec `x = i * 200` et `y = i * 150` répartit cinq cercles sur la diagonale.
4.1	Du jaune. Le rouge et le vert au maximum, sans bleu, donnent du jaune, comme le montre la zone d’intersection de la figure 3.
4.2	600 divisé par 3 donne 200 pixels par bande. Les trois rectangles partent des abscisses 0, 200 et 400, chacun de 200 pixels de large et de 400 de haut.
4.3	Trois `draw.circle` de même abscisse, d’ordonnées croissantes et de rayons décroissants, puis deux petits disques noirs posés sur le disque du haut.
5.1	Remplacer le triplet du `fill` par un jaune pâle, par exemple `(250, 240, 190)`, et `draw.circle` par `draw.rect`. La boucle reste identique.
5.2	La fenêtre refuse de se fermer : l’événement arrive bien, mais rien ne fait passer `en_marche` à `False`, donc la boucle continue.
5.3	Sans horloge, le nombre de tours dépend de la machine. Plusieurs milliers par seconde sur un ordinateur récent : c’est précisément le problème que le chapitre 8 résout.
6.1	Ajouter `if touches[pygame.K_ESCAPE]:` suivi de `en_marche = False`.
6.2	Tester `touches[pygame.K_SPACE]` et ranger la couleur dans une variable avant le dessin.
6.3	En tapotant, un message par appui. En maintenant, un seul message malgré la durée. Conclusion : `KEYDOWN` signale l’instant de l’appui, non sa durée.
7.1	Modifier `y` au lieu de `x`, et l’augmenter, puisque l’axe vertical descend.
7.2	Deux lignes : `x = x + 4` et `y = y + 4` dans le même tour.
7.3	Ce nombre est la vitesse, exprimée en pixels par tour. Augmenté, l’objet va plus vite ; diminué, il ralentit.
8.1	Le mouvement devient très saccadé : l’objet fait des bonds de 4 pixels visibles à l’œil, parce que les images sont trop espacées dans le temps.
8.2	À 4 pixels par tour et 60 tours par seconde, l’objet parcourt 240 pixels par seconde. Pour 800 pixels : 800 divisé par 240, soit environ 3,3 secondes.
8.3	À 2 pixels par tour, la vitesse est de 120 pixels par seconde, et la traversée dure environ 6,7 secondes, soit le double.
9.1	Ajouter une variable `vitesse_y`, puis l’additionner à `y` à chaque tour, et écrire les deux tests de bord vertical sur le modèle des tests horizontaux.
9.2	Le cercle finit par devenir plus large que la fenêtre. Les deux tests de bord se déclenchent alors au même tour, la vitesse s’inverse deux fois, et l’objet se bloque.
9.3	`if x > 800: x = 0`. L’objet réapparaît par la gauche sans changer de sens.
10.1	Créer un second `Rect`, et écrire un second `if joueur.colliderect(...)` avec sa propre couleur.
10.2	Quatre tests : `if joueur.left < 0: joueur.left = 0`, et de même pour `right` avec 800, `top` avec 0, `bottom` avec 600.
10.3	Dans le test de collision, écrire `tresor.x = random.randint(0, 800 - tresor.width)` et de même pour l’ordonnée avec la hauteur.
11.1	Une position telle que `(600, 20)`. Le texte risque de dépasser parce que sa largeur grandit avec le nombre de chiffres du score ; il faudrait la mesurer avec `texte.get_width()` et soustraire.
11.2	Un compteur augmenté de 1 à chaque tour, converti par `str`, puis un second `render` et un second `blit` à une autre position.
11.3	Ranger la couleur dans une variable avant le `render`, décidée par une suite de `if` et `elif` portant sur le score.
12.1	Deux `render` supplémentaires après la boucle, posés à deux ordonnées différentes sur l’écran de fin.
12.2	Un second `Rect` nommé par exemple `goutte2`, sa propre vitesse, son propre test de collision et son propre test de sortie par le bas.
12.3	Un troisième `Rect` rouge dont le test de collision écrit `score = score - 2`. Prévoir le cas d’un score qui deviendrait négatif.
12.4	Modifier `panier.width` en fonction du score, en imposant une largeur minimale, par exemple 40, pour que la partie reste jouable.
12.5	Placer la boucle de jeu à l’intérieur d’une seconde boucle. L’écran de fin attend alors un événement `KEYDOWN` : la touche R réinitialise le score, les gouttes perdues et les positions ; la touche Échap sort des deux boucles.

Leçon 4 - Programmer un jeu vidéo avec Pygame

Programmer un jeu vidéoavec Pygame

🧭 Comment lire ce cours

Les trois moments de chaque chapitre

Les six encadrés et ce qu’ils contiennent

🧰 La boîte à outils

Une bibliothèque posée sur une autre

Installer Pygame

Ce que contient la boîte

🖥️ La première fenêtre

Ce qui se passe réellement

Peindre la surface, puis la montrer

📐 Le repère de l’écran

Pourquoi vers le bas ? La réponse tient dans un tube

La preuve par les quatre coins

🎨 Dessiner et colorer

Une couleur, trois nombres

Quatre façons de dessiner

🔁 La boucle de jeu

Les trois temps, dans cet ordre

⌨️ Les événements et le clavier

Deux façons de lire le clavier, et elles ne servent pas au même usage

🏃 Le mouvement

⏱️ L’horloge et la vitesse

🧱 Les bords de la fenêtre

Première solution : s’arrêter au mur

Seconde solution : rebondir

💥 Les collisions

Détecter le chevauchement

🔢 Le texte et le score

🕹️ Le mini-jeu complet

La règle du jeu

Où se cachent les onze chapitres

🩺 Quand ça ne marche pas

Le programme s’arrête net

Le programme tourne, mais se comporte mal

🗃️ Fiche mémo

Mise en route et fermeture

Dessiner

La boucle de jeu

Le clavier

Les rectangles et les chocs

Le temps et le texte

Couleurs courantes

🧠 Quiz final

✍️ Exercices de réflexion

📖 Lexique

✅ Corrigés

Quiz final

Défis, chapitre par chapitre

Programmer un jeu vidéo
avec Pygame