top of page

Projet final : Jeu de badminton

Mise au point du projet

Problématique : Comment créer un programme qui permette de simuler un jeu de badminton dans lequel le joueur se bat contre l'ordinateur ?
  • Séance 1 : 12/01/2024

Qu'est-ce que le joueur pourra faire ? :

  • se déplacer de gauche à droite et d'avant en arrière (avec les flèches du clavier)

  • choisir à quel moment il frappe le volant (en cliquant avec la souris)

  • choisir l'orientation de sa raquette pour prévoir l'endroit où le volant va atterrir (en bougeant avec souris)

  • choisir s'il sert en coup droit ou en revers lors du service (2 positions possibles) et choisir la trajectoire du service

A quoi le jeu ressemblera ? :

  • au début, le joueur pourra choisir si son personnage est une fille ou un garçon

  • il pourra aussi choisir le niveau du joueur en face de lui : cela modifiera le temps de réaction/de déplacement du joueur de l'ordinateur, le nombre de volants hors du terrain, l'endroit où atterrit le volant à chaque fois/plus ou moins difficile à rattraper pour le joueur

  • le terrain est délimité par des lignes, il y a un filet à la hauteur règlementaire (à l'échelle)

  • le terrain est vu de derrière du côté du joueur qui joue

  • lorsque le joueur s'apprête à frapper le volant, on peut voir une ligne en pointillés qui prévoit la trajectoire du volant.

  • le volant a une vitesse assez lente pour que le joueur puisse avoir le temps de le voir arriver et de se préparer mais pas trop pour qu'il puisse rater le volant des fois.

  • un compteur de point pour chaque joueur qui incrémente lorsque celui-ci marque un point et qui revient à 0 à la fin de chaque match

Quelles sont les règles ? :

  • si le joueur envoie le volant après la ligne du terrain, le point est à l'adversaire.

  • lorsqu'un joueur marque un point, il doit servir. Il faut donc une nouvelle position et une nouvelle trajectoire pour le service

  • si le service arrive avant la ligne de la rivière, le point est à l'adversaire. Il n'y a pas de 2eme service

  • si le score du joueur qui sert est pair, il sert à droite, et s'il est impair il sert à gauche.

  • le match s'arrête lorsqu'un joueur arrive à 11 points

Que fait l'ordinateur ? :

  • le joueur de l'ordinateur rattrape le volant et l'envoie à différents endroits sur le terrain pour varier les échanges

  • lorsque le volant arrive à une trop grande distance (qu'il faut définir) du joueur de l'ordinateur, celui-ci ne le rattrape pas et le point est au joueur.

  • lorsque l'ordinateur sert, il doit rater son service un certain nombre de fois par match. Le nombre est défini selon le niveau choisi au début et intervient de manière aléatoire dans le match

  • l'ordinateur doit également envoyer le volant à l'extérieur du terrain un certain nombre de fois, défini comme précédemment

Début du programme sur Processing

  • Séance 2 : 19/01/24

Aujourd'hui, je me lance sur Processing pour essayer de faire apparaître une fenêtre d'accueil.

  • La taille de la fenêtre : je choisis pour l'instant une taille moyenne de rectangle : size(1000,500).

  • La couleur de la fenêtre : grâce à des recherches internet, je trouve que dans la fonction background(), il faut mettre les pourcentages des canaux de rouge, de vert et de bleu pour la couleur que l'on veut. Après multiples essais, je finis par obtenir la couleur que je souhaite : vert, avec le code suivant : background(100,125,100).

  • Le texte : en m'inspirant de l'exemple de Fantine avec la fonction text(), je fais apparaître le texte : "Bienvenue dans mon jeu de badminton", centré aux coordonnées x et y (380,250). Je cherche ensuite à agrandir la taille du texte en utilisant la fonction textSize() de l'exemple de Fantine. Je me rends compte alors que j'aurais dû le faire avant car maintenant je dois modifier les coordonnées du texte car il s'est décalé.

  • La police : en regardant sur internet, je trouve qu'il faut d'abord générer une police (dans "Outils") puis aller dans "Sketch" puis "Afficher le dossier" afin de voir la nom du fichier généré. Enfin, pour utiliser la police, il faut écrire : 

​police=loadFont("Georgia-48.vlw") 

textFont(police,48)

  •   5. Un bouton "commencer" : j'ai ensuite voulu afficher un bouton sur lequel il faudra cliquer

       pour commencer le jeu. J'ai donc commencé par faire apparaître une ellipse avec

       ellipse(480,300,240,70) blanche et ensuite j'ai fait apparaître un nouveau texte

       "Commencer =>" au niveau des coordonnées du bouton et de la même couleur que le

       textSize(30)       fond :
        fill(100,125,100)

       text("Commencer =>",385,310)

      Je me suis ensuite inspirée de l'exemple de Fantine afin de pouvoir cliquer sur ce bouton,

       j'ai donc fait des conditions par rapport aux coordonnées de l'ellipse à l'aide de MouseX,

      MouseY, MouseButton et MousePressed. Voici ce que ça donne :
      def draw():     
          if mouseButton == LEFT and mousePressed == True:
               if mouseX>350 and mouseX<600:

                    if mouseY>200 and mouseY<400:

  •   6. Changement de fenêtre : J'ai enfin fait apparaitre plusieurs rectangles grâce à la fonction rect() qui prend en paramètre les coordonnées x et y et la taille du rectangle. Lorsque le bouton "Commencer" est cliqué cette fenêtre apparait donc, grise avec 4 rectangles gris aussi mais plus foncé que je remplirai par la suite. 

​

  • Séance 3 : 02/02/24 et rattrapage du 26/01/24

Mon objectif du jour est de configurer la seconde fenêtre qui proposera de choisir le personnage (fille ou garçon) et aussi le niveau de jeu (facile, moyen, difficile). 

  • Modification de la couleur : J'ai tout d'abord commencé par changer la couleur du fond, j'ai opté pour un vert foncé que j'ai aussi mis sur l'écran d'accueil. 

​​      background(0,100,40)

  • Modification des rectangles : J'ai également changé la taille et la position des rectangles pour avoir sur la première ligne un rectangle, sur la deuxième deux rectangles (pour les options à choisir), sur la troisième à nouveau un seul rectangle et enfin sur la dernière trois rectangles (pour les options encore). J'ai aussi modifié les nuances de gris des différents lignes. 

  • Affichage du texte : Avec la fonction text(), j'ai affiché les différents textes sur chaque rectangle : "Choisir ton personnage" sur le premier, "FEMME" et "HOMME" sur les suivants, "Choisis ton niveau de jeu" sur le troisième et "FACILE","MOYEN" et "DIFFICILE" sur les derniers. Voici le code entier et ce qu'il affiche : 

                background(0,100,40)

                strokeWeight(2)

                fill(200)

                rect(190,10,600,100)

                fill(150)

                rect(190,120,290,100)

                rect(500,120,290,100)

                fill(200)

                rect(190,250,600,100)

                fill(150)

                rect(190,360,190,100)

                rect(395,360,190,100)

                rect(600,360,190,100)             

​

​

​

​

​

​

​

​

​

​

​

  • Sélection du bouton : Il faut maintenant que j'essaye de faire en sorte que le rectangle qui sera sélectionné change de nuance pour bien montrer qu'il est sélectionné. ​Pour cela, il me faut d'abord une série de conditions pour chaque rectangle à cliquer. J'ai essayé d'écrire plusieurs conditions avec mouseX et mouseY mais j'ai du mal à déterminer les coordonnées de chaque rectangle. De plus, je rencontre également des difficultés pour savoir quel code je dois écrire dans la fonction draw ou si je dois créer de nouvelles fonction pour chaque nouvelle fenêtre. 

   textSize(50)

   fill(0)

   text("Choisis ton personnage",230,80)

   text("FEMME",240, 190)

   text("HOMME",540,190) 

   text("Choisis ton niveau de jeu",210,320)

   textSize(37)

   text("FACILE",220,425)

   text("MOYEN",425,425)

   text("DIFFICILE",602,425)

Capture d’écran 2024-02-02 à 11.50.06.png
  • Séance 4 : 09/02/24
  • Aujourd'hui, je commence par essayer de trouver les bonnes coordonnées de chaque rectangle pour les cliquer. Je fais donc beaucoup d'essais avant d'arriver finalement à avoir les bonnes conditions pour que le bouton soit cliqué.

  • Ensuite, je décide que le bouton sélectionné devra être d'une nuance de gris plus foncé et qu'il faudra qu'il y en qu'un seul sélectionné  à la fois. Pour cela, je recopie donc dans chaque condition le code du rectangle et du texte qui correspond en mettant un nouveau fill() pour changer la nuance. Je rajoute ensuite dans chaque condition le code des autres rectangles et textes de la catégorie avec le fill() de départ. Cela permet que lorsqu'un rectangle est cliqué, il devient plus foncé alors que les autres de la même ligne gardent la même nuance. Si le  joueur change d'avis et clique sur un autre bouton, le bouton précédent se "déclique", il reprend la nuance de départ. Après de longs essais, mon code fonctionne enfin !

  • Je me rends ensuite compte que les 2 scènes sont superposées et donc si on clique au bon endroit sur l'écran d'accueil, les options de la page d'après s'afficheront trop tôt. Je décide donc de créer une nouvelle fonction pour bien séparer les deux. Cependant, après la création de la fonction, les boutons ne marchent plus et je ne parvient pas à sélectionner n'importe quel rectangle. J'essaye donc de séparer la nouvelle fonction en deux donc une première partie qui permet d'afficher la page avec les boutons et une deuxième qui permet de cliquer les boutons. Et heureusement, le code se remet à fonctionner et je peux à nouveau sélectionner chaque rectangle.

  • Il faut maintenant que j'affiche un bouton pour valider et passer à la prochaine page.

  • La prochaine étape est maintenant d'afficher la prochaine page avec un terrain de badminton vu de dessus, une raquette et un mur avec le volant qui fait des allers-retours.

  • Séance 5 : 16/02/24
  • Aujourd'hui, je commence par essayer d'afficher une flèche pour passer à l'étape suivante. Je télécharge donc une image de flèche pour l'afficher dans le coin de ma fenêtre et je copie les lignes de code de Fantine pour afficher les images. Mais elle ne s'affiche pas sur mon fond avec les autres rectangles. Je change donc d'avis et j'opte pour afficher un texte avec le symbole "->". J'utilise donc fill() pour mettre en blanc puis text() et j'entre les bonnes coordonnées. Il faut maintenant que je rajoute des conditions pour pouvoir cliquer cette flèche. Je rajoute ces 2 lignes de conditions dans la fonction draw pour y mettre ensuite l'appel de la prochaine fonction :

if mouseButton==LEFT and mousePressed==True:
       if mouseX<1000 and mouseX>800 and mouseY<600 and mouseY>400:
           scene3()

  • Je vais maintenant me mettre à définir cette nouvelle fonction qui devra afficher le terrain de jeu vu de dessus, avec une raquette et un mur. Je commence donc par chercher une image de terrain de badminton sur internet. Je rogne ensuite l'image que j'ai car il faut que le volant rebondisse sur un mur donc je ne prends que la moitié du terrain. Je télécharge cette image et je l'affiche à la taille de la fenêtre grâce à : image(img,0,0,1000,500)

  • J'affiche ensuite un rectangle fin, noir et long tout à gauche de la fenêtre et je voudrais qu'il se déplace de haut en bas selon la souris. Je trouve sur internet que l'on peut mettre la position de la souris dans les coordonnées du rectangle MouseY ce qui donne rect(55,mouseY,3,70). Mais le rectangle ne bouge pas, il apparait à l'ordonnée Y du bouton précédent qui change de page. Je rencontre un nouveau problème : lorsque je clique aux coordonnées des rectangles précédents, ils réapparaissent et la 2ème page aussi. Je demande donc de l'aide au professeur pour résoudre ce problème. Sur ses conseils, je crée deux variables globales qui sont commencer et  fleche et qui valent True au début. Puis, je rajoute une condition if commencer==True et je mets ensuite dans cette condition commencer=False et la même chose avec fleche. Cependant, lorsque j'exécute, la fenêtre s'affiche puis disparait et les boutons ne fonctionnent plus, je ne peux plus cliquer pour changer de page.

  • Après plusieurs essais pour résoudre ce problème, j'ai finalement trouvé une solution en rajoutant une variable définie au début : Bouton=False dans les conditions de scene3(). J'ai aussi rajouté global Bouton et la même chose pour chaque variable mais je ne sais pas si c'est vraiment utile mais en tout cas ça fonctionne, les rectangles de la deuxième page ne réapparaissent plus dans la dernière scène. 

  • Séance 6 :08/03/24

Aujourd'hui, j'essaie de mettre en mouvement le rectangle qui représente la raquette et de créer une balle qui fait des allers-retours.

  • Je commence par trouver un code sur internet qui permet d'afficher une balle et de la mettre en mouvement. Je copie donc ce code en l'adaptant à ma situation mais après plusieurs essais, ça ne fonctionne pas du tout. Je me mets donc à m'occuper du mouvement de la raquette.

  • Je fais donc des recherches sur internet et je trouve que la fonction mouseMoved() permet d'exécuter un code chaque fois que la souris est bougée. Je définis donc cette fonction à la suite de scene3() et j'y ajoute le dessin de mon rectangle. J'appelle ensuite la fonction mouseMoved() dans scene3() mais le problème est que mouseMoved() est exécutée en continu et donc dès la première scène le rectangle apparait. De plus, les rectangles qui s'affichent se superposent jusqu'à faire une ligne continue donc il faut que j'arrive à supprimer chaque rectangle lorsqu'un nouveau apparait.

  • Après avoir posé la question à M. Laclaverie, la fonction mouseMoved() sera toujours exécutée et il n'y a donc pas moyen de l'exécuter seulement à la scène 3. J'en déduis donc que je ne pourrais pas non plus redessiner l'image à chaque fois car sinon on reviendrait toujours sur la dernière scène. Je ne peux donc rien faire de plus car je ne pourrais pas afficher la raquette comme je le voulais et donc je suis coincée.

  • J'ai donc terminé par ajouter une image d'un joueur de badminton pour compenser.

Capture.PNG

Eloïse NSI

© 2023 par Eloïse NSI . Créé avec Wix.com

bottom of page