Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Élaboration d’un PONG en VB

Par Vincent SYLVESTRE Publié le 20/04/2017 à 22:25:52 Noter cet article:
(0 votes)
En attente de relecture par le comité de lecture

Lors de la conception d’application avec Visual Studio, deux langages rentrent en jeux : le C# ainsi que le Visual Basic (VB). Ce dernier fut créé en 1991 mais il faudra attendre 2002 et 6 versions différentes avant de voir celui-ci intégré au framework .NET pour donner le VB .NET. En parallèle, le C# est apparu en même temps que le framework .NET.

L’utilisation du VB, selon les ventes de livres O’Reilly, fut plus importante que le C# jusqu’en 2006 année à laquelle le C# pris définitivement le pas sur son prédécesseur.

Dans cet article, nous allons découvrir la syntaxe du Visual Basic en recréant le jeu PONG à l’aide de Visual Studio.

Prérequis

Comme précisé plus haut, il faudra télécharger et installer Visual Studio.

J’utiliserais pour ma part Microsoft Visual Basic 2008 Express, une version gratuite, mais rien ne vous empêche de choisir une version plus complète et/ou plus à jour.

Création de l’interface graphique

Afin d’obtenir cette interface, nous allons faire un glisser-déposer de plusieurs éléments de la boite à outils (à gauche) sur la fenêtre principale.

Commencez par déposer deux Labels qui serviront pour l’affichage des scores des joueurs, puis deux Buttons, les redimensionner, un RadioButton qui fera office de balle et enfin dans la catégorie « Composants », glissez un Timer sur la fenêtre d’édition. Il servira pour le déplacement séquentiel de la balle.

Maintenant, configurons les propriétés de ces contrôles.

Cliquez sur la fenêtre principale, vous pourrez ainsi modifier son Text avec par exemple « Ping Pong ». Et, avec la même méthode, effacez le Text des Buttons.

Ensuite, configurez le nom de tous les contrôles de la même manière. Cliquez sur l’élément à renommer et changez sa propriété « (Name) ».

Nous allons les nommer comme suit :

  • LblScore1

  • LblScore2

  • Raq1

  • Raq2

  • Balle

  • FrmPingPong (la fenêtre principale)

Maintenant, nous allons configurer un intervalle de déclenchement pour le Timer. Modifiez sa propriété « Interval » à 100. Cette valeur est exprimée en milliseconde.

Création des évènements

Une fois l’interface créée, c’est bien joli mais, si on lance l’application, il ne se passera pas grand-chose:). On va devoir donc s’occuper de la partie programmation.

Tout d’abord, vous allez double-cliquer sur la fenêtre principale. Cela aura pour effet d’ouvrir un nouvel onglet dans votre IDE (environnement de développement) avec la création automatique d’une fonction Private Sub Form_Load…

Cette fonction se déclenchera automatiquement à l’ouverture de l’application.

Faites la même chose avec le Timer. La fonction Timer1_Tick se déclenchera au rythme du timer soit toutes les 100 millisecondes.

Après, pour détecter l’appuis de touches du clavier, créez cette fonction :

    Private Sub FrmPingPong_KeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles Me.KeyDown
    
    End Sub
    

L’objet e en paramètre contiendra la valeur de la touche appuyée.

Écriture du code

Déclaration des variables

Tout en haut de votre page de code, juste en dessous de Public Class FrmPingPong, vous allez déclarer toutes les variables que vous utiliserez dans la suite du code.

    Dim DepVertic As Integer    ' Distance parcourue verticalement par la balle à chaque déplacement
    Dim DepHoriz As Integer     ' Distance parcourue horizontalement par la balle à chaque déplacement
    Dim DepRaq As Integer       ' Distance parcourue verticalement par la raquette à chaque déplacement
    Dim LimiteHaut As Integer  ' Coordonnée limite haut du cadre de jeu 
    Dim LimiteBas As Integer   ' Coordonnée limite bas du cadre de jeu 
    Dim LimiteGauche As Integer ' Coordonnée limite gauche du cadre de jeu 
    Dim LimiteDroite As Integer    ' Coordonnée limite droite du cadre de jeu
      

Fonctions préliminaires

Dans le but de simplifier la compréhension et de réduire le code, vous devez créer deux fonctions qui seront réutilisées par la suite. Elles se nomment « deplacerRaqVersHaut » et « deplacerRaqVersBas ». Et leur nom, je pense, est assez explicite :).

De plus, elles prennent en paramètre :

  • Raquette, le nom de la raquette définit plus haut à déplacer.

  • Déplacement, la distance que doit parcourir la raquette vers le haut ou vers le bas.

  • Limite, qui définit la limite maximum en haut ou en bas de la raquette.

    Sub deplacerRaqVersHaut(ByRef raquette As Button, ByVal deplacement As Integer, ByVal limite As Integer)
        raquette.Top = raquette.Top - deplacement
        If raquette.Top <= limite Then
            raquette.Top = limite
        End If
    End Sub

    Sub deplacerRaqVersBas(ByRef raquette As Button, ByVal deplacement As Integer, ByVal limite As Integer)
        If raquette.Bottom < limite Then
            raquette.Top = raquette.Top + deplacement
        End If
    End Sub
      

Finalisation

Une fois toutes ces étapes préalables effectuées, vous coderez la fonction Form_Load qui se déclenche à l’ouverture de l’application. Elle devra initialiser tous ses paramètres.

    Private Sub Form_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Me.KeyPreview = True    'Permet de faire fonctionner les évènement clavier sur le formulaire
        'Initialisation des variables globales
        DepVertic = 3
        DepHoriz = 3
        DepRaq = 10
        LimiteHaut = 0
        LimiteGauche = 0
        LimiteBas = Me.Height - 38 'Ajustement de quelques pixels
        LimiteDroite = Me.Width - 5 'Ajustement de quelques pixels
        LblScore1.Text = 0
        LblScore2.Text = 0
        Timer1.Interval = 30    'Intervalle de temps en milli-seconde entre chaque déclenchement du Timer
        Timer1.Start()          'Démarrer le Timer
    End Sub
      

On passe ensuite à la fonction FrmPingPong_KeyDown qui on le rappelle va se déclencher lors l’appui d’une touche du clavier. Le but est d’appeler la bonne fonction par rapport à la touche appuyée.

    Private Sub FrmPingPong_KeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles Me.KeyDown
        Select Case e.KeyCode
            Case 65         'Touche A ascii 65 : Raq1 vers Haut
                deplacerRaqVersHaut(Raq1, DepRaq, LimiteHaut)
            Case 81         'Touche Q ascii 81 : Raq1 vers Bas
                deplacerRaqVersBas(Raq1, DepRaq, LimiteBas)
            Case 80         'Touche P ascii 80 : Raq2 vers Haut 
                deplacerRaqVersHaut(Raq2, DepRaq, LimiteHaut)
            Case 77         'Touche M ascii 77 : Raq2 vers Bas 
                deplacerRaqVersBas(Raq2, DepRaq, LimiteBas)
        End Select
    End Sub
      

Passons ensuite à la fonction Timer1_Tick qui se déclenche à chaque intervalle du compteur. Elle s’occupe du déplacement ainsi que du comportement de la balle dans différentes situations.

    Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        Balle.Top = Balle.Top + DepVertic   ' Déplacement de la balle
        Balle.Left = Balle.Left + DepHoriz

        ' Traitement du rebond en haut par inversion du signe du déplacement
        ' Traitement du rebond en bas par inversion du signe du déplacement
        If Balle.Top <= LimiteHaut Or Balle.Bottom >= LimiteBas Then
            DepVertic = -DepVertic
        End If

        ' Traitement du rebond à gauche par inversion du signe du déplacement
        If Balle.Left <= LimiteGauche Then
            LblScore2.Text += 1
            DepHoriz = -DepHoriz
        End If

        ' Traitement du rebond à droite par inversion du signe du déplacement
        If Balle.Right >= LimiteDroite Then
            LblScore1.Text += 1
            DepHoriz = -DepHoriz
        End If

        'Traitement du contact balle avec raquette1 et rebond par inversion du signe du déplacement
        If DepHoriz < 0 And Balle.Left <= Raq1.Right And Balle.Left >= Raq1.Left Then
            If Balle.Top >= Raq1.Top And Balle.Top <= Raq1.Top + Raq1.Height Then
                DepHoriz = -DepHoriz
            End If
        End If

        'Traitement du contact balle avec raquette2 et rebond par inversion du signe du déplacement
        If DepHoriz > 0 And Balle.Right >= Raq2.Left And Balle.Right <= Raq2.Right Then
            If Balle.Top >= Raq2.Top And Balle.Top <= Raq2.Top + Raq2.Height Then
                DepHoriz = -DepHoriz
            End If
        End If

    End Sub
      

Conclusion

Félicitations ! Vous venez de créer un Pong rudimentaire mais fonctionnel, mais surtout, vous avez pu appréhender les bases du langage VB.NET.

Si ce langage vous intéresse et si le jeu PONG vous plaît, de nombreuses améliorations de ce jeu sont possibles comme la gestion de nouvelles parties arrivé à un certain score par exemple.

Pour vous aider, je vous conseille de suivre un des cours sur openclassrooms : https://openclassrooms.com/courses/apprenez-a-programmer-en-vb-net .

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels