Pong Décomposition

Durée estimée: 20 minutes

Décomposition :

Le jeu présenté dans la vidéo à droite est l'objectif à atteindre.

Pong présente de fortes similitudes avec le jeu de balles, la raquette de Pong joue un rôle similaire à la balle2 rouge du jeu précédent, et la balle de Pong joue un rôle similaire à la balle1 jaune.

jeu de balles Pong
2 objets 2 objets
pong1/assets/img/balle2.png la balle2, pong1/assets/img/raquette.png la raquette,
pong1/assets/img/balle1.png la balle1 pong1/assets/img/balleT.png la balle
En vous appuyant sur cette correspondance et sur la vidéo, décomposez le jeu Pong et décrivez le comportement de la balle et de la raquette en réaction aux évènements.

Pour faire rebondir la balle sur la rquette vous aurez besoin de préciser des angles ou orientations : 0° vers la droite, 90° vers le haut, -90° vers le bas.

pong1/assets/img/coordonneesCadre.png Infos sur le système de coordonnées du cadre :
  • l'axe y est orienté vers la doite, l'axe y est orienté vers le bas.
  • l'origine des coordonnées (en pixels) est en haut à gauche, pour le cadre et les lutins,
  • les coordonnées d'un lutin placé en bas au milieu seront :
    x = (largeur du cadre /2) - (largeur du lutin /2)    y = hauteur du cadre - hauteur du lutin
  • les angles en degrés sont comptés de 0 à droite, dans le sens contraire aux aiguillles d'une montre.

Renseignez la colonne de droite du tableau suivant, pour chaque évènement.
Les blocs et la décomposition du jeu de balles sont rappelés dans les deux premières colonnes.
Et quand vous aurez terminé, cliquez sur le bouton pour afficher les actions (ou le pseudo code) pour cet évènement.

rappel du code
jeu de balles
Jeu de balles
balle 1 pong1/assets/img/balle1.png   balle 2 pong1/assets/img/balle2.png
Pong
balle pong1/assets/img/balleT.png   raquette pong1/assets/img/raquette.png


pong1/assets/img/cadreTouche.png
quand le joueur touche le cadre de dessin, démarrer une partie :
  • mettre le score à 0
  • activer le déplacement de la balle2 (chronomètre)
  • placer balle2 à un endroit aléatoire,
quand le joueur touche le cadre de dessin, démarrer une partie :




pong1/assets/img/chronometre.png
à chaque intervalle d'horloge
  • déplacer balle2 en x et y selon inclinaison :

    soustraire acc.X à x
    ajouter acc.Y à y
à chaque intervalle d'horloge



pong1/assets/img/quandBalle2collision.png
quand la balle2 entre en collision avec la balle1 :
  • ajouter 1 au score,
  • l'afficher dans Label,
  • faire vibrer,
  • faire aller la balle1 à un endroit aléatoire,
  • si le score atteint 10,
    • arrêter partie
    • message : gagné
quand la raquette entre en collision avec la balle :



pong1/assets/img/quandBalle2BordsAtteints.png
quand la balle2 atteint bord,
  • arrêter la partie
  • afficher "perdu"
quand la balle atteint bord !

pong1/assets/img/computationalThinkingDR.png Dans la colonne de droite, les modifications pour Pong sont affichées en bleu. On voit que dans sa forme (pattern), Pong est très proche du jeu de balles dont on va repartir. Le pattern recognition permet de gagner du temps.

pong1/assets/img/computationalThinkingP.png Voyons maintenant les données qui représentent l'état du jeu :
Ce sont celles mentionnées ci-dessus : le score, la vitesse initiale de la balle, sa vitesse et son orientation en cours de jeu.

  • Pour le score, on a déjà défini une variable dans le jeu de balles
  • Pour la balle, on va définir comme variable sa vitesse Initiale en début de partie, son accélération à chaque fois qu'elle touche la raquette,
    son orientation et sa vitesse sont déjà définies comme des propriétés
  • Pour la raquette, sa position x , y et sa taille sont également définies comme des propriétés.

Envoyer un commentaire