Note : J'avais réaliser ce tutorial pour un ami, ne vous étonnez donc pas si je vous tutoies dans le lignes qui suivent.
Note 2 : je ne sais pas si les images s'afficheront, elles ne sont pas primordials de toutes façons.
Tutorial Visual Basic : Créer un Pong.
Pré-requis nécessaire :
Les variables : une variable est une valeur (des chiffres, des lettres, ou les deux) stocké 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é 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 defaut, é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 devra 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).
La boucle If-Then-Else : La boucle If-Then-Else te permet de ne réaliser certaines actions que si une certaine conditions est verifié :
Var1 = 22
If Var1 = 22 Then
Var2 = Var1
End If
Cet exemple est tout bête : il assigne 22 à la variable Var1. Ensuite arrive la boucle 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 aller directement à la ligne End If, sans exécuter la ligne Var1 = Var2. La ligne End If est la fin de la boucle 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. Vue 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. Vue qu’elle ne l’est pas non plus, elle va à la ligne Else qui signifie : si aucunes des conditions si-dessus ne sont respectés, alors… Vue 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 ?
Début du cours :
Commençons tout de suite les choses sérieuses :
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 le difficulté :
Clique sur ce bouton (3ème bouton de la barre d'outils) :
Voici a peu près la fenêtre qui s’affiche :
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 à dût apparaître sur Form1, portant les chiffres 1, 2 , et 3. Il nous serviront à régler la difficulté plus tard. 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 |
Ca, 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.
Maintenant, crée 6 Timer (l’icône en forme de chronomètre).
Tu peux les placer où tu veux, ils sont invisible 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).
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 | Label1 (je crois…) | P2Nbr |
| 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 2.
Résultat à la suite des modifications :
Voilà, l’interface est créée ! Maintenant il va falloir la programmer. Ouvre la fenêtre de code (en double cliquant sur la feuille, par exemple), puis, en dehors de toutes fonctions, toutes en haut de la feuille de code, tape :
Public BallMouveLeft
Public BallMouveTop
Public DiffLevel
Public refY
Ce sera les quatre variables qui nous seront nécessaires.
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écuter toutes les 75 millisecondes (propriété Interval de Timer1).
Rajoute le code souligné :
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 appelles de fonctions. Par exemple, la ligne :
Call MouvementP2
Elle 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 » appelle 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ée toi-même, les rendants ainsi accessible à n’importe quel endroit du code.
Il va donc falloir que l’on crée toutes ces fonctions une-à-une. 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
Rajoutes-y le code souligné :
Private Sub Form_Load()
BallMouveTop = -50
BallMouveLeft = -100
DiffLevel = 1
End Sub
Tu as dut 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.
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
Explication du code :
J’ai essayé d’espacer le code le plus possible pour te permettre de bien visualiser le tout.
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 initialiser la variable DiffLevel à 1 si-dessus, dans la Fonction Form_Load. ( Au fait, la fonction Form_Load, c’est la fonction qui est exécuter 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é dans la première. La condition de cette boucle est :
Si la propriété Top de Ball est inférieur à la propriété Top de Player2 plus la propriété Width(hauteur)divisé 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 autres lignes suivantes (encore une autre boucle If), sont les mêmes que les premiers, 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 celle que l’ont viens d’étudier, mais avec des niveaux de difficulté 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.
Il nous faut maintenant créer la fonction suivant. Fait donc comme précédemment avec le code suivant :
Sub BalleRebonditEnHaut()
If Ball.Top < 0 Then
BallMouveTop = 50
End If
End Sub
La 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 suivantes :
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és) 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 :
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. Les signes « à » signifie que cette ligne est la suite de la ligne précédente. Tu dois donc tout taper sur la même ligne.
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 suivantes 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 suivantes :
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.
Aller, la fonction suivante :
Sub MouvementDeLaBalle()
Ball.Top = Ball.Top + BallMouveTop
Ball.Left = Ball.Left + BallMouveLeft
End Sub
Cette fonction fait bouger la balle : en effet, elle ajoute au valeur 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 suivantes :
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 :
Sub Player1MarqueUnPoint()
If Ball.Left > 7440 Then
P1Nbr = P1Nbr + 1
Ball.Left = 5000
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 à laisser passer la balle, c’est-à-dire si Player1 à marquer 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 :
Sub Player2MarqueUnPoint()
If Ball.Left < 10 Then
P2Nbr = P2Nbr + 1
Ball.Left = 3000
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 :
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
Rajoute le code souligné :
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écuter 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.
Voilà, continuons avec les détails : ferme la fenêtre de code, et ré-ouvre là en cliquant sur Timer2. Ajoute le code souligné :
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 souligné :
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
Tout ces timers réduisent l’intervalle de bouclage ( de répétions de la fonction ), de Timer1, puis ils s’auto suppriment.
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 souligné :
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é dans la fonction Player2Mouve.
Ouf ! C’est fini !