En prérecquis de ce tutoriel, il est vivement conseillé de maîtriser les bases de HTML et CSS. Nous vous proposons le cours et le TD suivant :

Diapos de présentation du cours d'introduction HTML/CSS.

TD HTML-CSS : réaliser un petit site web ainsi que sa mise en forme.

Pour aller plus loin et réaliser des animations CSS (facultatif pour le tuto pong).

Ce document a pour but de présenter une méthode rapide, ludique et efficace pour faire comprendre et manipuler les notions de base de la programmation web par le codage du jeu « Pong » en HTML/CSS/JavaScript.

Ce document a été utilisé par plusieurs enseignants pour des élèves de seconde, 1ère et terminale, ainsi que des étudiants en DSAA DSAA : Diplôme Supérieur d’Arts Appliqués n’ayant aucune formation poussée en science. Ce document est donc destiné aux débutants en programmation.

Suivre la construction pas à pas d'un jeu comme Pong devrait permettre de comprendre et manipuler les notions de base de la programmation web HTML/CSS/JavaScript.

La structure HTML de la page et les propriétés CSS des élément seront manipulée à l'aide de JavaScript afin de créer le jeu qui sera en fait une page web dynamique et interactive.

On (re?)découvrira les notions programmation de base que sont les variables, tests, boucles, objets, etc.

Le tutoriel vous accompagnera pour écrire le programme du jeu Pong. Il est découpé en étapes clés (créer une fenêtre de jeu, tracer une balle, animer un objet, contrôles au clavier, etc.) et il sera possible d'avancer à votre rythme sans jamais être bloqué. En effet, chaque partie sera organisée de la manière suivante :

Objectif : par exemple, afficher une balle
Explication théoriques : par exemple, comment positionner et donner une couleur à une figure géométrique
Exercices : par exemple, tracer des cercles de couleurs différentes à différentes positions de la fenêtre
Correction ou indices

Première prise en main

JavaScript est un langage de programmation utilisé pour les pages web interactives. C'est un langage client, ce qui signifie qu'il est exécuté par l'ordinateur de l'utilisateur, et non par le serveur du site hébergeant. Il peut toutefois être utilisé comme langage de serveur (Node.js), ce qui n'est pas son utilisation initiale. Il existe depuis les débuts du web (1995) démontrant une longévité certaine. Langage interprété à ses débuts (a priori plus lents que les langages compilés), il a évolué pour devenir un langage compilé à la volée très rapide selon le moteur JavaScript. Il existe de nombreux éditeurs et IDE (Interface De Développement) :

Notepad++
SublimeText
Eclipse
Atom
Vim
Brackets
etc.

Nous choisissons ici d'utiliser Notepad++ qui est à la fois générique, léger, gratuit et libre, mais qui n'est disponible que sous Windows. Il sera tout à fait possible d'utiliser l'éditeur de votre préférence. Si vous n'en connaissez aucun, commencez par suivre cette introduction à l'utilisation de Notepad++ :

Introduction à l'utilisation de Notepad++ et à la programmation web Dans cette partie, nous souhaitons créer :

un élément HTML représentant le cadre de la zone du jeu avec une bordure
un élément HTML fils de la zone de jeu, représentant une balle (avec des bords arrondis pour former un disque).

Le rendu devra correspondre à l'image ci-dessous :

Afin de réalisé l'objectif précédent, il est important de bien comprendre comment sont positionnés les objets dans le plan, et la manière de représenter les couleurs :

Comment sont représentées les couleurs numériquement ?

Positionnement dans une fenêtre d'affichage.

En se basant sur les éléments de cours précédent positionnement CSS, on souhaite réaliser le premier objectif d'affichage de la balle dans un cadre.

Dans un dossier personnel, créer un sous-dossier intitulé pong. Ouvrir un fichier vierge dans Notepad++. L'enregistrer sous le nom index.html dans le dossier pong (ne pas oublier l'extension .html). Ouvrir un deuxième fichier vierge dans Notepad++. L'enregistrer sous le nom pong.css. Visualiser la page index.html avec Firefox. Normalement, le résultat est une page blanche. Dans le fichier index.html, placer le code minimal suivant : <!DOCTYPE html> <html lang="fr"> <head> <title>Pong</title> <link rel="stylesheet" href="pong.css"> </head> <body> Hello !!!! </body> </html> Enregistrez dans Notepad++, puis rafraîchissez la page firefox avec

ou F5. Normalement, la page contient maintenant le texte "Hello !!!!" et un titre. Dans le code minimal, <link rel="stylesheet" href="pong.css"> permet de lier les deux fichiers html et css entre eux. En respectant les valeurs données dans les objectifs fixés (largeur, hauteur, épaisseur, couleurs, etc.) : Dans le fichier index.html, créer la zone de jeu comme une div d'id zone-jeu. Dans le fichier pong.css, donner les valeurs souhaitées aux propriétés de l'élément #zone-jeu. Dans le fichier index.html, créer la balle comme une div de classe ball Dans le fichier pong.css, donner les valeurs souhaitées aux propriétés de l'élément .ball. La zone de jeu est identifiée par un id car elle est unique. La balle est caractérisée par une classe, car elle pourrait ne pas être unique en cas de "jeu multi-balle".

Indice 1

S'inspirer des exercices sur le positionnement en CSS (copier-coller des parties).

Indice balle ronde 1

la propriété border-radius permet de préciser le rayon des coins arrondis.

Indice balle ronde 2

.ball{border-radius:50%;}

Changer la couleur du fond. Changer la taille et la forme de la balle. Changer la taille de la zone du jeu. Faire sortir la balle de la zone de jeu. Réaliser la figure suivante dans un nouveau fichier nommé cible.py:

Indice 1

Tracer 7 disques (un rouge, un blanc), de même centre.

Indice 2

Les rayons sont des multiples de 10 pixels.

Indice 3

Commencer par dessiner le plus petit est une mauvaise idée.

La balle possède des attributs naturels (position, vitesse, couleur, etc. ), nous avons besoin pour les représenter de manière informatique d'introduire les notions de variables et de types. On considère donc qu'à l'instant $t$, la balle est à la position $(x,y)$ dans un repère orthogonal $(O;I;J)$. A la frame suivante, à l'instant $t+dt$, sa nouvelle position est $(x+dx;y+dy)$.

La balle est caractérisée par :

Sa position $(x,y)$
Son déplacement $(dx,dy)$
Sa couleur $(r,g,b)$
Sa forme, qu'on considèrera ici comme circulaire.

La balle est également caractérisée par des actions : La balle réalisera les actions suivantes :

Afficher : Cela paraît trivial, mais il est tout d’abord nécessaire de dessiner la balle pour qu’elle apparaisse sur la fenêtre d’affichage. Il faut alors un cercle de rayon $r$, à la position $(x,y)$, rempli avec la couleur $c$.
Avancer ou bouger : Faire avancer la balle de $dx$ suivant l’axe $x$ et de $dy$ suivant l’axe $y$, entre deux frames consécutives.
Rebondir ou Test de collision : Faire rebondir la balle sur les bords de la fenêtre d’affichage. Par la suite, nous ferons évoluer cette action en permettant la collision avec une raquette. Nous pourrons aussi rajouter du son à chaque collision.

On peut aussi définir un vecteur position $\vec{p} = \left(\begin{array}{c} x \\y \end{array}\right)$ ainsi qu’un vecteur déplacement $\vec{d} = \left(\begin{array}{c} dx \\dy \end{array}\right)$. On considère dans un premier temps deux paramètres au lieu d’un vecteur. Nous définissons volontairement les paramètres de la balle comme « attributs » de la balle en prévision de la partie concernant la Programmation Orientée Objet, dans laquelle nous allons définir les attributs de la classe « balle ». L’assimilation et la compréhension du concept d’attribut est ainsi facilité. Attention, dans les représentations d'images numériques et les logiciels de traitement d'image, l'axe des ordonnées est orienté vers le bas. L’ensemble des attributs de la balle $\{c, r, x,y, dx, dy\}$ est susceptible d’évoluer au fur et à mesure de l’animation et de la vie de la balle. Il faut donc que le programme puisse manipuler et faire varier chacun de ces paramètres au fur et à mesure de son exécution. Pour effectuer cette manipulation, en programmation, on utilise des variables. Il s’agit d’un espace mémoire dans l’ordinateur attribué à chacun des attributs de la balle. On peut assimiler cet espace à une boite dans laquelle on place la valeur de la variable :

La boite en question porte un nom pour la repérer de manière unique en mémoire (ici : $x$) et prend une valeur (ici $5$). De manière analogue, en programmation, chaque variable à un type dont voici une liste des principaux :

int : nombre entier
float : nombre flottant (à virgule)
string : chaîne de caractères
bool : booléen - valeur de vérité vrai ou faux

En physique, chaque grandeur a intrinsèquement une unité. Par exemple :

La masse $m$ est en $kg$
La vitesse $v$ est en $m.s^{-1}$
Etc.

En mathématique, il existe différents ensemble de nombres. Par exemple :

Entiers naturels $\mathbb{N}$ : $0,1,2,3,...$
Nombres rationnels $\mathbb{Q}$ : $\frac{1}{3},0.5,...$
Les réels $\mathbb{R}$ : $\pi, e, \sqrt{2}$
Etc.

En informatique, un langage de programmation est dit fortement typé lorsqu'il est nécessaire de déclarer systématiquement le type de chaque variable. Par opposition, un langage peut être faiblement typé comme Python dans lequel les types des variables sont gérés automatiquement. Il est possible de vérifier le type d'une variable v en tapant type(v). Vérifiez dans la console Python les types de :

42
"salut"
1.5
math.pi
True
"True"

Selon les types utilisés, les variables occupent des espaces de mémoire différents. Pour résumer, une variable est caractérisée par :

Un nom
Une valeur
Un type

Les variables caractérisant notre balles seront celles-ci :

Attributs de la balle	Nom de la variable	Type de la variable
Couleur	c	Liste de 3 entiers `int`
Rayon	r	`int`
Position (abscisse)	x	`int`
Position (ordonnée)	y	`int`
Déplacement (abscisse)	dx	`int`
Déplacement (ordonnée)	dy	`int`
Forme	cercle (pour l'instant cette variable ne changera pas)	---

Ces variables sont déclarées en début de programme, et utilisées par la suite dans toute le programme. C'est ce qu'on qualifie de variable globale.Les variables globales sont généralement à éviter dans des projets plus complexes. D'autres solutions sont préférables, notamment les attributs d'une classe en programmation orientée objet. Ajoutons nos variables au programme précédent : Le code est le suivant : #importation de la librairie pygame import pygame,sys from pygame.draw import * from pygame.display import * # variables globales #############################################" size = width, height = 500, 500 # taille de la fenêtre d'affichage #attributs de la balle [dx,dy] = [2, 1]#vecteur de déplacement entre deux frames consécutives couleurFond = [255, 0, 0]#rouge couleurBalle= [0,0,255]#bleu [x,y]=[100,100] # position initiale de la balle r=20 #rayon de la balle #lancement des fonctionnalités de la librairie pygame pygame.init() #affichage d'une fenêtre de dessin de largeur 500 pixels et de hauteur 500 pixels screen = set_mode(size) #remplissage du fond par la couleur définie screen.fill(couleurFond) # dessin d'un cercle : # 0 : dernier paramètre - épaisseur du contour (0 pour aucun contour) circle(screen, couleurBalle , [x,y], r, 0) # voir documentation : https://www.pygame.org/docs/ref/draw.html #activer le rendu graphique (sans lequel rien n'est affiché) flip() pygame.time.delay(2000)#attend deux secondes pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme code source : pong0.3.py L'objectif est maintenant de faire avancer la balle. Il va donc falloir simuler le mouvement par la sucession rapide de plusieurs images à la manière d'un film. Une fréquence de rafraîchissement de 30 images par seconde donne un rendu suffisamment fluide. Actuellement, l'image est tracée une seule fois. Il va falloir utiliser une boucle infinie modifiant le contenu de la fenêtre d'affichage 30 fois par seconde. Celà signifie que chaque itération de la boucle doit durer $\frac{1}{30}$-ème de seconde. La boucle While (signifiant "Tant que") permet de répéter des instructions tant qu'une certaine condition est vérifiée. Tant que je n'ai pas gravi la montagne, je grimpe.

Attention, si la condition n'est pas remplie, la boucle peut être infinie

Ce qui formellement correspond à ce schéma bloc :

En langage Python, celà s'écrira : while condition: instruction_1 instruction_2 .... Dans le jeu, la boucle d'affichage ne doit jamais s'arrêter... sauf quand on ferme la fenêtre, ce qui sera géré plus tard. Nous allons utiliser une boucle infinie : Une boucle est infinie si la condition est toujours vérifiée. Autrement dit : "tant que la condition est vraie, ça boucle !!". Ce qui peut s'écrire : while True: Instructions répétées sans fin Pour commencer, nous souhaitons mettre la balle en mouvement comme ceci :

Pour donner l'illusion du mouvement, nous devons ajouter une boucle infinie qui contient les instructions pour :

Afficher la balle
Déplacer la balle
Attendre 15 ms ($\simeq 60$ fpsfps = "frames per second" ou "images par seconde" dans la langue de Jul)
Rafraîchir le contenu de la fenêtre
Test d'arrêt pour sortir de la boucle et fermer Pygame

Entre chaque frame la balle doit se déplacer de dx suivant l’axe x et dy suivant l’axe y. Il faut donc rajouter dans la boucle infinie les instructions suivantes : x ← x+dx y ← y+dy Ce qui donne le code suivant : #importation de la librairie pygame import pygame,sys from pygame.draw import * from pygame.display import * # variables globales ##########################################################" size = width, height = 500, 500 # taille de la fenêtre d'affichage #attributs de la balle [dx,dy] = [2, 1]#vecteur de déplacement entre deux frames consécutives couleurFond = [255, 0, 0]#rouge couleurBalle= [0,0,255]#bleu [x,y]=[100,100] # position initiale de la balle r=20 #rayon de la balle #lancement des fonctionnalités de la librairie pygame pygame.init() #affichage d'une fenêtre de dessin de largeur 500 pixels et de hauteur 500 pixels screen = set_mode(size) #remplissage du fond par la couleur blanche screen.fill(couleurFond) while True: #afficher la balle : circle(screen, couleurBalle , [x,y], r, 0)# dessin d'un cercle : #déplacement de la balle : x=x+dx y=y+dy flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test d'arrêt du jeu for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme code source : pong1.0.py

Normalement, le résultat est le suivant :

Nous remarquons que la balle laisse la trace de toutes les positions successive au cours du mouvement. Pour effacer les traces, il faut redessiner la couleur du fond à chaque début de boucle avant d'afficher la balle. Ce qui donne le code suivant : #importation de la librairie pygame import pygame,sys from pygame.draw import * from pygame.display import * # variables globales ##########################################################" size = width, height = 500, 500 # taille de la fenêtre d'affichage #attributs de la balle [dx,dy] = [2, 1]#vecteur de déplacement entre deux frames consécutives couleurFond = [255, 0, 0]#rouge couleurBalle= [0,0,255]#bleu [x,y]=[100,100] # position initiale de la balle r=20 #rayon de la balle #lancement des fonctionnalités de la librairie pygame pygame.init() #affichage d'une fenêtre de dessin de largeur 500 pixels et de hauteur 500 pixels screen = set_mode(size) while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) #afficher la balle : circle(screen, couleurBalle , [x,y], r, 0)# dessin d'un cercle : #déplacement de la balle : x=x+dx y=y+dy flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test d'arrêt du jeu for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme code source : pong1.1.py Il existe des opérateurs d’assignation qui permettent de simplifier l’écriture x = x+dx et y=y+dy. Ils se résument dans le tableau suivant :

Attribution à $x$ d'une valeur $a$	Ajouter $a$ à une variable $x$	Retirer $a$ à une variable $x$	Multiplier une variable $x$ par $a$	Diviser une variable $x$ par $a$
`x=a`	`x+=a`	`x-=a`	`x*=a`	`x/=a`

La partie « faire avancer la balle » du code précédent peut se remplacer par : #déplacement de la balle : x+=dx y+=dy La balle ne rebondit pas encore sur les bords. C’est l’objet de la partie suivante… On souhaite simuler le rebond sur bord droit comme ceci :

Convention de déplacement suivant $x$

D’après l’orientation des axes (voir partie III-1) :

si la balle se déplace de gauche à droite, alors dx est positif
si la balle se déplace de droite à gauche, alors dx est négatif

Condition de rebond

L'algorithme est le suivant : si (la balle touche le bord) alors le sens de déplacement change de signe (sens opposé) fin si Mathématiquement, le changement de signe de dx revient à multiplier cette valeur par -1. On écrit : dx ← dx * (-1) En python, on peut l'écrire : dx = dx * (-1) ou encore : dx *= -1 ou plus simplement : dx = -dx Il reste à trouver à quel moment la balle touche le bord. En réalité, le bord de la balle ne pourra quasiment jamais être rigoureusement tangent au bord vertical droit de la fenêtre d’affichage. En effet, comme le déplacement dx est de quelques pixels :

à la frame d’avant la collision (instant $t_{n-1}$), le bord droit de la balle (point $M_{n-1}$) se situe à une distance $a$ du bord de la fenêtre d’affichage, telle que $0 \leq a \lt dx$
et à l’instant d’après la collision(instant $t_n$), le bord droit de la balle (point $M_n$) se situe à une distance $b$ du bord de la fenêtre d’affichage, telle que $0 \leq b \lt dx$.

Ce qui est résumé par l'image suivante :

Dans la figure suivante, on remarque qu’à l’instant $t_n$, lors de la collision, le point $M_n$ d’abscisses $x+r$ dépasse le bord droit de la fenêtre d’affichage représenté par la droite d’équation $x=width$.

On considère que la balle entre en collision avec le bord lorsque la condition suivante est vérifiée : $$(x+r >width)$$

Algorithme de la collision sur le bord vertical droit de la fenêtre d’affichage

L’algorithme de collision sur le bord droit est donc le suivant : si la condition (x+r >width) est vraie alors dx ← -dx fin si On modifie la boucle infinie pour introduire la condition de rebond à droite : while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) #afficher la balle : circle(screen, couleurBalle , [x,y], r, 0)# dessin d'un cercle : #déplacement de la balle : x=x+dx y=y+dy #test de collision bords droit if x+r > width: dx=-dx flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test d'arrêt du jeu for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme code source : pong1.2.py Dans le test « if », la condition $(x+r >width)$ est évaluée et renvoie un booléen qui peut prendre la valeur « Vrai » ou « Faux ». Si la condition évaluée renvoie « Vrai », alors un ensemble d’instructions est effectué. Ici, une seule instruction est réalisée : dx = -dx On souhaite ajouter le rebond sur le bord gauche :

En s'inspirant de la partie précédente, détecter et réaliser le rebond sur le bord vertical gauche.

Condition de rebond

Comme pour la collision sur le bord droit :

à la frame d’avant la collision (instant $t_{n-1}$), le bord gauche de la balle (point $N_{n-1}$) se situe à une distance $a$ du bord de la fenêtre d’affichage, telle que $0 \leq a \lt dx$,
et à l’instant d’après la collision (instant $t_n$), le bord gauche de la balle (point $N_n$) se situe à une distance $b$ du bord de la fenêtre d’affichage, telle que $0 \leq b \lt dx$.

Dans la figure suivante, on remarque qu’à l’instant $t_n$, lors de la collision, le point $N_n$ d’abscisses $x-r$ dépasse le bord droit de la fenêtre d’affichage représenté par la droite d’équation $x=width$.

On considère que la balle entre en collision avec le bord lorsque la condition suivante est vérifiée : $$(x-r \lt 0)$$

Algorithme de la collision sur le bord vertical droit de la fenêtre d’affichage

L’algorithme de collision sur le bord droit est donc le suivant : si la condition (x-r < 0) est vraie alors dx ← -dx fin si On modifie la boucle infinie pour introduire la condition de rebond à gauche : while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) #afficher la balle : circle(screen, couleurBalle , [x,y], r, 0)# dessin d'un cercle : #déplacement de la balle : x=x+dx y=y+dy #test de collision bord droit if x+r > width: dx=-d #test de collision bord gauche if x-r < 0: dx=-dx flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test d'arrêt du jeu for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme

code source : pong1.3.py

Si l'une des condition x+r > width OU x-r < 0 est remplie, elle réalisera la même instruction dx = -dx. On peut regrouper ces deux conditions en un seul test : si (x+r > width) OU (x-r < 0) alors dx ← -dx fin si Ce qui peut être traduit de la manière suivante en python : while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) #afficher la balle : circle(screen, couleurBalle , [x,y], r, 0)# dessin d'un cercle : #déplacement de la balle : x=x+dx y=y+dy #test de collision bords droite et gauche if (x+r > width) or (x-r < 0): dx=-dx flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test d'arrêt du jeu for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme code source : pong1.4.py On souhaite ajouter les rebonds sur les bords du haut et du bas :

En s'inspirant des deux parties précédentes, proposer une modification du code afin de réaliser les rebonds sur les bords horizontaux. Tout le raisonnement effectué pour la collision sur les bords verticaux se transpose intégralement par analogie sur les bords horizontaux. Dans les deux lignes de code correspondant à l’action « Test de collision suivant x », il suffit d’effectuer les changements de variable suivants : $$ \begin{array}{ccc} \text{Axe } x & & \text{Axe }y\\ \hline x & \leftrightarrow & y \\ dx & \leftrightarrow & dy \\ width & \leftrightarrow & height \end{array} $$ Le code Python est le suivant : while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) #afficher la balle : circle(screen, couleurBalle , [x,y], r, 0)# dessin d'un cercle : #déplacement de la balle : x=x+dx y=y+dy #test de collision bords droite et gauche if (x+r > width) or (x-r < 0): dx=-dx #test de collision bords haut et bas if (y+r > height) or (y-r < 0): dy=-dy flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test d'arrêt du jeu for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme code source : pong1.5.py Lors des différents tests conditionnels, nous avons introduits un certain nombre d’opérateurs de comparaison (relationnels) qui peuvent se résumer dans le tableau suivant :

supérieur	inférieur	supérieur ou égal	inférieur ou égal	égalité
`>`	`<`	`>=`	`<=`	`==`

Nous avons introduit aussi un certain nombre d’opérateurs arithmétique :

addition	soustraction	multiplication	division	modulo (reste de la division euclidienne)
`+`	`-`	`*`	`/`	`%`

Enfin nous avons introduits des opérateurs d’assignation :

Attribution à $x$ d'une valeur $a$	Ajouter $a$ à une variable $x$	Retirer $a$ à une variable $x$	Multiplier une variable $x$ par $a$	Diviser une variable $x$ par $a$
`x=a`	`x+=a`	`x-=a`	`x*=a`	`x/=a`

Proposer une modification du code précédent pour que :

la balle ne rebondisse plus
mais qu'elle soit "téléportée" sur le bord opposé (comme pour pacman)

Indice 1

Effacer la partie sur les rebonds

Indice 2

Utiliser l'opérateur modulo %

Indice 3

x "modulo" width
y "modulo" height L'animation voulue est celle-ci :

Le code Python est le suivant : while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) #afficher la balle : circle(screen, couleurBalle , [x,y], r, 0)# dessin d'un cercle : #déplacement de la balle : x=(x+dx)%width y=(y+dy)%height flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test d'arrêt du jeu for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme code source : pong-teleportation.py

Supposons qu’on souhaite maintenant faire évoluer plusieurs balles dans la fenêtre d’affichage. Chaque balle doit avoir un ensemble d’attributs et de variables associées qui lui est propre. Actuellement, chaque balle dispose de 6 attributs qui la caractérisent de manière unique. Si on décide de faire évoluer 10 balles, cela revient à manipuler 6*10 = 60 variables différentes. De même, chaque balle doit avoir des actions propres (afficher, avancer, test de collision). Il faudrait donc dupliquer ces actions pour chaque balle.

Une méthode grossière consiste à copier chaque partie du code réalisé pour la première balle et à l’adapter pour chaque balle. Cela conduirait à un code très long, répétitif et fastidieux à lire.

Une des solutions pour remédier à ce problème est :

l’utilisation de « fonctions d’action » génériques et réutilisables pour chaque balle
L'utilisation de listes de variables qui regroupent les attributs de toutes les balles en un seul objet.
l'utilisation d'une boucle « for » qui permet d’effectuer de manière itérative les mêmes tâches répétitives pour chaque balle.

Nous introduisons dans un premier temps la notion de fonctionpour la balle unique créée dans la partie précédente. Nous introduisons ensuite la notion de liste et de boucle for pour gérer les balles multiples. Lorsque la balle évolue dans la fenêtre d’affichage, pour chaque itération de la boucle while, on peut résumer notre programme par les actions élémentaires suivantes : Pour chaque itération de la boucle : Afficher la balle Avancer Tester la collision Fin pour

Il suffit pour cela d’incorporer les différentes lignes de codes écrites pour chaque actions dans la boucle while dans des fonctions indépendantes qui peuvent être appelées à n’importe quel instant.

De manière générale, une fonction peut avoir des paramètres en entrée et renvoyer des paramètres en sortie. Dans le cas présent, dans le cas d’une balle unique, on pourra définir les fonctions suivantes :

afficher() : permet de dessiner la balle
avancer() : permet de faire avancer la balle
testCollision() : teste la collision sur les bords

A priori, aucune de ces méthodes ne prend de paramètre en entrée et ne renvoie de paramètre en sortie. Nous avons déjà utilisé quelques fonctions prédéfinies, issues de la libraire Pygame comme :

fill(color) : donne une couleur color au fond
circle(screen, couleurBalle , [x,y], r, 0) : dessine un cercle sur l'écran à une position donnée, une couleur et un rayon.
etc.

Nous allons maintenant créer nos propres fonctions. Les trois fonctions doivent être déclarées avant leur exécution (donc au dessus de la boucle while). Par exemple, pour la fonction afficher(), nous procédons de la manière suivante :

On définit la méthode afficher() avec le mot clé def
On déplace les lignes de codes correspondant à la partie « affichage de la balle », à l’intérieur des accolades d’encapsulation de la fonction afficher().

On procède de la même manière pour les deux autres comme ceci :

Le code est le suivant : #importation de la librairie pygame import pygame,sys from pygame.draw import * from pygame.display import * # variables globales ##########################################################" size = width, height = 500, 500 # taille de la fenêtre d'affichage #attributs de la balle [dx,dy] = [3,1]#vecteur de déplacement entre deux frames consécutives couleurFond = [255, 0, 0,10]#rouge couleurBalle= [0,0,255]#bleu [x,y]=[100,100] # position initiale de la balle r=20 #rayon de la balle # Nos fonctions d'actions def afficher(): circle(screen, couleurBalle , [x,y], r, 0) def avancer(): x=x+dx y=y+dy def testCollision(): #bords verticaux if x+r > width or x-r < 0: dx=-dx #bords horizontaux if y+r > height or y-r < 0: dy=-dy #lancement des fonctionnalités de la librairie pygame pygame.init() #affichage d'une fenêtre de dessin de largeur 500 pixels et de hauteur 500 pixels screen = set_mode(size) while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) #afficher la balle : afficher() #déplacement de la balle : avancer() #test de collision testCollision() flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test d'arrêt du jeu for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme code source : pong0=1.6.1.py Si vous avez exécuté le programme précédent avec les trois nouvelles fonctions, vous avez rencontré l'erreur suivante :

UnboundLocalError: local variable 'x' referenced before assignment

C'est normal ! Celà signifie que la variable x est inconnue dans la fonction afficher().

En effet, les variables utilisées dans chaque fonction ont par défaut une portée locale. Celà signifie qu'elle doivent être déclarée et utilisée à l'intérieur de la fonction. Elle n'existent pas en dehors de cette fonction.

Si une variable, déclarée a l'extérieur, doit être utilisée et modifiée à l'intérieur de la fonction il est nécessaire de la déclarée comme variable globale en début de fonction comme ceci :

global x,y,dx,dy

Il suffit d'ajouter une ligne au début de chaque fonction pour que le programme fonctionne : # Nos fonctions d'actions def afficher(): global x,y,couleurBalle,r circle(screen, couleurBalle , [x,y], r, 0) def avancer(): global x,y,dx,dy x=x+dx y=y+dy def testCollision(): global x,y,width,height,r,dx,dy #bords verticaux if x+r > width or x-r < 0: dx=-dx #bords horizontaux if y+r > height or y-r < 0: dy=-dy code source : pong0=1.6.2.py Créer une fonction testEvenement() qui s'occupe de la détection des évènements clavier/souris et qui gère l'arrêt du jeu et la fermeture de la fenêtre.

Indice 1

Il s'agit de la partie du code qui commence par : for event in pygame.event.get():

Indice 2

Déclarer une fonction testEvenement() et y copier le code précédent

Indice 3

Ne pas oublier d'appeler la fonction dans la boucle while #importation de la librairie pygame import pygame,sys from pygame.draw import * from pygame.display import * # variables globales ##########################################################" size = width, height = 500, 500 # taille de la fenêtre d'affichage #attributs de la balle [dx,dy] = [3,1]#vecteur de déplacement entre deux frames consécutives couleurFond = [255, 0, 0,10]#rouge couleurBalle= [0,0,255]#bleu [x,y]=[100,100] # position initiale de la balle r=20 #rayon de la balle # Nos fonctions d'actions def afficher(): circle(screen, couleurBalle , [x,y], r, 0) def avancer(): x=x+dx y=y+dy def testCollision(): #bords verticaux if x+r > width or x-r < 0: dx=-dx #bords horizontaux if y+r > height or y-r < 0: dy=-dy def testEvenement(): for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme #lancement des fonctionnalités de la librairie pygame pygame.init() #affichage d'une fenêtre de dessin de largeur 500 pixels et de hauteur 500 pixels screen = set_mode(size) while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) #afficher la balle : afficher() #déplacement de la balle : avancer() #test de collision testCollision() flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test d'arrêt du jeu testEvenement() code source : pong0=1.6.3.py Nous allons maintenant faire évoluer le programme de sorte qu’il puisse gérer un nombre N de balles. Pour cela, il est nécessaire d’introduite la notion de listes. Nous allons tout d’abord créer, puis manipuler 3 balles dont la gestion sera effectuée par l’utilisation de listes. Nous créerons ensuite un grand nombre de balles et introduiront la boucle itérative « for » pour pouvoir les manipuler. Comme nous l’avons vu précédemment, chaque balle dispose de 6 attributs qui la caractérisent de manière unique. Si on décide de faire évoluer N=10 balles, cela revient à manipuler 6*10 = 60 variables différentes, ce qui est très lourd.

La solution est de définir une liste de valeurs pour chaque attribut de la balle. Si nous manipulons N balles, chaque liste comportera N valeurs de même type. Chaque liste est alors considéré comme une variable unique qui permet de manipuler N valeurs.

Quel que soit le nombre N de balles, l’utilisation des listes permet alors de ne manipuler que 6 variables correspondant à chaque attribut d’une balle.

Pour découvrir les listes, nous allons utiliser la console de l'IDE :

Dans la console, créer une liste L de 3 valeurs (qui pourrait représenter une couleur RVB) >>> L = [20,10,15] Reprenons l'exemple précédent (L étant toujours en mémoire dans la console) : Il est possible d'accéder à un élément d'une liste en précisant son indice entre crochets []. Taper la commande suivante : >>> L[0] Elle doit renvoyer 20 car le premier élément de la liste est repéré par l'indice 0 Il est possible de modifier un élément d'une liste avec une simple affectation. Taper la commande suivante : >>> L[0] = "pong is the best game !!" Afficher la liste LElle vaut maintenant ['pong is the best game!!', 10, 15]. Les listes en Python peuvent être composées d'objets de types différents. Ici L contient une chaîne de caractère et deux entiers.

Commande	Commentaire
`len(L)`	La fonction `len` renvoie la longueur de la liste `L`
`L.append(val)`	ajouter une valeur `val` après le dernier élément de la liste
`L.insert(i,val)`	ajouter une valeur `val` après le i-ème élément de la liste
`L+=L0`	concaténer la liste `L0` à la liste `L`
`del(L[i])`	retirer le i-ème élément de la liste `L`
`a=L.pop()`	retirer le dernier élément de la liste `L` et le stocke dans `a` .
`L.remove(val)`	retirer la première occurence d'un élément ayant la même valeur que `val` .
`L.reverse()`	renverse l'ordre
`L.sort()`	réordonne les éléments de la liste
`val in L`	renvoie `True` si un élément de la liste vaut `val` , `False` sinon.
`val not in L`	renvoie `False` si un élément de la liste vaut `val` , `True` sinon.

Pour être sûr d'avoir bien compris, on peut s'entraîner : Dans la console, utiliser les commandes précédentes pour : Afficher la longueur de L Ajouter la valeur 42 à la fin de la liste Ajouter la valeur 3.141592 en 2ème position de la liste (attention le "premier" est L[0]) Retirer le 3-ème élément de la liste >>> len(L) >>> L.append(42) >>> L.insert(1,3.141592) >>> del(L[2]) ou L.remove(3.141592) On va initialiser (avec des valeurs quelconques) des listes représentant les différents attributs de la balle :

dx : listes des déplacements horizontaux entre deux frames
dy : liste des déplacement verticaux entre deux frames
x : liste des abscisses des positions
y : liste des ordonnées des positions
r : liste des rayons des balles

Pour commencer, on donne la même couleur à chaque balle

Initialisation des listes

On donne 3 valeurs quelconques pour chaque attribut : dx = [3,2,5] #vecteur de déplacement entre deux frames consécutives dy = [-1, 1,3] x = [100, 250, 50] y = [30, 400, 100] r = [20, 25, 15]

Modification des fonctions d'action

Il faut préciser à chaque fonction l'indice i de la balle sur laquelle elle s'applique. On ajoute un argument i en entrée de la fonction : def afficher(i): global x,y,couleurBalle,r circle(screen, couleurBalle , [x[i],y[i]], r[i], 0) def avancer(i): global x,y,dx,dy x[i]=x[i]+dx[i] y[i]=y[i]+dy[i] def testCollision(i): global x,y,width,height,r,dx,dy #bords verticaux if x[i]+r[i] > width or x[i]-r[i] < 0: dx[i]=-dx[i] #bords horizontaux if y[i]+r[i] > height or y[i]-r[i] < 0: dy[i]=-dy[i]

Appels des fonctions d'action dans la boucle infinie

while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) #afficher la balle : afficher(0) afficher(1) afficher(2) #déplacement de la balle : avancer(0) avancer(1) avancer(2) #test de collision testCollision(0) testCollision(1) testCollision(2) flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test evenements, arrêt de jeu : testEvenements()

Code final

Le code final est le suivant : #importation de la librairie pygame import pygame,sys from pygame.draw import * from pygame.display import * # variables globales ##########################################################" size = width, height = 500, 500 # taille de la fenêtre d'affichage couleurFond = [255, 0, 0,10]#rouge couleurBalle= [0,0,255]#les balles ont la même couleur #balle dx = [3,2,5] #vecteur de déplacement entre deux frames consécutives dy = [-1, 1,3] x = [100, 250, 50] y = [30, 400, 100] r = [20, 25, 15] # Nos fonctions d'actions def afficher(i): global x,y,couleurBalle,r circle(screen, couleurBalle , [x[i],y[i]], r[i], 0) def avancer(i): global x,y,dx,dy x[i]=x[i]+dx[i] y[i]=y[i]+dy[i] def testCollision(i): global x,y,width,height,r,dx,dy #bords verticaux if x[i]+r[i] > width or x[i]-r[i] < 0: dx[i]=-dx[i] #bords horizontaux if y[i]+r[i] > height or y[i]-r[i] < 0: dy[i]=-dy[i] def testEvenements(): for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme #lancement des fonctionnalités de la librairie pygame pygame.init() #affichage d'une fenêtre de dessin de largeur 500 pixels et de hauteur 500 pixels screen = set_mode(size) while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) #afficher la balle : afficher(0) afficher(1) afficher(2) #déplacement de la balle : avancer(0) avancer(1) avancer(2) #test de collision testCollision(0) testCollision(1) testCollision(2) flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test evenements, arrêt de jeu : testEvenements() code source : pong2.0.py Modifier le code précédent pour donner une couleur différente à chaque balle en utilisant une liste de couleurs.

Indice 1

Vous pouvez déclarer 3 variables couleurBalle1, couleurBalle2 et couleurBalle3

Indice 2

Regrouper les 3 variables de couleurs dans une liste couleurBalle (une liste contenant des listes !)

Indice 3

Dans la fonction afficher(i), utiliser la bonne couleur couleurBalle1[i] #importation de la librairie pygame import pygame,sys from pygame.draw import * from pygame.display import * # variables globales ##########################################################" size = width, height = 500, 500 # taille de la fenêtre d'affichage couleurFond = [255, 0, 0,10]#rouge #balle dx = [3,2,5] #vecteur de déplacement entre deux frames consécutives dy = [-1, 1,3] x = [100, 250, 50] y = [30, 400, 100] r = [20, 25, 15] #tableau de couleur couleurBalle1= [0,0,255]#les balles ont la même couleur couleurBalle2= [255,0,255]#les balles ont la même couleur couleurBalle3= [255,255,255]#les balles ont la même couleur couleurBalle = [couleurBalle1,couleurBalle2,couleurBalle3] # Nos fonctions d'actions def afficher(i): global x,y,couleurBalle,r circle(screen, couleurBalle[i] , [x[i],y[i]], r[i], 0) def avancer(i): global x,y,dx,dy x[i]=x[i]+dx[i] y[i]=y[i]+dy[i] def testCollision(i): global x,y,width,height,r,dx,dy #bords verticaux if x[i]+r[i] > width or x[i]-r[i] < 0: dx[i]=-dx[i] #bords horizontaux if y[i]+r[i] > height or y[i]-r[i] < 0: dy[i]=-dy[i] def testEvenements(): for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme #lancement des fonctionnalités de la librairie pygame pygame.init() #affichage d'une fenêtre de dessin de largeur 500 pixels et de hauteur 500 pixels screen = set_mode(size) while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) #afficher la balle : afficher(0) afficher(1) afficher(2) #déplacement de la balle : avancer(0) avancer(1) avancer(2) #test de collision testCollision(0) testCollision(1) testCollision(2) flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test evenements, arrêt de jeu : testEvenements() code source : pong2.1.py Nous souhaitons pouvoir afficher un nombre quelconque de balles. On propose une méthode plus générale pour déclarer les listes qui s'adaptera beaucoup mieux à la gestion d'un grand nombre de balles.

On déclare une liste vide
On ajoute chaque élément de la liste l'un après l'autre avec la méthode append vue précédemment

Cela permettra de plus d'ajouter ou de retirer des balles pendant le jeu. Appliquer la méthode générale pour modifier dans le code précédent la déclaration des listes dx, dy, x, y et r.

Indice 1

Affection d'une liste vide : dx=[]

Indice 2

Ajouter un élément à la liste : dx.append(valeur)

Indice 3

Ajouter un autre élément à la liste : dx.append(nouvelleValeur) # déclaration des listes vides des attributs des balles dx = [] #vecteur de déplacement entre deux frames consécutives dy = [] x = [] y = [] r = [] #initialisation des listes dx.append(3) dx.append(2) dx.append(5) dy.append(-1) dy.append(1) dy.append(3) x.append(100) x.append(250) x.append(50) y.append(100) y.append(400) y.append(100) r.append(20) r.append(25) r.append(15) code source : pong2.2.py Cette méthode semble pour l'instant plus longue que la précédente, mais s'adaptera parfaitement à un nombre de balles plus important. En prévision d'un nombre de balles important, on souhaite ne pas avoir à gérer les valeurs de tous les attributs à la main. Nous proposons de les générer aléatoirement. Nous proposons de faire appel à la librairie python randomrandom signifie aléatoire en anglais On va tirer au hasard des nombres entiers. Pour cela on n'aura besoin que de la fonction randint() de la librairie random. On l'importe de la manière suivante : from random import randint Pour tirer un nombre au hasard entre valMin et valMax (compris), on utilise : randint(valMin, valMax) Appliquer cette méthode pour donner des valeurs aléatoires aux éléments des listes dx, dy, x, y, r ET couleurBalle

Indice 1

Définir des variables rMin, rMax, dxMin, dxMax, dyMin, dyMax permettant de borner les valeurs aléatoires.

Indice 2

Les balles peuvent se déplacer vers la gauche... dxMin doit être négatif.

Indice 3

dx.append(randint(dxMin,dxMax))

Indice 4

Attention à ne pas créer une balle qui sort du cadre : x.append(randint(rmax,width-rmax))

Indice 5

Les valeurs RVB des couleurs sont comprises entre 0 et 255 #importation de la librairie pygame import pygame,sys from pygame.draw import * from pygame.display import * from random import randint # variables globales ##########################################################" size = width, height = 500, 500 # taille de la fenêtre d'affichage couleurFond = [255, 0, 0,10]#rouge couleurBalle1= [0,0,255]#les balles ont la même couleur dxMin=-5 dxMax=5 dyMin=-5 dyMax=5 rmax = 40 rmin = 10 # déclaration des listes vides des attributs des balles dx = [] #vecteur de déplacement entre deux frames consécutives dy = [] x = [] y = [] r = [] #initialisation des listes dx.append(randint(dxMin,dxMax)) dx.append(randint(dxMin,dxMax)) dx.append(randint(dxMin,dxMax)) dy.append(randint(dyMin,dyMax)) dy.append(randint(dyMin,dyMax)) dy.append(randint(dyMin,dyMax)) x.append(randint(rmax,width-rmax)) x.append(randint(rmax,width-rmax)) x.append(randint(rmax,width-rmax)) y.append(randint(rmax,height-rmax)) y.append(randint(rmax,height-rmax)) y.append(randint(rmax,height-rmax)) r.append(randint(rmin,rmax)) r.append(randint(rmin,rmax)) r.append(randint(rmin,rmax)) #tableau de couleur (dégradé de bleu) couleurBalle1= [0,0,randint(0,255)] couleurBalle2= [0,0,randint(0,255)] couleurBalle3= [0,0,randint(0,255)] couleurBalle = [couleurBalle1,couleurBalle2,couleurBalle3] # Nos fonctions d'actions def afficher(i): global x,y,couleurBalle,r circle(screen, couleurBalle[i] , [x[i],y[i]], r[i], 0) def avancer(i): global x,y,dx,dy x[i]=x[i]+dx[i] y[i]=y[i]+dy[i] def testCollision(i): global x,y,width,height,r,dx,dy #bords verticaux if x[i]+r[i] > width or x[i]-r[i] < 0: dx[i]=-dx[i] #bords horizontaux if y[i]+r[i] > height or y[i]-r[i] < 0: dy[i]=-dy[i] def testEvenements(): for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme #lancement des fonctionnalités de la librairie pygame pygame.init() #affichage d'une fenêtre de dessin de largeur 500 pixels et de hauteur 500 pixels screen = set_mode(size) while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) #afficher la balle : afficher(0) afficher(1) afficher(2) #déplacement de la balle : avancer(0) avancer(1) avancer(2) #test de collision testCollision(0) testCollision(1) testCollision(2) flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test evenements, arrêt de jeu : testEvenements() code source : pong2.3.py La boucle itérative « for » permets l’exécution d’un bloc d’instructions un certain nombre de fois, en faisant généralement varier un indice entre une valeur initiale et une valeur finale avec un pas d’incrémentation. Lorsque le nombre N de balle est grand, il ne sera très fastidieux déclarer et d'initialiser "à la main" chacun des 6 paramètres de chaque balle. En effet, supposons que nous créons 30 balles, le nombre de paramètres à initialiser est 30*6=180. La solution est d'utiliser une boucle itérative for qui permet l’exécution d’un bloc d’instructions un certain nombre de fois, en faisant généralement varier un indice entre une valeur initiale et une valeur finale avec un pas d’incrémentation for i in range(0,5): print("l'indice vaut : ", i ) Ce code affichera : l'indice vaut : 0 l'indice vaut : 1 l'indice vaut : 2 l'indice vaut : 3 l'indice vaut : 4 L'indice i varie d'une valeur initiale i=0 à une valeur finale i=4 et non 5 !!. Une petite précision concernant range() Si on exécute dans la console list(range(0,5)), on obtient : [0, 1, 2, 3, 4] Cette commande crée une liste de 5 éléments de 0 à 4 avec un pas de 1. Tapez dans la console les commandes suivantes pour comprendre le fonctionnement de range. list(range(2,5)) list(range(0,100,10)) list(range(10,0,-1)) Quel est le rôle du troisième argument ?

Le troisième argument représente le pas d'incrémentation de la liste
La dernière valeur n'est pas atteinte
Le pas peut être négatif
Le pas ne peut être qu'entier

On comprend donc que la boucle for peut itérer sur n'importe quelle liste : L=["Marseille","New York","Alger","Tokyo","Dakar"] for ville in L: print("J'adore la ville de ", ville ) Ce code affichera : J'adore la ville de Marseille J'adore la ville de New York J'adore la ville de Alger J'adore la ville de Tokyo J'adore la ville de Dakar Il est maintenant possible d’appliquer la boucle « for » pour simplifier l’écriture des taches itératives :

Pour l’initialisation des différents tableaux dans le setup() : d, x, y, dx, dy, c.
Pour l’appel aux différentes méthodes appliquées à chaque balle : affiche(i), avancer(i) et testCollision(i).

Modifier le code du pong précédent pour gérer les instruction répétitives écrites à la main à l'aide de boucles for. #importation de la librairie pygame import pygame,sys from pygame.draw import * from pygame.display import * from random import randint # variables globales ##########################################################" size = width, height = 500, 500 # taille de la fenêtre d'affichage couleurFond = [255, 0, 0,10]#rouge couleurBalle1= [0,0,255]#les balles ont la même couleur rmax = 40 rmin = 10 # déclaration des listes vides des attributs des balles dx = [] #vecteur de déplacement entre deux frames consécutives dy = [] x = [] y = [] r = [] couleurBalle = [] #initialisation des listes for i in range(0,3): dx.append(randint(-5,5)) dy.append(randint(-5,5)) x.append(randint(width-rmax,height-rmax)) y.append(randint(width-rmax,height-rmax)) r.append(randint(rmin,rmax)) #tableau de couleur (dégradé de bleu) couleurBalle.append([0,0,randint(0,255)]) # Nos fonctions d'actions def afficher(i): global x,y,couleurBalle,r circle(screen, couleurBalle[i] , [x[i],y[i]], r[i], 0) def avancer(i): global x,y,dx,dy x[i]=x[i]+dx[i] y[i]=y[i]+dy[i] def testCollision(i): global x,y,width,height,r,dx,dy #bords verticaux if x[i]+r[i] > width or x[i]-r[i] < 0: dx[i]=-dx[i] #bords horizontaux if y[i]+r[i] > height or y[i]-r[i] < 0: dy[i]=-dy[i] def testEvenements(): for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme #lancement des fonctionnalités de la librairie pygame pygame.init() #affichage d'une fenêtre de dessin de largeur 500 pixels et de hauteur 500 pixels screen = set_mode(size) while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) for i in range(0,3): #afficher la balle : afficher(i) #déplacement de la balle : avancer(i) #test de collision testCollision(i) flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test evenements, arrêt de jeu : testEvenements() code source : pong2.4.py L'intérêt des boucles for est que maintenant, la structure du programme pour afficher 1, 3, 10 ou 30 balles est la même. Introduire une nouvelle variable globale N qui représente le nombre de balles. Modifier le code précédent pour afficher N balles. Testez différentes valeurs. #importation de la librairie pygame import pygame,sys from pygame.draw import * from pygame.display import * from random import randint # variables globales ##########################################################" size = width, height = 500, 500 # taille de la fenêtre d'affichage couleurFond = [255, 0, 0,10]#rouge couleurBalle1= [0,0,255]#les balles ont la même couleur rmax = 40 rmin = 10 N = 10 #nb de balles # déclaration des listes vides des attributs des balles dx = [] #vecteur de déplacement entre deux frames consécutives dy = [] x = [] y = [] r = [] couleurBalle = [] #initialisation des listes for i in range(0,N): dx.append(randint(-5,5)) dy.append(randint(-5,5)) x.append(randint(width-rmax,height-rmax)) y.append(randint(width-rmax,height-rmax)) r.append(randint(rmin,rmax)) #tableau de couleur (dégradé de bleu) couleurBalle.append([0,0,randint(0,255)]) # Nos fonctions d'actions def afficher(i): global x,y,couleurBalle,r circle(screen, couleurBalle[i] , [x[i],y[i]], r[i], 0) def avancer(i): global x,y,dx,dy x[i]=x[i]+dx[i] y[i]=y[i]+dy[i] def testCollision(i): global x,y,width,height,r,dx,dy #bords verticaux if x[i]+r[i] > width or x[i]-r[i] < 0: dx[i]=-dx[i] #bords horizontaux if y[i]+r[i] > height or y[i]-r[i] < 0: dy[i]=-dy[i] def testEvenements(): for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme #lancement des fonctionnalités de la librairie pygame pygame.init() #affichage d'une fenêtre de dessin de largeur 500 pixels et de hauteur 500 pixels screen = set_mode(size) while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) for i in range(0,N): #afficher la balle : afficher(i) #déplacement de la balle : avancer(i) #test de collision testCollision(i) flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test evenements, arrêt de jeu : testEvenements() code source : pong2.5.py

La raquette est positionnée à gauche par convention. Son abscisse est donc fixe, et son ordonnée sera commandée par des interaction clavier. On ajoute donc plusieurs variables pour représenter la raquette :

rx = 20 : abscisse de la raquette
ry = height/2 : ordonnée de la raquette (positionnée au milieu initialement mais qui variera)
dry = 5 : déplacement vertical de la raquette
rh = 100 : hauteur de la raquette
rw = 20 : largeur de la raquette
rcolor = [255, 255, 255] : couleur de la raquette (ici blanc)

Pour représenter graphique la raquette, il suffit de dessiner un rectangle. On utilise la methode pygame.draw.rect() qui s'utilise de la manière suivante : rect(screen, rcolor, [rx, ry, rw, rh]) Afficher une raquette blanche dans la fenêtre du jeu avec les caractéristiques précédentes On ajoute les variables et une fonction afficher_raquette() : #importation de la librairie pygame import pygame,sys from pygame.draw import * from pygame.display import * from random import randint # variables globales ##########################################################" size = width, height = 500, 500 # taille de la fenêtre d'affichage couleurFond = [255, 0, 0,10]#rouge couleurBalle1= [0,0,255]#les balles ont la même couleur rmax = 40 rmin = 10 N = 10 #nb de balles # déclaration des listes vides des attributs des balles dx = [] #vecteur de déplacement entre deux frames consécutives dy = [] x = [] y = [] r = [] couleurBalle = [] #déclaration des attributs de la raquette rx=20 ry=height/2 dry=5 rh=100 rw=20 rcolor=[255,255,255] #initialisation des listes for i in range(0,N): dx.append(randint(-5,5)) dy.append(randint(-5,5)) x.append(randint(width-rmax,height-rmax)) y.append(randint(width-rmax,height-rmax)) r.append(randint(rmin,rmax)) #tableau de couleur (dégradé de bleu) couleurBalle.append([0,0,randint(0,255)]) # Nos fonctions d'actions def afficher(i): global x,y,couleurBalle,r circle(screen, couleurBalle[i] , [x[i],y[i]], r[i], 0) def avancer(i): global x,y,dx,dy x[i]=x[i]+dx[i] y[i]=y[i]+dy[i] def testCollision(i): global x,y,width,height,r,dx,dy #bords verticaux if x[i]+r[i] > width or x[i]-r[i] < 0: dx[i]=-dx[i] #bords horizontaux if y[i]+r[i] > height or y[i]-r[i] < 0: dy[i]=-dy[i] def testEvenements(): for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme #fonctions de la raquette def afficher_raquette(): rect(screen, rcolor, [rx, ry, rw, rh]) #lancement des fonctionnalités de la librairie pygame pygame.init() #affichage d'une fenêtre de dessin de largeur 500 pixels et de hauteur 500 pixels screen = set_mode(size) while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) for i in range(0,N): #afficher la balle : afficher(i) #déplacement de la balle : avancer(i) #test de collision testCollision(i) afficher_raquette() flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test evenements, arrêt de jeu : testEvenements() code source : pong3.0.py On a besoin d'interagir avec le clavier (flèche du haut et flèche du bas) pour commander la position de la raquette. On va importer les importer les attributs de pygame au début du programme en ajoutant la ligne suivante en entête du programme : from pygame.locals import * Cela nous permettra de taper KEYDOWN ou QUIT ou K_UP, etc. au lieu de pygame.KEYDOWN ou pygame.QUIT ou pygame.K_UP, etc. L'appui sur une touche est considéré par pygame comme un nouvel évènement. Nous avons déjà créé la fonction testEvenements() qui gère l'évènement "quitter la fenêtre de jeu". Si l'évènement vaut pygame.KEYDOWN, c'est que une touche (n'importe laquelle) a été appuyée. On modifie maintenant la fonction testEvenement() comme ceci : def testEvenements(): for event in pygame.event.get(): if event.type == QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme if event.type == KEYDOWN: print("Une touche vient d'être pressée") Pour l'instant appuyer sur une touche ne produit aucun résultat visible sur la raquette, et ne fait qu'afficher un message dans la console. La prochaine étape est de détecter quelle touche a été pressée.

La méthode pygame.key.get_pressed() renvoie une liste représentant l'état de chaque touche du clavier : 1 pour appuyée, 0 pour relâchée.
L'indice de la touche "flèche du haut" dans le tableau pygame.key.get_pressed() est 273, celui de "flèche du bas" est 274
Pour ne pas avoir à retenir ces indices, pygame a défini des constantes : K_UP vaut 273 et K_DOWN vaut 274.
Les noms de toutes les constantes associées à chaque touche sont disponibles sur le site de pygame.

On donne la fonction bouger_raquette() suivante : def bouger_raquette(): global ry, dry if pygame.key.get_pressed()[K_UP]: #déplacer vers le haut .... if pygame.key.get_pressed()[K_DOWN]: #déplacer vers le bas .... Compléter le code de la fonction bouge_raquette() afin de réaliser le déplacement souhaité. Appeler cette fonction lorsqu'un évènement KEYDOWN est détecté def testEvenements(): for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme if event.type == KEYDOWN: bouger_raquette() def bouger_raquette(): global ry, dry if pygame.key.get_pressed()[K_UP]: ry-=dry if pygame.key.get_pressed()[K_DOWN]: ry+=dry Vous avez certainement remarqué qu'il faut appuyer plusieurs fois sur les touches bas et haut pour déplacer le raquette. Maintenir une touche appuyée ne déclenche qu'un seul évènement clavier. Pour obliger pygame à vérifier les évenements claviers toutes les 10ms (par exemple), il faut ajouter la ligne suivante juste après avoir initialisé pygame : #lancement des fonctionnalités de la librairie pygame pygame.init() #vérifier les interactions clavier toutes les 10ms pygame.key.set_repeat(10, 10) On obtient donc le code entier suivant : #importation de la librairie pygame from pygame.locals import * import pygame,sys from pygame.draw import * from pygame.display import * from random import randint # variables globales ##########################################################" size = width, height = 500, 500 # taille de la fenêtre d'affichage couleurFond = [255, 0, 0,10]#rouge couleurBalle1= [0,0,255]#les balles ont la même couleur rmax = 40 rmin = 10 N = 10 #nb de balles # déclaration des listes vides des attributs des balles dx = [] #vecteur de déplacement entre deux frames consécutives dy = [] x = [] y = [] r = [] couleurBalle = [] #déclaration des attributs de la raquette rx=20 ry=height/2 dry=2 rh=100 rw=20 rcolor=[255,255,255] #initialisation des listes for i in range(0,N): dx.append(randint(-5,5)) dy.append(randint(-5,5)) x.append(randint(width-rmax,height-rmax)) y.append(randint(width-rmax,height-rmax)) r.append(randint(rmin,rmax)) #tableau de couleur (dégradé de bleu) couleurBalle.append([0,0,randint(0,255)]) # Nos fonctions d'actions def afficher(i): global x,y,couleurBalle,r circle(screen, couleurBalle[i] , [x[i],y[i]], r[i], 0) def avancer(i): global x,y,dx,dy x[i]=x[i]+dx[i] y[i]=y[i]+dy[i] def testCollision(i): global x,y,width,height,r,dx,dy #bords verticaux if x[i]+r[i] > width or x[i]-r[i] < 0: dx[i]=-dx[i] #bords horizontaux if y[i]+r[i] > height or y[i]-r[i] < 0: dy[i]=-dy[i] def testEvenements(): for event in pygame.event.get(): if event.type == QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme if event.type == KEYDOWN: bouger_raquette() #fonctions de la raquette def afficher_raquette(): rect(screen, rcolor, [rx, ry, rw, rh]) def bouger_raquette(): global ry, dry if pygame.key.get_pressed()[K_UP]: ry-=dry if pygame.key.get_pressed()[K_DOWN]: ry+=dry #lancement des fonctionnalités de la librairie pygame pygame.init() #vérifier les interactions clavier toutes les 10ms pygame.key.set_repeat(10, 10) #affichage d'une fenêtre de dessin de largeur 500 pixels et de hauteur 500 pixels screen = set_mode(size) while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) for i in range(0,N): #afficher la balle : afficher(i) #déplacement de la balle : avancer(i) #test de collision testCollision(i) afficher_raquette() flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test evenements, arrêt de jeu : testEvenements() code source : pong3.1.py Nous proposons ici de modifier la fonction testCollision(i) qui teste la collision de la ballei avec les bords. Il est nécessaire de faire un schéma pour bien comprendre la situation :

Pour qu’il y ait collision entre la balle et la raquette, il faut que le point N de la ième balle soit tangent ou traverse légèrement le bord droit de la raquette. Les conditions suivantes doivent simultanément être respectées :

Suivant x : l’abscisse du point N doit être inférieure à celle du point A et B, soit, $$ x – r \lt rx + rw $$
Suivant y : l’ordonnée du point N doit être comprise entre l’ordonnée du point A et l’ordonnée du point B, soit, $$ ry \lt y \lt ry + rh . $$

Algorithmiquement, il faut donc que la condition $ry \lt y$ et que la condition $ y \lt ry + rh$ et que la condition $x – r \lt rx+rw$ soient vérifiées simultanément. En programmation Python, le « et logique » s’écrit and. Pour la i-ème balle, cette condition logique s'écrit donc : (ry < y[i]) and (y[i] < (ry + rh)) and ((x[i] – r[i]) < (rx+rw)) Modifier la fonction testCollision pour que le bord droit de la raquette se comporte comporte comme le bord droit de l'écran et fasse rebondir la balle. def testCollision(i): global x,y,width,height,r,dx,dy,ry,rh,rw #bords verticaux if x[i]+r[i] > width or x[i]-r[i] < 0: dx[i]=-dx[i] #bords horizontaux if y[i]+r[i] > height or y[i]-r[i] < 0: dy[i]=-dy[i] #rebond raquette : if (ry < y[i]) and (y[i] < (ry + rh)) and ((x[i] - r[i]) < (rx + rw)): dx[i]=-dx[i] Ce qui produit le programme final suivant : #importation de la librairie pygame from pygame.locals import * import pygame,sys from pygame.draw import * from pygame.display import * from random import randint # variables globales ##########################################################" size = width, height = 500, 500 # taille de la fenêtre d'affichage couleurFond = [255, 0, 0,10]#rouge couleurBalle1= [0,0,255]#les balles ont la même couleur rmax = 40 rmin = 10 N = 10 #nb de balles # déclaration des listes vides des attributs des balles dx = [] #vecteur de déplacement entre deux frames consécutives dy = [] x = [] y = [] r = [] couleurBalle = [] #déclaration des attributs de la raquette rx=20 ry=height/2 dry=2 rh=100 rw=20 rcolor=[255,255,255] #initialisation des listes for i in range(0,N): dx.append(randint(-5,5)) dy.append(randint(-5,5)) x.append(randint(width-rmax,height-rmax)) y.append(randint(width-rmax,height-rmax)) r.append(randint(rmin,rmax)) #tableau de couleur (dégradé de bleu) couleurBalle.append([0,0,randint(0,255)]) # Nos fonctions d'actions def afficher(i): global x,y,couleurBalle,r circle(screen, couleurBalle[i] , [x[i],y[i]], r[i], 0) def avancer(i): global x,y,dx,dy x[i]=x[i]+dx[i] y[i]=y[i]+dy[i] def testCollision(i): global x,y,width,height,r,dx,dy,ry,rh,rw #bords verticaux if x[i]+r[i] > width or x[i]-r[i] 0: dx[i]=-dx[i] #bords horizontaux if y[i]+r[i] > height or y[i]-r[i] < 0: dy[i]=-dy[i] if (ry < y[i]) and (y[i] < (ry + rh)) and ((x[i] - r[i]) < (rx + rw)): dx[i]=-dx[i] def testEvenements(): for event in pygame.event.get(): if event.type == pygame.QUIT:#si clique sur la croix quitter pygame.display.quit()#ferme la fenêtre sys.exit()#arrête le programme if event.type == KEYDOWN: bouger_raquette() #fonctions de la raquette def afficher_raquette(): rect(screen, rcolor, [rx, ry, rw, rh]) def bouger_raquette(): global ry, dry if pygame.key.get_pressed()[K_UP]: ry-=dry if pygame.key.get_pressed()[K_DOWN]: ry+=dry #lancement des fonctionnalités de la librairie pygame pygame.init() #vérifier les interactions clavier toutes les 10ms pygame.key.set_repeat(10, 10) #affichage d'une fenêtre de dessin de largeur 500 pixels et de hauteur 500 pixels screen = set_mode(size) while True: #remplissage du fond par la couleur blanche screen.fill(couleurFond) for i in range(0,N): #afficher la balle : afficher(i) #déplacement de la balle : avancer(i) #test de collision testCollision(i) afficher_raquette() flip()#activer le rendu graphique pygame.time.delay(15)#une image toute les 15 ms #test evenements, arrêt de jeu : testEvenements() code source : pong3.1.py

Le pong réalisé est ainsi jouable. Il ne s'agit bien sûr pas d'un jeu finalisé. Il nous aura permis d'introduire toutes les notions fondamentales de programmation python ainsi que des morceaux de code réutilisables pour d'autres types de projets.

Il est possible de poursuivre et d'améliorer le jeu :

La programmation objet est sans doute plus adapter pour un jeu vidéo. Il serait mieux de définir la raquette et les balles comme des instances de classes. Les variables globales ne sont pas forcément une manière très "propre" de réaliser un jeu, et la programmation objet permettrait d'y remédier en utilisant des attributs de classe.
On peut aliorer le jeu en prévoyant des collisions sur les quatre bords de la raquette. La classe pygame.Rect est un outil que nous n'avons pas utilisé mais qui est plus adapté aux problèmes de collision.
Il serait plus intéressant de prévoir un scénario de jeu complet avec un autre joueur, une possibilité de perdre, un score, des sons, etc.
Enfin, d'autres types de jeu 2D basiques (plateforme, puzzle, jeux de rôles, narration interactive, ...) sont envisageables comme projets pour les élèves/étudiants avec tous les outils découverts dans ce tutoriel.