• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 29/04/2014

TP1 : Création du jeu du plus ou du moins

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Bienvenue dans ce premier TP ! Vous avez pu découvrir dans les chapitres précédents les premières bases du XAML permettant la construction d’applications Windows Phone. Il est grand temps de mettre en pratique ce que nous avons appris. C’est ici l’occasion pour vous de tester vos connaissances et de valider ce que vous appris en réalisant cet exercice.

Pour l'occasion, nous allons réaliser un petit jeu, le classique jeu du plus ou du moins.

Instructions pour réaliser le TP

Voici donc un petit TP sous forme de création d’un jeu simple qui va vous permettre de vous entraîner. L’idée est de réaliser le jeu classique du plus ou du moins… Je vous rappelle les règles. L’ordinateur calcule un nombre aléatoire et nous devons le deviner. À chaque saisie, il nous indique si le nombre saisi est plus grand ou plus petit que le nombre à trouver, ainsi que le nombre de coups. Une fois trouvé, il nous indique que nous avons gagné.

Nous allons donc pouvoir utiliser nos connaissances en XAML pour créer une interface graphique permettant de réaliser ce jeu. Nous aurons bien sûr besoin d’un TextBox pour obtenir la saisie de l’utilisateur. Vous pouvez ensuite utiliser un TextBlock pour donner les instructions, qui pourront être de la couleur d’accentuation. De même, vous utiliserez un autre TextBlock pour afficher le nombre de coups. Vous pourrez utiliser un bouton afin de vérifier le résultat et un autre bouton pour recommencer une partie.

Pour rappel, vous pouvez obtenir un nombre aléatoire en instanciant un objet Random et en appelant la méthode Next :

Random random = new Random();
int valeurSecrete = random.Next(1, 500);

Vous pouvez choisir les bornes que vous voulez, mais de 1 à 500 me paraît pas trop mal.
N’oubliez pas de gérer le cas où l’utilisateur saisit n’importe quoi. Nous ne voudrions pas que notre premier jeu sur Windows Phone ait un bug qui fasse planter l’application !
C’est à vous de jouer. Bon courage.

Correction

Alors, comment était ce TP ? Pas trop difficile, non ?

Alors, voyons ma correction. Il y a plusieurs façons de réaliser ce TP ainsi qu’une infinité de mise en page possible. J’ai choisi un look très simple, mais n’hésitez pas à faire parler votre créativité.

Commençons par le XAML :

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="TP du jeu du plus ou du moins" Style="{StaticResource PhoneTextTitle2Style}"/>
    </StackPanel>

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel>
            <TextBlock Text="Veuillez saisir une valeur (entre 0 et 500)" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Center" />
            <TextBox x:Name="Valeur" InputScope="Number" />
            <Button Content="Vérifier" Tap="Button_Tap_1" />
            <TextBlock x:Name="Indications" Height="50" TextWrapping="Wrap" />
            <TextBlock x:Name="NombreDeCoups" Height="50" TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}" />
        </StackPanel>
    </Grid>
    <Button Content="Rejouer" Tap="Button_Tap_2"  Grid.Row="2"/>
</Grid>

Il s’agit de disposer mes contrôles de manière à obtenir ce rendu (voir la figure suivante).

Rendu du TP du jeu du plus ou du moins dans l'émulateur
Rendu du TP du jeu du plus ou du moins dans l'émulateur

Ce qu’il est important de voir ici c’est que tous mes TextBlock possèdent un style qui sait gérer les thèmes, sauf celui pour les indications car c’est par code que je vais positionner la couleur.
Remarquez également que le TextBox affichera un clavier numérique grâce à l’InputScope qui vaut Number.

Passons à présent au code behind :

public partial class MainPage : PhoneApplicationPage
{
    private Random random;
    private int valeurSecrete;
    private int nbCoups;

    public MainPage()
    {
        InitializeComponent();

        random = new Random();
        valeurSecrete = random.Next(1, 500);
        nbCoups = 0;
        Color couleur = (Color)Application.Current.Resources["PhoneAccentColor"];
        Indications.Foreground = new SolidColorBrush(couleur);
    }

    private void Button_Tap_1(object sender, System.Windows.Input.GestureEventArgs e)
    {
        int num;
        if (int.TryParse(Valeur.Text, out num))
        {
            if (valeurSecrete == num)
            {
                Indications.Text = "Gagné !!";
            }
            else
            {
                nbCoups++;
                if (valeurSecrete < num)
                    Indications.Text = "Trop grand ...";
                else
                    Indications.Text = "Trop petit ...";
                if (nbCoups == 1)
                    NombreDeCoups.Text = nbCoups + " coup";
                else
                    NombreDeCoups.Text = nbCoups + " coups";
            }
        }
        else
            Indications.Text = "Veuillez saisir un entier ...";
    }

    private void Button_Tap_2(object sender, System.Windows.Input.GestureEventArgs e)
    {
        valeurSecrete = random.Next(1, 500);
        nbCoups = 0;
        Indications.Text = string.Empty;
        NombreDeCoups.Text = string.Empty;
        Valeur.Text = string.Empty;
    }
}

La classe Color et la classe SolidColorBrush nécessitent l’import suivant :

using System.Windows.Media;

Le jeu en lui-même ne devrait pas avoir posé trop de problèmes. L’algorithme est classique, on commence par déterminer un nombre aléatoire puis à chaque demande de vérification, on transforme la valeur saisie en entier, afin de vérifier que l’utilisateur n’a pas saisi n’importe quoi. Avec le clavier numérique, les erreurs sont limitées, mais elles sont encore possible car on demande des entiers et l’utilisateur a la possibilité de saisir des nombres à virgule. Puis on compare et on indique le résultat (voir la figure suivante).

Une partie en cours de jeu ...
Une partie en cours de jeu ...

Et voilà pour notre premier TP. Vous avez pu voir comme il est finalement assez simple de créer des petits programmes sur nos téléphones grâce au XAML et au C#.

Exemple de certificat de réussite
Exemple de certificat de réussite