Atelier : Jeu casse-briques.

Prérequis : développement d'interfaces en Visual Basic.

Un exemple de casse-brique ici (nécessite les DLL Visual Basic 5).

Le premier travail est de développer une interface semblable à celle représentée ci-contre :

• Créez un nouveau projet Visual Basic. Conservez la fenêtre Form1 qui s'affiche par défaut : nous allons travailler dans celle-ci.
  
  
• Sauvegardez immédiatement le projet et la feuille (menu Fichier, Enregistrer le projet sous ...) à un endroit approrié dans Z:\, par exemple Z:\Projets\Casse-Briques\.
  
  
• Pour la raquette et la balle, placez dans Form1 deux contrôles Shape que vous renommez respectivement Raquette et Balle, grâce à la propriété (Name). Vous pouvez modifier leur aspect grâce aux propriétés :
  • BackStyle (fond opaque ou transparent ?) ;
  • BorderColor (couleur de la bordure extérieure) ;
  • BackColor (couleur du fond, s'il n'est pas transparent) ;
  • Shape (rond, rectangle, etc.).
    
    
• Pour les briques, placez un groupe de contrôles Shape. C'est à dire :
  • posez un premier contrôle Shape et renommez-le Brique ;
  • Mettez sa propriété Index à 0. C'est ainsi que vous créez un tableau (ou groupe) de contrôles. Cette première brique est à l'indice 0 de ce tableau de contrôle.
  • copier/collez autant de fois que nécessaire pour avoir toutes vos briques.
    
• Pour exécuter le jeu à intervalles réguliers, ajoutez un contrôle Timer  (n'importe où dans la feuille, de toute façon il sera invisible à l'exécution). Donnez-lui la propriété Interval=50 (soit 50 millisecondes, cela signifie que le jeu s'exécutera 20 fois par seconde).
  
  
• Si vous souhaitez mettre une image en fond, c'est grâce à la propriété Picture de la fenêtre Form1.

• Faites apparaître la procédure événementielle Form_Load (en double-cliquant sur le fond gris de Form1). C'est la procédure qui s'exécute au démarrage de l'application.
  
  
• Cette procédure a uniquement pour rôle d'initialiser les vitesses d'origine de la balle. Tapez :
  
    VitesseH = Screen.TwipsPerPixelX * 20 ' vitesse verticale (en abscisse) positive, donc vers la droite.
    VitesseV = Screen.TwipsPerPixelY * (-10) ' vitesse horizontale (en ordonnée) négative, donc vers le haut.
  
  
• Déclarez ces variables (ainsi que toutes celles dont il sera question dans cet atelier, je ne le rappellerai pas), au début du programme (avant toutes les procédures) :
  
    Option Explicit
    Dim VitesseH as Integer, VitesseV as Integer
  

• Faites apparaître la procédure Form_MouseMove grâce aux deux zones de liste, au-dessus du code Visual Basic, représentées ci-contre. Surtout ne la tapez pas son en-tête à la main : cette fonction ne marchera pas si elle n'est pas correctement paramétrée. Cette fonction s'exécute automatiquement lorsqu'on déplace la souris au-dessus de Form1.
  
  
• Remarquez ses paramètres : Button, Shift, X, Y. Ici on va utiliser uniquement X, qui correspond à l'abscisse du curseur de la souris.
  
  
• Dans cette fonction, vous devez écrire le code qui déplace l'abscisse de la raquette (Raquette.Left) à la position du curseur de la souris (X).
  
  
• Ou mieux, si vous y arrivez, centrez la raquette sur l'abscisse de la souris. Les variables dont vous avez besoin sont indiquées sur le shéma ci-contre, cela demande juste de résoudre une simple équation mathématique :
  
      Raquette.Left + Raquette.Width \ 2 = x
  <=> Raquette.Left = ???

• On va écrire ici la procédure événementielle qui Timer1_Timer qui s'exécute 20 fois par seconde. Cette procédure va gérer le déplacement de la balle et tester les collisions entre :
  • la balle et le bord de l'écran,
  • la balle et chaque brique,
  • la balle et la raquette.
    
    
• Pour faire apparaître cette procédure, double-cliquez sur le contrôle Timer dans Form1.
  
  
• Transposez l'algorithme suivant en Visual Basic. Aidez-vous de toutes les indications qui suivent.
  
  Private Sub Timer1_Timer()
    Mouvoir la balle
    Si la balle sort de Form1 à gauche ou à doite -> inverser sa vit. horizontale
    Si la balle sort de Form1 en haut ou en bas -> inverser sa vit. verticale
    Si la balle rebondit sur la raquette alors inverser sa vitesse verticale
    Pour chaque brique encore visible
      Si la balle entre en collision avec la brique alors
        Inverser les vitesses de la balle
        Rendre la brique invisible
    Fin Pour
  End Sub
  

• Il suffit d'écrire les instructions qui réalisent les opérations suivantes :
  • ajouter la vitesse horizontale (VitesseH) à l'abscisse de la balle (Balle.Left) ;
  • ajouter la vitesse verticale (VitesseV) à l'ordonnée de la balle (Balle.Top)
    
    
• Vous pouvez tester avant de passer à la suite : la balle devrait se déplacer jusqu'à ce qu'elle disparaisse de l'écran.

• Par exemple, pour tester si la balle sort de la fenêtre à droite, on teste : est-ce que l'abscisse à droite de la balle est devenue plus grande que l'abscisse à droite de la fenêtre ? Cela se traduit, en Visual Basic, par :
  
    If Balle.Left + Balle.Width > Form1.Width then VitesseH = - VitesseH
  
  
• Faites chacun des quatre tests, sachant que les coordonnées de la fenêtre sont :
  • La gauche de la fenêtre a pour abscisse 0.
  • La droite de la fenêtre a pour abscisse Form1.Width.
  • Le haut de la fenêtre a pour ordonnée 0.
  • Le bas de la fenêtre a pour ordonnée Form1.Height - 350.
    
    
• Vous pouvez tester avant de passer à la suite, la balle doit maintenant rester tout le temps dans la fenêtre.

• Ecrivez l'algorithme en utilisant un test simplifié de collision boule/rectangle (intersection de rectangles). Il donnera parfois des résultats bizarres, mais on pourra l'améliorer par la suite. Il y a collision si :
  
    Si Balle.Droite > Raquette.Gauche et Balle.Gauche < Raquette.Droite
    et Balle.Haut < Raquette.Bas et Balle.Bas > Raquette.Haut
  
  
• Attention, en écrivant ce test en Visual Basic vous devez faire attention à remplacer les propriétés gauche, droite, haut, bas (qui n'existent pas) par les propriétés accessibles en VB :
  • la gauche de la balle est Balle.Left ;
  • la droite de la balle est Balle.Left + Balle.Width ;
  • le haut de la balle est Balle.Top ;
  • le bas de la balle est Balle.Top + Balle.Height ;
  • pareil pour la raquette et les briques.
    
    
• Lorsque la balle rebondit sur la raquette, forcez sa vitesse verticale vers le haut (on évite ainsi certains mauvais rebonds) :
  
    VitesseV = - Abs(VitesseV)
  
  
• Vous pouvez tester avant de passer à la suite, la balle doit maintenant rebondir sur la raquette.

• Les briques sont représentées par un groupe de contrôle. Une boucle qui permet de faire un traitement sur toutes les briques va s'écrire (où iBrique est une variable de type Integer, et Brique est le nom de votre groupe de contrôle) :
  
     For iBrique = 0 To Brique.Count - 1
      Traitement de Brique(iBrique)
    Next iBrique
  
  
• Pour savoir si une brique est encore visible, ou pour la rendre invisible, on utilise la propriété Visible :
  
    If Brique(iBrique).Visible then ... (teste si la brique est visible)
    Brique(iBrique).Visible = FALSE     (rend la brique invisible)
  
  
• Vous devez écrire le code pour le test de collision entre la balle et les briques. Pour l'instant, faites le même test que pour la collision avec la raquette. Cela va donner des résultats bizarres, mais on va les améliorer après.
  
  
• Lorsque la balle rebondit sur une brique, commencer simplement par inverser sa vitesse horizontale et sa vitesse verticale. Ceci sera amélioré dans l'étape suivante.
  

• Pour améliorer les rebonds contre la raquette (et contre les briques), il faut détecter dans quel quartier la balle a touché la raquette. Par exemple, sur le dessin ci-contre, la balle a touché la raquette dans le quartier haut, elle va donc rebondir vers le haut.
  
  
• On peut généraliser en disant :
  • si la balle touche la raquette dans le quartier haut ou bas, elle rebondit verticalement (on inverse donc la vitesse verticale)
  • si la balle touche la raquette dans le quartier gauche ou droit, elle rebondit horizontalement (on inverse donc la vitesse horizontale).
    
    
• Sur le shéma ci-contre (dessiné grâce à un logiciel professionnel de CAO extrêmement coûteux :-), sont illustrés les calculs mathématiques qu'il va falloir faire :
  • La balle est dans le quartier haut si :
      sin(alpha') > sin (alpha)
  • La balle est dans le quartier bas si :
      sin(alpha') < -sin(alpha)
  • Pour calculer les sinus :
      sin(alpha') = b' / a'
      sin(alpha) = b / a
  • Pour calculer a, b, a', b' :
      b = Raquette.Height / 2
      a = sqr((Raquette.Width / 2) ^ 2 + b ^ 2)
      b' = Raquette.Top + Raquette.Height / 2 - Balle.Top - Balle.Height / 2
      a' = sqr((Raquette.Left + Raquette.Widtht / 2 - Balle.Left - Balle.Width / 2)^2 + b' ^ 2)
    
    
• Vous avez toutes les indications pour réaliser les rebonds plus réalistes. Lancez-vous en n'oubliant pas de décomposer les calculs étape par étape dans des variables intermédiaires, pour garder un code lisible.