¶ Présentation
¶ Principe du jeu
L'objectif de cette activité est de construire une version simple du jeu du Pong.
Le principe du jeu est simple :
- Deux joueurs échangent des tirs sur une surface en deux dimensions.
- Deux murs sont présents en haut et en bas de la fenêtre, où la balle peut rebondir.
- La balle doit rebondir sur les raquettes représentées sous la forme de deux rectangles.
La partie s'arrête lorsque que la balle sort du cadre.
¶ Programmation et module Pyxel
Pour concevoir cette application, nous utiliserons le paradigme de la programmation orientée objet ainsi que le module pyxel.
Le module pyxel est un moteur graphique qui permet de concevoir des jeux en 2D très rapidement dans un style rétro gaming.
Pour importer ce module, il suffit d'utiliser la ligne suivante :
import pyxel
Les différentes classes et méthodes seront au cours de l'activité. Vous pouvez tout de même retrouver la documentation sur le Gitlab officiel.
¶ Étape 1 - La classe Jeu
Pour commencer, nous allons construire la classe Jeu. Cette classe va être la classe principale qui va gérer le déroulement complet du jeu.
Pour concevoir une application à l'aide de pyxel, il faudra respecter la structure de base présente dans la documentation.
Voici la structure minimale présente au sein de la classe Jeu.
import pyxel
class Jeu:
def __init__(self):
# Constructeur de la classe
self.longueur = 300
self.largeur = 300
pyxel.init(self.longueur, self.largeur, 'Ping-Pong')
def calculer(self):
# Contient tous les calculs nécessaires au déroulement du jeu
pass
def afficher(self):
# Contient les instructions permettant de dessiner sur la fenêtre.
pyxel.cls(0)
pass
def start(self):
# Méthode permettant de lancer le jeu
pyxel.run(self.calculer, self.afficher)
Voici le détail du contenu de la classe :
-
import pyxel: cette ligne permet d'importer le modulepyxelau sein de la classe. -
pyxel.init(): cette ligne permet d'initialiser la fenêtre en précisant sa largeur, sa hauteur et son titre (valeur en pixels). -
def calculer(): cette méthode est obligatoire et doit contenir l'ensemble des calculs nécessaires à notre jeu : calculs des trajectoires, calculs des scores, déplacements des raquettes... -
def afficher(): cette méthode est obligatoire et doit contenir l'ensemble des instructions liées à l'affichage : les murs, la balle, les raquettes, les scores... -
pyxel.cls(0): cette méthode permet de réinitialiser la fenêtre à chaque déplacement. -
def start(): cette méthode permet de lancer notre jeu. -
pyxel.run(): cette méthode va exécuter 30 fois par seconde les méthodescalculeretafficheret permettre le déroulement de notre jeu.
Question 1 - Créer un nouveau fichier nomme Jeu.py.
Question 2 - Dans le fichier Jeu.py, ajouter le code minimal de la classe Jeu.
Question 3 - Dans un fichier main.py, ajouter les lignes suivantes afin de tester le code.
from Jeu import Jeu
jeu = Jeu()
jeu.start()
Si tout fonctionne correctement, une fenêtre avec un fond noir doit s'afficher. C'est la fenêtre principale de notre jeu.
¶ Étape 2 - Une classe Mur
Dans cette seconde étape, nous allons nous intéresser à la création d'une classe Mur permettant de représenter les deux murs en haut et en bas de notre fenêtre.
Un mur est défini par les attributs suivants :
xreprésentant la position en abscisse du coin supérieur gauche du muryreprésentant la position en ordonnée du coin supérieur gauche du murlongueurreprésentant la longueur du murlargeurreprésentant la largeur du murcouleurreprésentant la couleur du mur.
Question 4 - Créer un nouveau fichier Mur.py et importer le module pyxel.
Question 5 - Dans le fichier Mur.py, écrire la classe Mur ainsi que son constructeur permettant de représenter un mur de notre jeu.
Les valeurs de chaque attribut seront demandées en paramètre du constructeur.
Question 6 - Écrire la méthode dessiner. Elle ne prend pas de paramètre. Cette méthode dessine un rectangle sur la fenêtre selon les attributs de la classe.
Pour dessiner un rectangle sur la fenêtre, il faut utiliser la fonction pyxel.rect du module pyxel selon l'exemple ci-dessous.
pyxel.rect(x, y, longueur, largeur, couleur)
La couleur est représentée par un entier compris entre 0 et 15 selon le schéma suivant :
Pour tester notre classe, nous allons créer deux murs : un pour haut de la fenêtre et un pour le bas de la fenêtre.
Question 7 - Dans la classe Jeu, importer la classe Mur.
Question 8 - Toujours dans la classe Jeu, ajouter deux attributs mur_haut et mur_bas permettant de créer deux objets Mur.
Question 9 - Compléter la méthode afficher afin dessiner les murs sur la fenêtre.
À cette étape, vous devez obtenir la fenêtre suivante.
¶ Étape 3 - La classe Raquette
Maintenant, on s'intéresse à la classe Raquette. Elle sera représentée par un rectangle que le joueur peut déplacer de haut en bas afin de faire rebondir la balle dessus.
Une raquette est définie par les attributs suivants :
xreprésentant la position en abscisse du coin supérieur gauche de la raquetteyreprésentant la position en ordonnée du coin supérieur gauche de la raquettelargeurreprésentant la largeur du rectangle.hauteurreprésentant la hauteur du rectangle.cotepermettant d'indiquer le côté de jeu. Elle pourra prendre la valeur « droit » ou « gauche ».
Question 10 - Créer un nouveau fichier Raquette.py et importer le module pyxel.
Question 11 - Dans le fichier Raquette.py, écrire la classe Raquette ainsi que son constructeur permettant de représenter une raquette dans notre jeu.
Seules les valeurs des attributs x et cote seront demandées en paramètre du constructeur.
- L'attribut
hauteursera défini à 40. - L'attribut
largeursera défini à 10. - L'attribut
ysera défini par la valeur permettant de mettre la raquette au centre de la fenêtre sur l'axe vertical.
Question 12 - Écrire la méthode dessiner. Elle ne prend pas de paramètre. Cette méthode dessine un rectangle sur la fenêtre selon les attributs de la classe.
Vous pouvez choisir la couleur que vous souhaitez.
Pour tester notre classe, nous allons créer deux raquettes pour pouvoir jouer avec deux joueurs.
Question 13 - Dans la classe Jeu, importer la classe Raquette.
Question 14 - Toujours dans la classe Jeu, ajouter deux attributs raquette_gauche et raquette_droite permettant de créer deux objets Raquette.
- La raquette de gauche sera positionnée avec une position de
x=10. - La raquette de droite sera positionnée avec une position de
x=280. - N'oubliez pas d'indiquer le côté de la raquette dans le constructeur.
Question 15 - Compléter la méthode afficher afin dessiner les deux raquettes sur la fenêtre.
À cette étape, vous devez obtenir la fenêtre suivante.
¶ Étape 4 - La classe Balle
Dernière classe de notre application, la classe permettant de présenter la balle.
Une balle est définie par les attributs suivants :
xreprésentant la position en abscisse du centre de la balle.yreprésentant la position en ordonnée du centre de la balle.dxreprésentant le déplacement sur l'axe des abscisses.dyreprésentant le déplacement sur l'axe des ordonnées.
Question 16 - Créer un nouveau fichier Balle.py et importer le module pyxel.
Question 17 - Dans le fichier Balle.py, écrire la classe Balle ainsi que son constructeur permettant de représenter la balle de notre jeu.
Les valeurs de chaque attribut seront demandées en paramètre du constructeur.
Question 18 - Écrire la méthode dessiner. Elle ne prend pas de paramètre. Cette méthode dessine un cercle de 6px de diamètre selon les attributs de la classe.
Pour dessiner un cercle sur la fenêtre, il faut utiliser la fonction pyxel.circ du module pyxel selon l'exemple ci-dessous.
pyxel.circ(x, y, rayon, couleur)
Pour tester notre classe, nous allons créer une balle.
Question 19 - Dans la classe Jeu, importer la classe Balle.
Question 20 - Toujours dans la classe Jeu, ajouter un attribut balle permettant de créer un objet Balle.
- La balle sera positionnée au centre de la fenêtre
dxsera égal à -1dysera égal à -2
Question 21 - Compléter la méthode afficher afin dessiner la balle sur la fenêtre.
À cette étape, vous devez obtenir la fenêtre suivante.
Ici, nous avons créé l'ensemble des objets de notre application !
Il reste maintenant à ajouter les méthodes pour gérer le déplacement de la balle et des raquettes.
¶ Étape 5 - Le déplacement de la balle
Pour gérer le déplacement de la balle, nous allons écrire une nouvelle méthode dans la classe Balle.
Question 22 - Dans la classe Balle, écrire la méthode deplacer. Cette méthode va permettre de faire varier les attributs x et y en ajoutant respectivement les attributs dx et dy.
Maintenant que la méthode deplacer existe, il suffit de l'utiliser.
Question 23 - Dans la classe Jeu, compléter la méthode calculer pour permettre à la balle de se déplacer.
- Il suffira d'appeler la méthode
deplacersur l'attribut qui contient l'instance de la classeBalle.
La balle se déplace ! Pour changer sa vitesse, vous pouvez modifier les attributs
dxetdy.
Petit problème : ici, la balle traverse les murs...
Il faut maintenant que la balle rebondisse lorsqu'elle touche le mur du haut ou le mur du bas.
Pour gérer les collisions avec les murs, on précise les informations suivantes :
- Si la balle touche un mur, alors
self.dyprend la valeur-self.dy. - On positionnera la balle précisément sur le mur.
- Il faudra prendre en compte le rayon de la balle pour détecter une collision.
Question 24 - Compléter la méthode deplacer de la classe Balle afin de prendre en compte les collisions sur les murs.
Vous pouvez vous aider du schéma suivant pour trouver les coordonnées nécessaires à la détection des colisions.
À cette étape, la balle se déplace toute seule et rebondit sur les murs.
¶ Étape 6 - Le déplacement des raquettes
Il est temps de s'occuper du déplacement des deux raquettes. Les raquettes peuvent se déplacer de haut en bas et ne doivent pas traverser les murs situés en haut et en bas de la fenêtre.
Le déplacement d'une raquette nécessite l'utilisation de deux touches du clavier : une pour déplacer vers le haut et une pour déplacer vers le bas la raquette.
- Pour la raquette de gauche, on utilisera les touches z et s.
- Pour la raquette de droite, on utilisera les touches haut et bas.
Avec le module pyxel, il est possible de détecter l'appui sur une touche du clavier grâce à la méthode pyxel.btn. Elle prend en paramètre l'identifiant d'une touche du clavier et retourne un booléen indiquant si la touche est pressée ou non.
Voici les identifiants des touches que l'on utilisera :
- Pour la touche z :
pyxel.KEY_Z - Pour la touche s :
pyxel.KEY_S - Pour la touche haut :
pyxel.KEY_UP - Pour la touche bas :
pyxel.KEY_DOWN
if pyxel.btn(pyxel.KEY_DOWN):
# suite du programme
Question 25 - Dans la classe Raquette, écrire la méthode deplacer. Elle prend en paramètre deux identifiants de touche. Elle permet de déplacer la raquette en fonction de l'appui sur les touches du clavier.
def deplacer(self, touche_haut, touche_bas):
pass
- Pour gagner en vitesse de déplacement, une raquette se déplace de 5 pixels en 5 pixels.
Question 26 - Dans la classe Jeu, compléter la méthode calculer en ajoutant les appels aux méthodes nécessaires pour déplacer les raquettes.
À cette étape, les deux raquettes peuvent se déplacer. Mais il faut encore s'occuper des rebonds sur la raquette.
Question 27 - Dans la classe Balle, écrire la méthode collision. Elle prend en paramètre un objet Raquette. La méthode retourne un booléen précisant s'il y a une collision entre la balle et l'objet Raquette passé en paramètre.
Il faudra gérer le rebond selon la position de la Raquette. Pour cela, vous pourrez utiliser l'attribut cote présent dans la classe Raquette.
- Pour la raquette à gauche de la fenêtre, le rebond se fait le côté droit de la raquette.
- Pour la raquette à droite de la fenêtre, le rebond se fait le côté gauche de la raquette.
Lors d'un rebond sur la raquette :
self.dxprend la valeur-self.dx.- On positionnera la balle précisément sur la raquette.
- Il faudra prendre en compte le rayon de la balle pour détecter une collision.
def collision(self, raquette):
pass
Question 28 - Dans la classe Jeu, compléter la méthode calculer en ajoutant les appels aux méthodes nécessaires pour détecter les collisions.
- Pour l'instant, on ne s'occupera pas du booléen retournée par la méthode
collision.
À cette étape, les deux raquettes peuvent se déplacer et la balle peut rebondir sur les murs et sur les deux raquettes.
¶ Étape 7 - La fin du jeu
La fin du jeu arrive lorsqu'un des deux joueurs n'arrive pas faire rebondir la balle, et donc que la balle sorte de la fenêtre.
Pour gérer l'arrêt du jeu et afficher le joueur gagnant, nous allons ajouter les deux attributs suivants dans notre classe Jeu.
- L'attribut
gagnant, qui prendra la valeurNonepar défaut. - L'attribut
en_cours, qui prendra la valeurTruepar défaut, indiquant que le jeu est en cours.
Question 30 - Ajouter les deux attributs gagnant et en_cours dans la classe Jeu.
Question 31 - Toujours la classe Jeu, écrire la méthode fin_du_jeu. En fonction de la position de la balle, la méthode modifie les attrituts ajoutés précédemment.
- Le jeu s'arrête lorsque la balle sort de la fenêtre
- L'attribut
en_courspassera àFalse. - L'attribut
gagnantprendre la valeur « Joueur 1 » ou « Joueur 2 »
def fin_du_jeu(self):
pass
Question 32 - Compléter la méthode calculer en ajoutant l'appel à la méthode fin_du_jeu.
Question 33 - Modifier la méthode afficher dans la classe Jeu afin d'afficher un message lorsque le jeu est fini.
Pour dessiner un message sur la fenêtre, il faut utiliser la méthode suivante :
pyxel.text(x, y, texte, couleur)
¶ Étape 8 - Recommencer une partie
Notre jeu est fonctionnel, mais on souhaite pouvoir recommencer une partie lorsqu'on appuie sur la touche espace.
Question 34 - Compléter la méthode calculer de la classe Jeu afin de permettre de recommencer une partie lorsqu'on appuie sur la touche espace.
- L'identifiant de la touche espace est
pyxel.KEY_SPACE - Recommencer une partie n'est possible que si la touche espace est pressée et si le jeu arrêté.
- Une nouvelle partie consiste aussi à remettre des valeurs par défaut : position de la balle, positon des raquettes, valeur du gagnant...
Vous pouvez écrire une méthode
reset_positiondans la classeRaquetteetBallepour remettre les positions par défaut.
Question 35 - Modifier l'affichage de fin de jeu afin d'indiquer au joueur qu'il peut recommencer une partie.
Voilà, le jeu du Pong est fonctionnel ! Si vous avez encore du temps, vous pouvez regarder les bonus permettant d'ajouter quelques fonctionnalités supplémentaires !
¶ Étape 9 - Les petits trucs en plus
¶ Affichage du score
On souhaite vouloir afficher le score de chaque joueur. Pour cela, il est possible d'ajouter un attribut score dans la classe Raquette.
- À chaque fois que la raquette touche la balle pour la faire rebondir, on augmente le score du joueur de 1.
- Les scores s'affichent dans les coins à gauche et à droite.
Question 36 - Modifier la méthode calcul de la classe Jeu afin de gérer les scores des joueurs.
Question 37 - Modifier la méthode dessiner de la classe Raquette afin d'afficher le score des joueurs.
¶ Augmentation de la vitesse de la balle
On souhaite maintenant que la vitesse de la balle puisse augmenter au cours du déroulement du jeu en mettant en place un système de niveau.
Pour compter le nombre de rebonds et gérer le niveau, il est possible d'ajouter les attributs nb_rebonds et niveau dans la classe Jeu. Voici quelques indications :
- Le jeu commence au niveau 1
- Tous les 5 rebonds sur l'une des raquettes, on passe au niveau suivant et la vitesse de la balle augmente de 1.
- Pour détecter un rebond, on pourra utiliser le booléen renvoyé par la méthode
collisiondéjà présente dans la méthodecalculerde la classeJeu - Pour augmenter la vitesse de la balle, on pourra ajouter une nouvelle méthode dans la classe
Balle.
Question 38 - Modifier la méthode calcul de la classe Jeu afin de gérer le système de niveau.
Question 39 - Modifier la méthode dessiner de la classe Jeu afin d'afficher le niveau en cours.
