[vb] créer un pong :: niveau débutant

Dernière mise à jour le par pijaku .

[vb] créer un pong :: niveau débutant

Note : J'avais réalisé ce tutorial pour un ami, ne vous étonnez donc pas si je vous tutoies dans les lignes qui suivent.
Note 2 : je ne sais pas si les images s'afficheront, elles ne sont pas primordiales de toutes façons.

Pré-requis nécessaire

Les variables

Une variable est une valeur (des chiffres, des lettres, ou les deux) stockée sous un nom.

Par exemple :

Variable1 = 22
Button1.Caption = Variable1

Cet exemple n'affiche pas « Variable1 » sur le bouton, mais il affiche 22. C'est à dire la valeur associée au nom Variable1. C'est clair ?
Bon. Il faut aussi savoir comment créer une variable dans le code.
Ouvre la fenêtre de code, monte tout en haut de cette dernière, en dehors de toutes les fonctions, et tape :

Public Le_Nom_De_Ta_Variable

Cet exemple crée une variable appelé Le_Nom_De_Ta_Variable. Tu peux bien évidemment changer ce nom. Elle ne lui assigne par contre aucune valeur. Elle est donc, par défaut, égale à « Null ».
Pour lui assigner une autre valeur, il faut te rendre à l''intérieur d''une fonction (c''est à dire entre les bornes « Private Sub» et « End Sub ») et taper :

Le_Nom_De_Ta_Variable = « La_Valeur »

Attention : la valeur que tu veux assigner à ta variable doit être mise entre guillemets si elle contient des lettres. Tu ne devras pas en mettre par contre si elle ne contient QUE des chiffres.

Tu peux aussi assigner à une variable la valeur d''une autre variable, comme ceci :

Var1 = 22
Var2 = Var1

Cet exemple donne pour valeur 22 aux deux variables.

Tu peux aussi assigner un calcul comme valeur :

Var1 = 22
Var2 = 44
Var3 = Var1 + Var2 + 66

Cet exemple donne pour valeur 132 à la variable Var3 (c''est à dire le résultat de 22 + 44 + 66).

Le test If-Then-Else

Le test If-Then-Else te permet de ne réaliser certaines actions que si une certaine conditions est vérifiée :

Var1 = 22
If Var1 = 22 Then
    Var2 = Var1
End If

Cet exemple est tout bête : il assigne 22 à la variable Var1. Ensuite arrive le test If. Sa condition est : If Var1 = 22 Then. C'est à dire : Si Var1 = 22 Alors. La variable Var1 étant bien égale à 22, l''ordinateur exécute la ligne suivante : Var2 = Var1. Si Var1 n'avait pas été égale à 22, l''ordinateur serait allé directement à la ligne End If, sans exécuter la ligne Var1 = Var2. La ligne End If est la fin du test If Then Else.

Voici un exemple plus compliqué :

Var1 = 22
If Var1 < 22 Then
            ...blablabla...
ElseIf Var1 > 22 Then
            ...blablabla...
Else
            ...blablabla...
End If

Cet exemple assigne la valeur 22 à Var1. Ensuite la boucle If teste si Var1 est inférieur (signe <) à 22. Vu qu''elle ne l''est pas, l''ordinateur va à la ligne ElseIf Var1 > 22 Then. Cette ligne teste si Var1 est supérieur (signe >) à 22. Vu qu''elle ne l''est pas non plus, elle va à la ligne Else qui signifie : si aucune des conditions ci-dessus n'est respectée, alors... Vu que Var1 n''est ni inférieur, ni supérieur à 22, l''ordinateur exécute les lignes contenues entre Else et End If. C'est clair ?

Commençons tout de suite les choses sérieuses :

Création de l'interface

Form

Lance Visual Basic. Fait EXE Standard. Agrandit la feuille pour qu''elle ait les dimensions suivantes : Width = 7620, Height = 5310.

Dans sa fenêtre de PROPRIETE, change les valeurs suivantes :

Nom de la valeur Valeur de départ Changer en
Backcolor Blanc Noir
BorderStyle 2 - Sizable 1 - Fixed Single
Caption Form1 Pong !

Ensuite, on va créer un menu qui servira à régler la difficulté :

  • Clique sur le 3ème bouton de la barre d'outils,
  • Dans Caption, tape « 3 », puis dans Name, tape « Trois ».
  • Clique ensuite sur Insérer,
  • Puis dans Caption retape « 2 », et dans Name « Deux »
  • Clique encore sur insérer,
  • et retape « 1 » dans Caption et « Un » dans Name.
  • Clique sur OK pour fermer la fenêtre

Un menu a du apparaître sur Form1, portant les chiffres 1, 2 , et 3. Il nous serviront à régler la difficulté plus tard.

Raquettes/Balle

Crée maintenant un pictureBox (c''est l''icône en haut à droite de la BARRE D''OUTILS) quelconque.
Puis, dans la barre de PROPRIETE, change ces valeurs :

Nom de la valeur Valeur actuelle Changer en
Name Picture1 (je crois...) Player1
BorderStyle 1 - Fixed Single 2 - None
BackColor Je sais plus Blanc
Left ? 240
Top ? 1440
Height ? 1575
Width ? 255

Tu obtiens un beau rectangle blanc à gauche de la feuille. Ce sera la raquette du joueur.

Re-Crée un PictureBox avec ces PROPRIETES :

Nom de la valeur Valeur actuelle Changer en
Name Picture1 (je crois...) Ball
BorderStyle 1 - Fixed Single 2 - None
BackColor Je sais plus Blanc
Left ? 3360
Top ? 2040
Height ? 255
Width ? 255

Ça, ce sera la balle.

Re-Re-Crée un PictureBox avec ces PROPRIETES :

Nom de la valeur Valeur actuelle Changer en
Name Picture1 (je crois...) Player2
BorderStyle 1 - Fixed Single 2 - None
BackColor Je sais plus Blanc
Left ? 7080
Top ? 1440
Height ? 1575
Width ? 255

Et ça se sera la raquette contrôlée par l''ordinateur.

Timer(s)

Maintenant, crée 6 Timer (l''icône en forme de chronomètre).
Tu peux les placer où tu veux, ils sont invisibles pendant l''exécution de l''application.

Associe 75 à la PROPRIETE Interval du premier Timer (portant le nom Timer1).
Associe 1500 à la propriété Interval du deuxième Timer (portant le nom Timer2).
Associe 3000 à la propriété Interval du troisième Timer (portant le nom Timer3).
Associe 6000 à la propriété Interval du quatrième Timer (portant le nom Timer4).
Associe 8000 à la propriété Interval du cinquième Timer (portant le nom Timer5).
Associe 16000 à la propriété Interval du sixième Timer (portant le nom Timer6).

Compteurs de points

Il te reste à créer deux label (Deuxième icône à gauche en partant du haut) :
Voici leurs PROPRIETE :

Label n°1 :

Nom de la valeur Valeur actuelle Changer en
Name Label1 (je crois...) P1Nbr
Caption Label1 00
BackColor Je sais plus Noir
ForeColor Noir Blanc
Font ? Taille : 24 / Gras / Time New Roman

Je te laisse le placer où tu veux, en sachant que ce sera le compteur de points du joueur 1.

Label n°2 :

Nom de la valeur Valeur actuelle Changer en
Name Label2 (je crois...) P2Nbr
Caption Label2 00
BackColor Je sais plus Noir
ForeColor Noir Blanc
Font ? Taille : 24 / Gras / Time New Roman

Je te laisse le placer où tu veux, en sachant que ce sera le compteur de points du joueur 2.

Voilà, l''interface est créée !
Maintenant il va falloir la programmer.

Le code

Variables publiques

Ouvre la fenêtre de code (en double cliquant sur la feuille, par exemple), puis, en dehors de toutes fonctions, tout en haut de la feuille de code, tape :

Public BallMouveLeft
Public BallMouveTop
Public DiffLevel
Public refY

Ce seront les quatre variables qui nous seront nécessaires.

Timer1

Referme la fenêtre de code, et double clique sur le Timer 1.
Voici ce qui s''affiche :

Private Sub Timer1_Timer( )

End Sub

Cette fonction sera exécutée toutes les 75 millisecondes (propriété Interval de Timer1).

Remplace ces deux lignes par le code suivant :

Private Sub Timer1_Timer()
Call MouvementP2
Call BalleRebonditEnHaut
Call BalleRebonditEnBas
Call BalleRebonditSurPlayer1
Call BalleRebonditSurPlayer2
Call MouvementDeLaBalle
Call Player1Mouve
Call Player1MarqueUnPoint
Call Player2MarqueUnPoint
End Sub

Cela mérite une explication je pense. ...En fait, toutes ces lignes sont des appels de fonctions.
Par exemple, la ligne : Call MouvementP2, appelle la fonction « Mouvement P2 ».

La fonction MouvementP2 se situera quelque part dans la fenêtre de code, et ressemblera à cela :

Sub MouvementP2( )
    '.....blablabla.....
End Sub

Bien sur, nous ne l''avons pas encore créée et nous allons le faire.

Récapitulation : Toutes les lignes qui commencent par « Call » appellent une fonction portant le nom que forme les caractères suivant le mot « Call ». Tu auras peut-être aussi remarqué qu'il n''y a pas de « Private » devant « Sub MouvementP2( ) », alors qu''il y a « Private » devant « Sub Timer1_Time( ) ». En effet, il n''y a pas besoin de mettre « Private » devant les fonctions que tu crées toi-même, les rendant ainsi accessibles à n''importe quel endroit du code.
Il va donc falloir que l''on crée toutes ces fonctions une-à-une.

Form_Load

Mais avant cela, referme le fenêtre de code, et ré-ouvre la en cliquant sur Form1, de manière à afficher :

Private Sub Form_Load( )

End Sub

Remplaces ces deux lignes par le code :

Private Sub Form_Load()
BallMouveTop = -50
BallMouveLeft = -100
DiffLevel = 1
End Sub

Tu as du reconnaître le nom de 3 des quatre variables que l''on avait créées. On fait ce que l''on appelle une initialisation de variables. C'est-à-dire que l''on assigne une valeur à une variable pour la première fois.
Voilà qui est fait.

Les Fonctions

MouvementP2

Maintenant nous allons pouvoir créer la fonction MouvementP2( ). Descends tout en bas de la fenêtre de code, en dehors de toutes fonctions, et tape :

Sub MouvementP2()
If DiffLevel = 1 Then
    If Ball.Top < Player2.Top Then
        Player2.Top = Player2.Top - 31
    End If
    If Ball.Top > (Player2.Top + (Player2.Top / 2)) Then
        Player2.Top = Player2.Top + 31
    End If
ElseIf DiffLevel = 2 Then
    If Ball.Top < Player2.Top Then
        Player2.Top = Player2.Top - 41
    End If
   If Ball.Top > (Player2.Top + (Player2.Top / 2)) Then
       Player2.Top = Player2.Top + 41
   End If
ElseIf DiffLevel = 3 Then
    If Ball.Top < Player2.Top Then
        Player2.Top = Player2.Top - 55
    End If
   If Ball.Top > (Player2.Top + (Player2.Top / 2)) Then
       Player2.Top = Player2.Top + 55
    End If
End If
End Sub

Il nous faut maintenant créer la fonction suivante.

BalleRebonditEnHaut

Fait donc comme précédemment avec le code suivant :

Sub BalleRebonditEnHaut()
If Ball.Top < 0 Then
    BallMouveTop = 50
End If
End Sub

Cette fonction est donc la fonction "BalleRebonditEnHaut". Cette fonction teste si la balle (l''objet Ball) touche le haut de Form1 (If Ball.Top < 0 Then). Si oui, elle inverse son mouvement (BallMouveTop = 50), tout simplement en changeant une variable (BallMouveTop, que nous avons créée avant). Nous verrons plus en détail ce fonctionnement.

Il nous faut maintenant créer la fonction suivante :

BalleRebonditEnBas

Sub BalleRebonditEnBas()
If (Ball.Top + Ball.Width) > 4560 Then
    BallMouveTop = -50
End If
End Sub

Tu remarques un changement dans la condition de la boucle If. Tout d''abord, 4560 correspond à la hauteur de Form1 moins la largeur du menu et du titre de cette même feuille. La parenthèse est égale à la position Y (ordonnées) de la balle, + sa hauteur. Car, en effet, il faut tester le débordement avec le bas de la Balle , et non pas avec son coin supérieur gauche comme le fait la propriété Top utilisée toute seule. Donc, en résumé, on teste si le bas de la balle est plus bas que le bord de la feuille, et si oui, on modifie la variable BallMouveTop.

Voilà, maintenant il faut créer la fonction suivante :

BalleRebonditSurPlayer1

Sub BalleRebonditSurPlayer1()
If Ball.Left < (Player1.Left + Player1.Width) And Ball.Left > Player1.Left And (Ball.Top + Ball.Width) > Player1.Top And Ball.Top < (Player1.Top + Player1.Height) Then
    BallMouveLeft = 100
End If
End Sub

Cette fonction teste si la Balle rebondit sur Player1.
Tu remarques le mot And. Ce mot permet de mettre plusieurs conditions pour une boucle If. Tu remarques, dans cette boucle If, il y a 4 conditions. Il faut donc que ces 4 conditions soit vérifiés pour que le programme exécute la ligne suivante :
Si la balle est plus à gauche que le bord droit de Player1 (la position de son bord gauche plus sa largeur est égale à la position de son bord droit) et que la balle est plus à droite que le bord gauche de Player1, et que le coin en bas à gauche de la balle est plus bas que le bord du haut de Player1, et que le coin en haut à gauche de la balle est plus haut que le bord du bas de Player1 Alors...
Si tu fais un schéma (je te le conseilles...) tu comprendras que ces 4 conditions se résument à : Si la balle rentre en collision avec Player1, Alors...
La ligne suivante permet à la balle de repartir vers la droite en modifiant la variable BallMouveLeft. Nous verrons cela plus en détail un peu plus loin.

Ceci étant fait, on crée la fonction suivante :

BalleRebonditSurPlayer2

Sub BalleRebonditSurPlayer2()
If (Ball.Left + Ball.Width) < (Player2.Left + Player2.Width) And (Ball.Left + Ball.Width) > Player2.Left And (Ball.Top + Ball.Width) > Player2.Top And (Ball.Top + Ball.Width) < (Player2.Top + Player2.Height) Then
    BallMouveLeft = -100
End If
End Sub

Cette fonction est un autre test de collision, cette fois entre la balle est Player2.
La fin permet à la balle de repartir vers la gauche.

Allez, la fonction suivante :

MouvementDeLaBalle

Sub MouvementDeLaBalle()
Ball.Top = Ball.Top + BallMouveTop
Ball.Left = Ball.Left + BallMouveLeft
End Sub

Cette fonction fait bouger la balle : en effet, elle ajoute aux valeurs de position de Ball les variables BallMouveTop et BallMouveTop. En effet, ces variables correspondent au déplacement : si c'est une valeur négative, elle va vers le gauche (ou monte), et si cette valeur est positive, elle va vers la droite (ou descend).

Passons à la fonction suivante :

Player1Mouve

Sub Player1Mouve()
Player1.Top = refY
End Sub

Cette fonction change la position de Player1 : en effet, elle initialise sa propriété Top (axe des ordonnés), en la rendant égale à la variable refY. Nous verrons plus tard à quoi correspond la variable refY.

Hop, la fonction suivante :

Player1MarqueUnPoint

Sub Player1MarqueUnPoint()
If Ball.Left > 7440 Then
    P1Nbr = P1Nbr + 1
    Ball.Left = 5000
    BallMouveLeft = -100
    BallMouveTop = -50
End If
End Sub

Cette fonction teste si la balle est plus loin que le bord droit de Form1 (correspondant à la valeur 7440), c''est-à-dire si Player2 a laissé passer la balle, c''est-à-dire si Player1 a marqué un point. Si oui, on ajoute un au label P1Nbr (P1Nbr = P1Nbr + 1), puis on repositionne la balle, et sa direction, pour pouvoir continuer à jouer.

Poum, la fonction suivante :

Player2MarqueUnPoint

Sub Player2MarqueUnPoint()
If Ball.Left < 10 Then
    P2Nbr = P2Nbr + 1
    Ball.Left = 3000
    BallMouveLeft = 100
    BallMouveTop = 50
End If
End Sub

La même chose, mais avec Player2.

Paf, la fonction suivante :
Ah, ben tiens, y''en à plus !

Il ne nous reste plus qu'à régler certains détails :

Form_MouseMove

Ferme la fenêtre de code, et ré-ouvre la en double cliquant sur la feuille.
La fonction, Form_Load, que nous avons modifié plus haut, apparaît. Nous n''allons pas y retoucher.
Dans le menu déroulant de gauche de la feuille de code, sélectionne « MouseMove », de manière à afficher :

Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)

End Sub

Remplaces ces deux lignes par le code :

Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
refY = Y
End Sub

Il faut savoir que la fonction MouseMove est exécutée chaque fois que la souris bouge sur la feuille. La ligne refY = Y initialise la variable refY à la position Y de la souris (axe des ordonnées). En effet, dans la fonction MouseMove, et dans cette fonction seulement, Y correspond à la position Y de la souris. Voilà, tu sais maintenant à quoi correspond RefY.

Les Timer(s) de 2 à 6

Voilà, continuons avec les détails :
ferme la fenêtre de code, et ré-ouvre là en cliquant sur Timer2.
Ajoute le code :

Private Sub Timer2_Timer()
Timer1.Interval = 60
Timer2.Enabled = False
End Sub

Re-ferme, et re-ouvre la fenêtre en cliquant sur Timer3.
Ajoute le code :

Private Sub Timer3_Timer()
Timer1.Interval = 40
Timer3.Enabled = False
End Sub

De même avec Timer4 :

Private Sub Timer4_Timer()
Timer1.Interval = 25
Timer4.Enabled = False
End Sub

De même avec Timer5 :

Private Sub Timer5_Timer()
Timer1.Interval = 20
Timer5.Enabled = False
End Sub

De même avec Timer6 :

Private Sub Timer6_Timer()
Timer1.Interval = 5
Timer6.Enabled = False
End Sub

Tous ces timers réduisent l''intervalle de bouclage (de répétions de la fonction), de Timer1, puis ils s''auto-suppriment.

Le Menu

Tout petit détail et c''est fini :
Referme la fenêtre de code, et ré-ouvre là en double cliquant sur « 1 » dans le menu de Form1.

Rajoute le code :

Private Sub un_Click()
DiffLevel = 1
End Sub

De même avec deux :

Private Sub deux_Click()
DiffLevel = 2
End Sub

Puis avec trois :

Private Sub trois_Click()
DiffLevel = 3
End Sub

Si tu te rappelles bien, la variable DiffLevel est utilisée dans la fonction Player2Mouve.

Explication du code de la fonction MouvementP2

Sub MouvementP2()
If DiffLevel = 1 Then

Ces deux premières lignes sont :

  • Le début de la fonction,
  • Le début d'une boucle IF.

La condition de cette boucle est : Si la variable DiffLevel est égale à 1 Alors...

Rappelle toi : nous avons initialisé la variable DiffLevel à 1 dans la Fonction Form_Load. (Au fait, la fonction Form_Load, c''est la fonction qui est exécutée au début du programme). Donc, l''ordinateur va continuer à exécuter les lignes qui suivent jusqu'à arriver à un ElseIf ou à un End If.

If Ball.Top < (Player2.Top + (Player2.Width  / 2)) Then
    Player2.Top = Player2.Top - 30
End If
If Ball.Top > (Player2.Top + (Player2.Width / 2)) Then
    Player2.Top = Player2.Top + 30
End If

Les lignes suivantes sont, comme tu le vois, une autre boucle If intégrée dans la première. La condition de cette boucle est : Si la propriété Top de Ball est inférieure à la propriété Top de Player2 plus la propriété Width (hauteur) divisée par deux de Player2, Alors...
Ce qui correspond en fait à : Si Ball est plus haut que le centre de Player2, Alors...

La ligne suivante est :

Player2.Top = Player2.Top -- 30

En fait, cette fonction modifie la propriété Top de Player2, en lui soustrayant 30, c''est à dire en le rapprochant de 30 twips du haut de l''écran, c''est à dire, le faire monter.

Récapitulatif :
Si Ball est plus haut que Player2, Alors Player2 monte de 30 twips.

Ensuite, End If est la fin de la boucle If.

Les trois lignes suivantes (encore une autre boucle If), sont les mêmes que les premières, mais testant si la balle est plus basse que le centre de Player2, ce qui donne : Si Ball est plus bas que Player2, Alors Player2 descend de 30 twips.

ElseIf DiffLevel = 2 Then
    If Ball.Top < Player2.Top Then
        Player2.Top = Player2.Top - 40
    End If
    If Ball.Top > (Player2.Top + (Player2.Top / 2)) Then
        Player2.Top = Player2.Top + 40
    End If
ElseIf DiffLevel = 3 Then
    If Ball.Top < Player2.Top Then
        Player2.Top = Player2.Top - 55
    End If
    If Ball.Top > (Player2.Top + (Player2.Top / 2)) Then
        Player2.Top = Player2.Top + 55
    End If
End If
End Sub

Les lignes suivantes (ci-dessus) sont la même chose que celles que l''on vient d''étudier, mais avec des niveaux de difficultés différents. Tu remarqueras que les changements de difficultés se traduisent en fait par un mouvement plus rapide de Player2 (il bouge de 55 twips au niveau 3).

Tu as remarqué le End Sub : c'est la fin de la fonction.

Ouf ! C'est fini !

Ce document intitulé « [vb] créer un pong :: niveau débutant » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
[fbsl (free basic script language)] [définitions] fbsl et l'api windows
[vb6] portées des variables
Rejoignez-nous