logo Pierre AULAS
Visual Basic 6 - Exercice de roulette
 Parcours  |   Réalisations  |   Cours  |   Chroniques  |   Divers
Création de l'interface graphique
Définition des propriétés
Ecrire le code du programme

Juste pour aider ceux qui n'auraient pas installé VB pour le premier cours à suivre les explications, deux captures d'écran de l'interface VB, en mode graphique  :

et en mode code.

Cet exercice a pour but de vous aider à prendre en main Visual basic. Il s'agit d'une simulation de machine à sous qui une fois achevée aura l'apparence suivante:

Les étapes de programmation

L'interface de ce jeu de roulette comprend 7 objets ou contrôles au total:
  - 2 boutons qui servent à jouer et à quitter le jeu.
  - 3 étiquettes dont le contenu est modifié dynamiquement et qui affichent le résultat des tirages au sort successifs.
  - une étiquette et une image qui servent pour l'affichage. L'image n'apparaîtra à l'utilisateur que lorsque celui-ci aura tiré un 7.

Vous réaliserez ce projet en trois étapes:
  - création de l'interface utilisateur
  - définition des propriétés
  - écriture du programme

1. Création de l'interface graphique

Commencez par ouvrir un nouveau projet puis redimensionnez le formulaire jusqu'à ce que ses propriétés height et width aient respectivement les valeurs 5000 et 7000. Vous pouvez redimensionner le formulaire soit à l'aide des poignées soit à l'aide de la fenêtre des propriétés comme indiqué sur l'image ci-dessous:

Placez ensuite deux contrôles bouton de commande (CommandButton) en leur donnant une taille de 1170 par 435 qui vous sera indiqué par une info-bulle qui apparaîtra au moment où vous dimensionnerez le bouton.

Si vous avez fait une erreur, vous pouvez supprimer un des boutons en le séléctionnant puis en appuyant sur la touche "suppr.".
Pour bien centrer les deux boutons sur le formulaire, séléctionnez-les ensemble et allez dans le menu Format > Centrer sur la feuille > Centrer horizontalement.

Ajoutez maintenant 3 étiquettes (Label) d'une taille de 750 par 750 les unes à côté des autres.

Pour les aligner vous allez dans le menu Format > Aligner > Haut comme indiqué ci-dessous:

Pour les centrer horizontalement vous procédez comme avec les boutons de commande.

Il vous reste enfin à placer une étiquette (Label) en bas à gauche: elle servira à accueillir le titre, et une zone d'image (Image) en bas de 2700 par 3500 qui accueillera une image (cliquez pour la voir).

La mise en place de l'interface est finie. Vous allez maintenant définir les propriétés des différents contrôles disposés sur votre formulaire.

2. Définition des propriétés

Lorsque vous allez programmer, vous accéderez à vos contrôles via leur nom, défini par la propriété Name. Il est donc fondamental que tous vos contrôles aient été correctement nommés.
La communauté des développeurs en Visual Basic a normalisé de manière assez stricte la façon de nommer les objets. Le nom d'un objet est composé d'un préfixe de trois lettres minuscules qui indique la nature de l'objet et d'un nom commençant par une majuscule.

Liste de quelques préfixes conventionnels
 
Préfixe  Objet
frm  Formulaire
cmd  Bouton de commande (CommandBouton)
lbl  Etiquette (Label)
img  Image
txt  Zone de texte (TextBox)
cbo  Bouton radio (ComboBox)
chk  Case à cocher (CheckBox)
lst  Zone de liste (ListBox)

- cmdJouer par exemple pour un bouton de commande
- lbl01 par exemple pour une étiquette
- imgVictoire par exemple pour une image

Outre les propriétés Name de vos différents contrôles, vous allez modifier quelques autres de leurs propriétés selon les indications fournies par le tableau suivant:

Objet  Propriété  Valeur
Bouton Jouer  Name  cmdJouer
 Caption  &Jouer
Bouton Quitter  Name  cmdArret
 Caption  &Quitter
Etiquette 1  Name  lbl01
 Caption  (vide)
 BorderStyle 1-Fixed Single
 Alignment 2-Center
 Font  MS sans sérif, 24, gras
Etiquette 2  Name  lbl02
 Caption  (vide)
 BorderStyle 1-Fixed Single
 Alignment 2-Center
 Font  MS sans sérif, 24, gras
Etiquette 3  Name  lbl03
 Caption  (vide)
 BorderStyle 1-Fixed Single
 Alignment 2-Center
 Font  MS sans sérif, 24, gras
Etiquette 4  Name  lblAffichage
 Caption  Jeu de roulette
 Font  MS sans sérif, 24, gras
 ForeColor Une couleur marron
Image 1  Name  imgVictoire
 Stretch  True
 Picture  larMontsouris.jpg
 Visible  False

Pour modifier les propriétés de tous ces contrôles, il suffit de les séléctionner sur le formulaire puis de modifier leurs propriété indiquées dans la fenêtre des propriétés à droite de l'écran (cf. la capture d'écran ci-dessous).
  - la propriété Caption permet de modifier le titre d'un contrôle. La présence d'un éperluette devant une des lettres permet de créer un raccourcis accessible à l'aide de la combinaison de la touche alt + lettre.
  - la typographie peut être modifiée par la propriété Font à l'aide d'une fenêtre Windows traditionnelle.
  - la propriété BorderStyle permet de placer un petit liseré autour de l'étiquette.
  - la propriété Alignment permet de centrer le texte horizontalement.
  - la propriété ForeColor permet de modifier la couleur d'un texte.
  - l'image possède des propriétés qui lui sont propres:
    - Stretch qui oblige VB à redimensionner le graphique de manière à ce qu'il adopte les dimensions exactes de la zone d'image (quitte à le déformer).
    - Picture qui ouvre une boîte de dialogue pour séléctionner l'image.
    - Visible qui permet de rendre votre image invisible à l'utilisateur (même si celle-ci reste visible dans votre espace de développement).

Vous pouvez également naviguer entre les différents contrôles présents sur votre formulaire via la liste déroulante de la fenêtre propriété. Lorsque vos projets prendront de l'ampleur, ce type de navigation vous fera gagner du temps.

Si maintenant vous êtes content de l'organisation de votre formulaire, vous pouvez la fixer en allant dans le menu Format > Verrouiller les contrôles. Il n'est plus possible désormais de déplacer vos contrôles. Cela évite des maladresses.

Il ne vous reste plus maintenant qu'à écrire le code du programme.

3. Ecrire le code du programme

Pour accéder à la fenêtre de code: double-cliquez sur le bouton cmdArret. La fenêtre ci-dessous apparaît:

VB a écrit pour vous le début et la fin de la procédure événementielle qui se déclenche lorsque l'utilisateur clique sur le bouton cmdArret. Remarquez que le nom de cette procédure est le résultat de la combinaison du nom du contrôle, d'un "_" puis du nom de l'événement, ici Click.
Si vous avez correctement nommé vos contrôles, les procédures événementielles disponibles dans le module de votre formulaire deviennent aisées à lire.

Il ne vous reste plus qu'à écrire au sein de cette procédure le seul mot End qui déclenchera la fermeture de votre formulaire de jeu:

Private Sub cmdArret_Click()
  End
End Sub

Vous pouvez ensuite accéder à la procédure événementielle qui se déclenche lorsque le bouton cmdJouer est cliqué par l'utilisateur en naviguant avec les menus déroulant situé au dessus de la fenêtre de code comme indiqué ci-dessous:

Il ne vous reste plus qu'à y écrire le code suivant:

Private Sub cmdJouer_Click()
  imgVictoire.Visible = False 'Masque l'image
  lbl01.Caption = Int(Rnd * 10) 'Tirage au sort aléatoire
  lbl02.Caption = Int(Rnd * 10) 'et affectation au contenu
  lbl03.Caption = Int(Rnd * 10) 'des 3 labels
  'Si l'un des labels vaut 7, on affiche l'image
  If (lbl01.Caption = 7) Or (lbl02.Caption = 7) _
    Or (lbl03.Caption = 7) Then
    imgVictoire.Visible = True
    Beep
  End If
End Sub

Ce code a pour but d'affecter aux trois étiquettes un contenu aléatoire.
Si l'un de ces contenus est égal à 7, on affiche l'image et on produit un son.

Il ne vous reste plus qu'à enregistrer votre programme et à lancer son exécution à l'aide du menu Execution > Executer comme décrit ci-dessous.

Si vous jouez avec votre programme et que vous vous amusez à le lancer plusieurs fois, vous vous apercevrez que le tirage au sort commence toujours par les mêmes séries de chiffre.
Pour éviter cela rouvrez maintenant votre projet et double-cliquez sur le fond de votre formulaire.
La fenêtre de code devrait s'ouvrir avec la procédure événementielle Form_Load dans laquelle vous n'avez plus qu'à rajouter:

Private Sub Form_Load()
  Randomize
End Sub

qui force VB à rénitialiser sa fonction Rnd (random) à chaque redémarrage de votre application.

Les sources de cet exercice sont disponibles ici en faisant un clic droit "Enregistrer la cible de ce lien".

Plan du site  |  Mentions légales  |  Crédits  |  Aide