Créer un répertoire de travail nommé « Pong » dans votre espace personnel P:.

Lazarus se lance à partir du menu Démarrer : dans le dossier Lazarus, choisir Lazarus :

Créer l'application Pong en cliquant sur Fichier/Nouveau puis choisir Application dans le dossier Project :

Choisir Application.

Choisir ensuite Fichier/Enregistrer tout, et nommer le projet Pong : cela génère un fichier pong.lpi, qui contiendra le jeu Pong.

Bien vérifier que ce fichier est créé dans le dossier Pong créé précédemment sur votre espace personnel (P:).

Enregistrer ensuite le fichier .pas, qui contiendra le code Free Pascal du jeu, dans un fichier nommé unit_pong.pas, que vous enregistrerez toujours dans ce même répertoire de votre espace personnel.

Votre répertoire doit donc contenir plusieurs fichiers, dont les deux fichiers pong.lpi et unit_pong.pas (les extensions de fichier n'apparaîtront pas forcément).

Vérifier que tout fonctionne bien, en compilant et lançant cette application vide, en cliquant sur le bouton Exécuter (triangle vert en haut à gauche) ou en utilisant le raccourci clavier F9 : une fenêtre s'ouvre, identique à celle ci-dessous :

Fermer alors l'application créée.

Remarque : si vous regardez dans le répertoire du projet, un nouveau fichier nommé pong.exe vient d'être créé : il fait plus de 14 Mo…

Pour diminuer la taille de votre exécutable, il faut changer les options de compilation, et supprimer certaines options qui rajoutent beaucoup de code dans le fichier exécutable (pour le débogage) :

Cocher la case :
Projet --> Options du projet --> Options du compilateur --> Génération du code --> Style de l'unité --> Lien intelligent (-CX).

Décocher toutes les cases :
Projet --> Options du projet --> Options du compilateur --> Édition des liens --> Débogage.
Sauf Éliminer les symboles de l'exécutable (-Xs).

Cocher la case :
Projet --> Options du projet --> Options du compilateur --> Édition des liens --> Style de liens --> Lier intelligemment(-XX).

Si vous recompilez votre application (F9), le fichier exécutable obtenu devrait avoir une taille plus petite (2 Mo environ).

Sous Lazarus, cliquer sur la fenêtre Form1 : dans l'inspecteur d'objet (partie gauche de Lazarus), nous allons définir la couleur (noire) de la fenêtre.

Dans l'onglet Propriétés de l'inspecteur d'objet, choisir la propriété Color et la régler à noir (clBlack). Taper sur Entrée pour activer cette couleur.

Double-cliquer sur la fenêtre Form1, et regarder l'éditeur de source : du code vient d'apparaître à la fin de la page.

Nous allons ajouter manuellement dans cette procédure la couleur de fond noire. C'est dans cette procédure, qui gère la création de l'application Pong, que nous indiquerons tous les paramètres généraux de notre application.

Rajouter entre begin et end; le code suivant :

       Color:= clBlack;

Ne pas oublier le point-virgule en fin de ligne !

Le code devient donc :

Vérifier le bon fonctionnement en appuyant sur F9 !

Pour dimensionner la fenêtre de notre jeu, nous allons rajouter deux lignes dans le code (fenêtre Éditeur de source), de manière à ce que l'aire de jeu soit un rectangle de 600 par 800 pixels :

Afin de faciliter la suite, nous allons stocker dans une constante les valeurs de largeur et de hauteur de l'aire de jeu :

Explication : nous affectons à la constante nommée HauteurJeu la valeur 600.

Quelques petites retouches esthétiques, pour centrer la fenêtre d'application dans l'écran et pour supprimer les bordures de fenêtre :

Vérifier le bon fonctionnement en appuyant sur F9 !

Attention, il n'y a plus de possibilité de fermer l'application !

Pour la fermer, il faut cliquer sur le bouton stop (rouge) de Lazarus !

Pour régler ce petit problème, nous allons faire en sorte que l'application Pong se ferme lorsque l'on clique sur le bouton Échap (ESC), situé en haut à gauche du clavier.

Dans L'inspecteur d'objets, dans l'onglet Événements, nous allons choisir OnKeyPress, et cliquer sur les trois points qui suivent (…) :

Une nouvelle procédure est créé dans l'éditeur de source :

C'est cette procédure qui va permettre de gérer la fermeture de notre application Pong lorsque l'on presse la touche Échap.

Il faut rajouter, toujours dans l'éditeur de source, juste sous l'instruction existante Implementation, le code suivant :

Ceci indique à Lazarus qu'il doit charger la bibliothèque LCLType, contenant les éléments nécessaires à la bonne détection des caractères frappés sur le clavier.

Si l'on parcourait cette bibliothèque, nous trouverions que la touche du clavier Échap est codée par une valeur contenu dans la constante nommée VK_ESCAPE (pour info, c'est le nombre 27).

D'où le code suivant, à insérer dans la procédure FormKeyPress :

Key est une variable de type caractère (char), renvoyée par la procédure FormKeyPress.

VK_ESCAPE est une constante contenant un nombre.

Pour comparer les deux, il faut convertir le caractère Key en sa valeur numérique : c'est ce que fait l'instruction Ord.

À chaque frappe d'un caractère sur le clavier (Événement), la procédure FormKeyPress se lance, et ce qui est situé entre begin et end; s'exécute.

L'instruction If … Then cherche à savoir si le caractère tapé sur le clavier est la touche Échap : si c'est le cas, l'application se ferme.

Vérifier le bon fonctionnement en appuyant sur F9 !

Pour lancer le jeu, nous allons frapper la touche Espace du clavier.

La constante qui correspond à la touche Espace est nommée VK_SPACE et contient le nombre 32.

Dans la procédure FormKeyPress, nous allons rajouter le code suivant :

L'écran de l'application, qui mesure 600 pixels de hauteur et 800 pixels de largeur, a son origine dans le coin en haut à gauche. L'axe horizontal positif va vers la droite, l'axe vertical positif va vers le bas.

La balle va être créée à l'aide du code suivant :

Ceci va créer un carré blanc de 15 pixels par 15 pixels, situé à l'origine (coordonnées 0,0), c'est-à-dire en haut à gauche de l'application : (0,0) représente l'origine du carré, et (15,15) l'extrémité du carré.

Pour intégrer ceci, dans la procédure FormKeyPress, nous allons donc rajouter le code suivant :

Vérifier le bon fonctionnement en appuyant sur F9 !

Comme précédemment, nous allons créer une constante qui contient la valeur de taille de balle :

Donc le code de la procédure FormKeyPress devient :

Pour créer un rectangle au centre de la fenêtre, il faut donc modifier ainsi le programme :

Ou plus précisément, en créant une variable de type entière correspondant à la moitié de la hauteur et une autre correspondant à la moitié de la largeur.

Pour cela, déclarer les variables dans la rubrique private de l'éditeur de source :

La procédure FormKeyPress devient donc :

MiHauteur est une variable de type entier (integer). L'instruction div effectue une division de HauteurJeu et renvoie un résultat qui est un entier, compatible avec le type de MiHauteur.

Attention : lorsqu'on affecte une valeur à une constante, on utilise le signe « = » :

Lorsqu'on déclare une variable on utilise le signe « : » :

Lorsqu'on affecte une valeur à une variable, on utilise les signes « := » :

Vérifier le bon fonctionnement en appuyant sur F9 !

Pour déplacer la balle sur l'écran, il va falloir afficher la balle à un endroit, puis l'effacer et l'afficher à un autre endroit, et ainsi de suite, suffisamment rapidement pour que l'œil ne capte pas cela : cela donnera l'impression que la balle se déplace sur l'écran.

La balle va donc être affichée en blanc pendant 100 ms, puis effacée (affichée en noir), puis affichée en blanc un cran plus loin.

Modifier la procédure FormKeyPress de la manière suivante :

Vérifier le bon fonctionnement en appuyant sur F9 !

Nous allons créer une procédure qui dessine la balle.

Dans la section private, déclarer la procédure DessineBalle :

En positionnant le curseur sur ce que l'on vient d'écrire, et un tapant au clavier en même temps CTRL + SHIFT + C, le code de la procédure se crée automatiquement :

Il reste à compléter la procédure avec le code suivant (à insérer entre begin et end) :

PosBalleX et PosBalleY sont des variables globales (valables dans tout le programme), qui contiennent la position courante de la balle.

Xnew et Ynew sont les positions futures de la balle (celle que l'on va dessiner dans la procédure DessineBalle).

Pour que cela fonctionne, il faut déclarer les variables utilisées PosBalleX et PosBalleY dans la section private, juste avant la procédure DessineBalle :

Puis il faut initialiser les variables, dans la procédure FormCreate, en rajoutant ceci (entre begin et end) :

La procédure FormCreate devient donc :

Vérifier le bon fonctionnement en appuyant sur F9 !

L'ordinateur va désormais gérer le déplacement de la balle. Pour cela il faut ajouter un timer (onglet System/TTimer).

Un timer, c'est comme un chronomètre, qui décompte le temps, et qui va permettre à intervalle régulier de déclencher un événement (le déplacement de la balle).

Sélectionner TTimer et cliquer dans la fenêtre Form1 pour faire apparaître le timer.

Nous allons changer son nom Timer1 en tmrMvtBalle (dans l'inspecteur d'objet, onglet Propriétés, propriété Name).

Nous allons aussi passer la propriété Enabled à False : le timer ne sera actif que lorsque le jeu débutera.

Enfin, nous réglons l'intervalle de temps du timer sur 100 ms (à la place de 1000) : inspecteur d'objet, onglet Propriétés, propriété Interval.

Sélectionner l'onglet Événements, et activer l'événement OnTimer (cliquer sur les trois points).

La procédure correspondante (TForm1.tmrMvtBalle) est automatiquement créée.

Nous allons maintenant faire se déplacer la balle automatiquement, en modifiant comme suit la procédure TForm1.FormKeyPress :

Lorsqu'on lance le jeu (appui sur barre d'espace), le timer se met en route, et la procédure DessineBalle est activée : la balle est dessiné au centre de l'écran.

Pour avoir un déplacement automatique selon l'axe x (horizontal) de la balle, la procédure TForm1.tmrMvtBalle devient :

A chaque impulsion du timer, la fonction DessineBalle sera activée, et la balle sera redessinée sur l'écran avec un changement de position de 10 suivant l'axe x.

Vérifier le bon fonctionnement en appuyant sur F9 !

Le problème est que la balle sort de l'écran.

Ajouter une variable pour gérer la direction de la balle : Direction.

Il faut rajouter ceci après le mot clé private :

Puis il faut initialiser cette variable dans la procédure TForm1.FormCreate :

Il faut ensuite modifier la procédure TForm1.tmrMvtBalleTimer :

Si la balle touche à gauche : PosBalleX <= 0.

Si la balle touche à droite : PosBalleX >= (LargeurJeu - TailleBalle), ceci pour tenir compte de l'épaisseur de la balle (rappel : TailleBalle = 15 pixels).

Lorsque la balle touche un des bords latéraux, on change la direction de déplacement en multipliant par (-1) la variable Direction.

Vérifier le bon fonctionnement en appuyant sur F9 !

(x1, y1) est la position initiale de la balle, (x2, y2) est la position finale de la balle.

La balle se déplace selon un angle de déplacement nommé Direction, et à une vitesse de déplacement nommée Vitesse.

Nous allons créer et initialiser une variable Vitesse, qui permettra de gérer facilement la vitesse de déplacement de la balle.

Comme d'habitude, on déclare la variable dans la partie private :

Ne pas oublier de changer la valeur de Direction.

Sous Lazarus, le sinus et le cosinus se calculent pour un angle exprimé en radians.

Donc, pour calculer le cosinus de l'angle Direction, je dois écrire l'équation suivante :

Trunc est une instruction qui renvoie la partie entière d'un résultat :

Trunc (12,56) renvoie 12.

En effet, Xchange et Ychange étant des entiers, ils ne peuvent stocker qu'un résultat de type entier.

Voici une figure permettant de déterminer l'angle de rebond latéral :

La balle arrive sur le mur avec un angle égal à Direction. L'angle de rebond sera donc égal à Direction + (90 - Direction) * 2.

Il faut donc modifier la procédure tmrMvtBalle de la manière suivante :

Vérifier le bon fonctionnement en appuyant sur F9 !

Vous pouvez faire plusieurs essais, en changeant la valeur de Direction, ainsi qu'éventuellement celle de Vitesse.

Voici une figure permettant de déterminer l'angle de rebond supérieur et inférieur :

La balle arrive sur le mur avec un angle égal à Direction. L'angle de rebond sera donc égal à Direction + (180 - Direction) * 2.

Il faut donc modifier la procédure tmrMvtBalle ainsi :

Vérifier le bon fonctionnement en appuyant sur F9 !

Nous avons besoin de stocker dans une constante la hauteur de la raquette (RaqHauteur), et dans une autre constante la valeur du décalage de la raquette (DecalageRaquette).

Déclarer cette constante dans la zone const :

De même déclarer la variable PosRaqDrY dans la zone private :

Initialiser la variable PosRaqDrY dans la procédure FormCreate :

Déclarer la nouvelle procédure dans la zone private :

Puis construire la procédure (avec les touches CTRL + SHIFT + C).

Compléter la procédure DessineRaquetteDroite de la manière suivante :

La procédure FormKeyPress devient :

Vérifier cette phase en appuyant sur F9 !

Les touches M et K définissent le déplacement de la raquette droite verticalement.

Cela se fait dans la procédure FormKeyPress :

Vérifier cette phase en appuyant sur F9 !

De même déclarer la variable PosRaqGaY dans la zone private :

Initialiser la variable PosRaqGaY dans la procédure FormCreate :

Déclarer la nouvelle procédure dans la zone private :

Puis construire la procédure (CTRL + SHIFT + C), et compléter le code :

La procédure FormKeyPress devient :

Vérifier cette phase en appuyant sur F9 !

Régler le déplacement de la raquette gauche.

Les touches F et S définissent le déplacement de la raquette gauche verticalement.

Cela se fait dans la procédure FormKeyPress :

Vérifier cette phase en appuyant sur F9 !

Il faut modifier le code de la procédure DessineRaquetteDroite :

Vérifier cette phase en appuyant sur F9 !

Il faut rajouter un test dans la procédure tmrMvtBalleTimer.

Pour la raquette droite :

Vérifier cette phase en appuyant sur F9 !

Et faire de même pour la raquette gauche :

Le code complet de la procédure est donc :

Vérifier cette phase en appuyant sur F9 !

Dans la section private, ajouter les deux variables suivantes :

Ajouter le code suivant dans la procédure FormCreate :

La détection se fait dans la procédure tmrMvtBalle : lorsque la balle va trop à gauche (PosBalleX <= 0), on incrémente le compteur du joueur de droite, et lorsque la balle va trop à droite (PosBalleX >= LargeurJeu - TailleBalle), on incrémente le compteur du joueur de gauche.

L'incrémentation se fait à l'aide de l'instruction Inc.

Exemple :

Il faut ensuite relancer la balle pour un nouveau service : ce sera fait par une procédure appelée NouveauService.

Il faut la déclarer dans la section private :

Avec CTRL + SHIFT + C, on crée le code suivant :

Dans cette procédure, nous allons intégrer le code nécessaire au service d'une nouvelle balle.

Il faut d'abord arrêter le timer (la balle n'a plus besoin de bouger temporairement) :

Il faudra penser à le remettre en route à la fin de la procédure.

On redessine la balle et les raquettes droite et gauche :

Il faut ensuite afficher le score, ce qui sera fait par une autre procédure nommée AfficheScore.

Une petite pause (1s) sera nécessaire pour bien visualiser le score à l'écran :

Donc le code de la procédure NouveauService sera le suivant :

La procédure NouveauService sera appelée dans la procédure tmrMvtBalle, de la manière suivante :

Donc la procédure NouveauService complète est la suivante :

C'est l'objectif de la procédure AfficheScore.

Il faut déclarer la procédure dans la section private :

puis cliquer sur CTRL + SHIFT + C pour créer le code de la procédure :

Pour afficher le score, nous utiliserons l'instruction Canvas.TextOut de la manière suivante :

Cela affiche un texte, un peu avant le milieu de l'écran (à la position 400 - 50 pixels en x), un peu plus bas que le sommet de l'écran du jeu (30 pixels).

L'instruction IntToStr convertit le contenu de ScoreGauche (qui en un nombre entier) en une chaîne de caractères (String) : l'instruction Canvas.TextOut n'affiche en effet que des caractères, pas des nombres.

De même, pour le score de droite :

Afin d'avoir un affichage visible, nous ajouterons avant l'instruction Canvas.TextOut les instructions suivantes :

Ceci sélectionnera une police « Courier New », de taille 24, en gras, de couleur blanche, sur fond noir.

Pour afficher le score sur l'écran, il faut rajouter la ligne suivante au début du jeu (procédure FormKeyPress) et à chaque nouveau service (procédure NouveauService) :

Voici la modification dans la procédure FormKeyPress :

Et voici la modification dans la procédure NouveauService :

Vérifier cette phase en appuyant sur F9 !

Le test pour savoir s'il y a un vainqueur se fait dans la procédure NouveauService. S'il y a un vainqueur, il faudra gérer cela, sinon, le jeu continue.

Dans la phase de débogage du jeu, il peut être judicieux de limiter le score à 3.

Il faut donc déclarer la procédure AnnoncerGagnant dans la zone private :

puis cliquer sur CTRL+SHIFT+C pour créer le code correspondant à cette procédure :

Nous allons ajouter entre Begin et End le code suivant (formatage du texte) :

Puis, suivant le gagnant, nous allons écrire le mot « Gagnant » sous le score :

L'instruction Canvas.TextWidth('Gagnant') calcule la largeur du mot « Gagnant » (afin de le décaler correctement par rapport au centre de l'écran).

Il faudrait faire pareil pour l'affichage du score de gauche.

Vérifier cette phase en appuyant sur F9 !

Dans la section private, déclarer la procédure :

Avec le curseur sur la ligne créée en phase 1, taper CTRL + SHIFT + C pour créer le code de la procédure :

La procédure efface complètement l'écran (Canvas.Rectangle) puis dessine en blanc des pointillés de longueur 20 pixels espacés de 40 pixels.

Dans la procédure FormKeyPress, ajouter les instructions manquantes, pour afficher le filet au début du jeu :

Il faut aussi afficher le score et le filet à chaque nouveau service :

Vérifier cette phase en appuyant sur F9 !

Dans la zone private, déclarer les deux procédures suivantes :

Créer le code des deux procédures (CTRL + SHIFT + C) :

Déclarer l'objet Bitmap dans la zone private (avant les déclarations de procédures) :

À la fin de la procédure FormCreate, rajouter ceci :

Il faut penser à créer la procédure de destruction de l'objet BitMap.

Pour cela, il faut aller dans l'inspecteur d'objet, sélectionner l'onglet Événements, et choisir l'événement OnDestroy (cliquer sur les trois points à coté pour créer la procédure).

Puis compléter le code comme ci dessous (entre begin et end) :

Compléter le code de la procédure EnregistrerEcran :

Compléter le code de la procédure RestaurerEcran :

Ajouter le code suivant au début de la procédure DessineBalle :

Ainsi, on restaure l'écran tel qu'il était avant que la balle passe, et on sauve l'écran là où sera la balle.

Enfin, effacer les deux lignes suivantes :

La procédure DessineBalle devient donc :

Vérifier le bon fonctionnement en appuyant sur F9 !

Dans la section private, déclarer la procédure :

Avec le curseur sur la ligne créée en phase 1, taper CTRL + SHIFT + C pour créer le code de la procédure :

Compléter le code de la procédure AfficherInstructions :

La procédure AfficherInstructions sera appelée à la fin de la procédure AnnoncerGagnant (juste avant le end;) :

Afin d'afficher ce texte une fois aussi au début du jeu, nous allons utiliser un événement particulier de la feuille de jeu nommé OnPaint.

Cliquer sur la feuille de jeu (TForm1), aller dans l'inspecteur d'objet, onglet Événement, et cliquer sur OnPaint (cliquer sur …) : ceci crée une procédure TForm1.OnPaint.

L'instruction OnPaint:= nil est là pour empêcher la réexécution de cette procédure lorsque le jeu à commencé.

Vérifier le bon fonctionnement en appuyant sur F9 !

Pour télécharger les sons, rendez-vous sur cette page :

http://www.clubengineer.org/examples/pong-sounds.zip

Une fois décompressé, vous disposez de trois fichiers sons, que nous allons renommer ainsi :

• bounce.wav → rebond.wav ;
• miss-left.wav → perdu-gauche.wav ;
• miss-right.wav → perdu-droite.wav.

Il faut placer les fichiers sons au même endroit que le fichier programme (répertoire Pong).

Pour que votre programme puisse lire du son, il faut ajouter une bibliothèque qui gère le son (sous Windows) : MMSystem.

Dans la section implementation, nous avions déjà rajouté une bibliothèque : LCLType.

À la suite, rajouter MMSystem, pour avoir ceci :

Dans la section private, déclarer les procédures :

En se positionnant sur le nom de la procédure et en cliquant sur CTRL + SHIFT + C, les trois procédures sont créés :

Pour jouer un son, l'instruction est la suivante :

SND_ASYNC indique que le jeu peut continuer pendant que le son est joué : si on mettait SND_SYNC, le jeu ferait une pause le temps de la lecture du son.

Nos trois procédures deviennent donc :

L'appel de la procédure JouerSonPerduGauche doit se faire chaque fois que la balle passe derrière la raquette gauche (PosBalleX <= 0) ; l'appel de la procédure JouerSonPerduDroit doit se faire chaque fois que la balle passe derrière la raquette droite (PosBalleX >= (LargeurJeu - TailleBalle)).

Nous allons donc appeler les procédures JouerSonPerduGauche et JouerSonPerduDroit dans la procédure tmrMvtBalle.

L'appel de la procédure JouerSonRebond doit se faire pour chaque rebond de la balle sur les cotés haut ou bas du terrain et sur les raquettes gauche ou droite.

Au final, la procédure tmrMvtBalleTimer devient :

Vérifier le bon fonctionnement en appuyant sur F9 !