Windows Phone 7 - Tutoriel 10 : Jeu de mémoire

Jeu de mémoire avec l'association de formes aléatoires en utilisant Silverlight sur Windows Phone 7

Ce tutoriel fait partie d'une série de niveau débutant-intermédiaire pour apprendre Windows Phone 7 par le biais d'exemples pas à pas.

Langage : C#

Public visé : niveau Intermédiaire

Commentez ce tutoriel : Commentez Donner une note à l'article (5)

Article lu   fois.

Les trois auteurs et traducteur

Site personnel

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Peter Bull, Windows Phone 7 - Memory Game with Random Shape Matching using Silverlight on Windows Phone 7.

Introduction

Jeu de mémoire est un jeu simple d'association de formes qui peut être créé en utilisant Silverlight sur Windows Phone 7.

Jeu de mémoire avec l'association de formes aléatoires en utilisant Silverlight sur Windows Phone 7

Étape 1

Démarrez Microsoft Visual Web Developer 2010 Express pour Windows Phone, puis sélectionnez Fichier puis Nouveau Projet... Sélectionnez Visual C# puis Silverlight for Windows Phone puis Application Windows Phone dans les modèles installés. Sélectionnez un emplacement si vous le souhaitez, puis entrez un nom pour le projet et appuyez sur OK :

Image non disponible

Étape 2

Une page Application Windows Phone nommée MainPage.xaml devrait alors apparaître :

Image non disponible

Étape 3

Dans le volet XAML pour MainPage.xaml, entre les lignes <Grid x:Name="ContentPanel" Grid.Row="1"> et </Grid> tapez le code XAML suivant :

 
Sélectionnez
<Grid x:Name="ContentMain">
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <Button Grid.Row="1" Width="160" Content="new" Click="New_Click"/>
</Grid>

XAML :

Image non disponible

Design :

Image non disponible

Étape 4

Puis dans la section Contrôles Windows Phone de la Boîte à outils, sélectionnez le contrôle Grid :

Image non disponible

Étape 5

Dessinez un Grid sur la page en glissant un Grid de la Boîte à outils sur la partie intermédiaire du Grid sur la page, puis dans le volet XAML modifiez la ligne grid1 comme ceci :

 
Sélectionnez
<Grid Height="400" Width="400" Name="Display"/>


Voir ci-dessous :

Image non disponible

Étape 6

Faites un clic droit sur la page ou sur l'entrée « MainPage.xaml » dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code, au-dessus de namespace MemoryGame, tapez ceci :

 
Sélectionnez
using System.Windows.Threading;

Toujours dans la vue de code, au-dessus de public MainPage(), tapez les déclarations suivantes :

 
Sélectionnez
int _moves = 0;
int _first = 0;
int _second = 0;
Button _firstButton;
Button _secondButton;
int[,] _board = new int[4,4];
List<int> _matches = new List<int>();
DispatcherTimer _timer = new DispatcherTimer();
Image non disponible

Étape 7

Puisque nous en sommes à la vue de code de MainPage.xaml.cs, au-dessus de public MainPage() tapez la méthode suivante :

 
Sélectionnez
private object Shape(ref System.Windows.Media.PointCollection Points)
{
  Polygon _shape = new Polygon();
  _shape.Stretch = Stretch.Uniform;
  _shape.StrokeLineJoin = PenLineJoin.Round;
  _shape.Points = Points;
  _shape.Height = 40;
  _shape.Width = _shape.Height;
  _shape.Stroke = new SolidColorBrush((Color)
  App.Current.Resources["PhoneForegroundColor"]);
  _shape.StrokeThickness = 5;
  _shape.Margin = new Thickness(4);
  return _shape;
}
Image non disponible

Étape 8

En restant toujours dans la vue de code de MainPage.xaml.cs, en dessous du « } » de la méthode private object Shape(…), tapez la méthode suivante :

 
Sélectionnez
private object Card(ref int Type)
{
  System.Windows.Media.PointCollection _points = 
  new System.Windows.Media.PointCollection();
  switch (Type)
  {
    case 1: // Circle
      EllipseGeometry _ellipse = new EllipseGeometry();
      Path _circle = new Path();
      _ellipse.Center = new Point(20, 20);
      _ellipse.RadiusX = 20;
      _ellipse.RadiusY = 20;
      _circle.Data = _ellipse;
      _circle.Stroke = new SolidColorBrush((Color)
      App.Current.Resources["PhoneForegroundColor"]);
      _circle.StrokeThickness = 4;
      _circle.Margin = new Thickness(4);
      return _circle;
    case 2: // Cross
      Path _lines = new Path();
      LineGeometry _line1 = new LineGeometry();
      LineGeometry _line2 = new LineGeometry();
      GeometryGroup _linegroup = new GeometryGroup();
      _line1.StartPoint = new Point(0, 0);
      _line1.EndPoint = new Point(40, 40);
      _line2.StartPoint = new Point(40, 0);
      _line2.EndPoint = new Point(0, 40);
      _linegroup.Children.Add(_line1);
      _linegroup.Children.Add(_line2);
      _lines.Data = _linegroup;
      _lines.Stroke = new SolidColorBrush((Color)
      App.Current.Resources["PhoneForegroundColor"]);
      _lines.StrokeThickness = 4;
      _lines.Margin = new Thickness(4);
      return _lines;
    case 3: // Triangle
      _points.Add(new Point(150, 0));
      _points.Add(new Point(0, 250));
      _points.Add(new Point(300, 250));
      return Shape(ref _points);
    case 4: // Square
      _points.Add(new Point(0, 0));
      _points.Add(new Point(0, 100));
      _points.Add(new Point(100, 100));
      _points.Add(new Point(100, 0));
      return Shape(ref _points);
    case 5: // Pentagon
      _points.Add(new Point(0, 125));
      _points.Add(new Point(150, 0));
      _points.Add(new Point(300, 125));
      _points.Add(new Point(250, 300));
      _points.Add(new Point(50, 300));
      return Shape(ref _points);
    case 6: // Hexagon
      _points.Add(new Point(75, 0));
      _points.Add(new Point(225, 0));
      _points.Add(new Point(300, 150));
      _points.Add(new Point(225, 300));
      _points.Add(new Point(75, 300));
      _points.Add(new Point(0, 150));
      return Shape(ref _points);
    case 7: // Star
      _points.Add(new Point(9, 2));
      _points.Add(new Point(11, 7));
      _points.Add(new Point(17, 7));
      _points.Add(new Point(12, 10));
      _points.Add(new Point(14, 15));
      _points.Add(new Point(9, 12));
      _points.Add(new Point(4, 15));
      _points.Add(new Point(6, 10));
      _points.Add(new Point(1, 7));
      _points.Add(new Point(7, 7));
      return Shape(ref _points);
    case 8: // Rhombus
      _points.Add(new Point(50, 0));
      _points.Add(new Point(100, 50));
      _points.Add(new Point(50, 100));
      _points.Add(new Point(0, 50));
      return Shape(ref _points);
    default:
      return Type;
  }
}
Image non disponible
Image non disponible

Étape 9

Puisque nous en sommes toujours à la vue de code de MainPage.xaml.cs, en dessous du « } » de la méthode private object Card(…), tapez la méthode et le gestionnaire d'évènement de bouton suivants :

 
Sélectionnez
private void Clear(object sender, EventArgs e)
{
  if (!(_firstButton == null))
  {
    _firstButton.Content = null;
    _firstButton = null;
  }
  if (!(_secondButton == null))
  {
    _secondButton.Content = null;
    _secondButton = null;
  }
  _timer.Stop();
}

private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
  Button _btn = new Button();
  int _row;
  int _col;
  int _selected;
  if (!_timer.IsEnabled)
  {
    _btn = ((Button)(sender));
    _row = (int)_btn.GetValue(Grid.RowProperty);
    _col = (int)_btn.GetValue(Grid.ColumnProperty);
    _selected = _board[_row, _col];
    if ((_matches.IndexOf(_selected) < 0))
    {
      if ((_first == 0)) // No Match
      {
        _firstButton = _btn;
        _first = _selected;
        _firstButton.Content = Card(ref _selected);
      }
      else if ((_second == 0))
      {
        _secondButton = _btn;
        if (!_firstButton.Equals(_secondButton)) // Different
        {
          _second = _selected;
          _secondButton.Content = Card(ref _selected);
          if ((_first == _second)) // Is Match
          {
            _matches.Add(_first);
            _matches.Add(_second);
            MessageBox.Show("Match!", "Memory Game", MessageBoxButton.OK);
            if ((_matches.Count == 16))
            {
              MessageBox.Show(("Well Done! You matched them all in " +
              (_moves + " moves!")), "Memory Game", MessageBoxButton.OK);
            }
          }
          else // No Match
          {
            _timer.Interval = TimeSpan.FromSeconds(1.5);
            _timer.Tick += Clear; // Clear Buttons after 1.5 Seconds
            _timer.Start();
          }
          _moves++;
          _first = 0;
          _second = 0;
        }
      }
    }
  }
}
Image non disponible
Image non disponible
Image non disponible

Étape 10

Toujours dans la vue de code de MainPage.xaml.cs, en dessous du « } » de la méthode private void Button_Click(…), tapez les méthodes suivantes :

 
Sélectionnez
private void Add(ref Grid Grid, int Row, int Column)
{
  Button _btn = new Button();
  _btn.Click += Button_Click;
  _btn.Content = null;
  _btn.Margin = new Thickness(0);
  _btn.SetValue(Grid.ColumnProperty, Column);
  _btn.SetValue(Grid.RowProperty, Row);
  Grid.Children.Add(_btn);
}

private void Layout(ref Grid Grid)
{
  Grid.Children.Clear();
  Grid.ColumnDefinitions.Clear();
  Grid.RowDefinitions.Clear();
  // Setup 4x4 Grid
  for (int Index = 0; (Index <= 3); Index++)
  {
    Grid.RowDefinitions.Add(new RowDefinition());
    Grid.ColumnDefinitions.Add(new ColumnDefinition());
  }
  Add(ref Grid, 0, 0);
  Add(ref Grid, 0, 1);
  Add(ref Grid, 0, 2);
  Add(ref Grid, 0, 3);
  Add(ref Grid, 1, 0);
  Add(ref Grid, 1, 1);
  Add(ref Grid, 1, 2);
  Add(ref Grid, 1, 3);
  Add(ref Grid, 2, 0);
  Add(ref Grid, 2, 1);
  Add(ref Grid, 2, 2);
  Add(ref Grid, 2, 3);
  Add(ref Grid, 3, 0);
  Add(ref Grid, 3, 1);
  Add(ref Grid, 3, 2);
  Add(ref Grid, 3, 3);
}
Image non disponible

Étape 11

En restant toujours dans la vue de code de MainPage.xaml.cs, en dessous du « } » de la méthode private void Layout(…), tapez les méthodes suivantes :

 
Sélectionnez
private List<int> Random(int start, int finish, int total)
{
  int _number;
  List<int> _numbers = new List<int>();
  Random random = new Random();
  while ((_numbers.Count < total)) // Select Numbers
  {
    // Random Number between Start and Finish
    _number = random.Next(start, finish + 1);
    if ((!_numbers.Contains(_number)) || (_numbers.Count < 1))
    {
      _numbers.Add(_number); // Add if number Chosen or None
    }
  }
  return _numbers;
}

private void Choose()
{
  List<int> _values = new List<int>();
  List<int> _indices = new List<int>();
  int _counter = 0;
  while (_values.Count < 17)
  {
    List<int> _numbers = Random(1, 8, 8); // Random 1 - 8
    for (int _number = 0; (_number <= 7); _number++)
    {
      _values.Add(_numbers[_number]); // Add to Cards
    }
  }
  _indices = Random(1, 16, 16); // Random 1 - 16
  for (int Column = 0; (Column <= 3); Column++) // Board Columns
  {
    for (int Row = 0; (Row <= 3); Row++) // Board Rows
    {
      _board[Column, Row] = _values[_indices[_counter] - 1];
      _counter++;
    }
  }
}
Image non disponible

Étape 12

Toujours au niveau de la vue de code de MainPage.xaml.cs, en dessous du « } » de la méthode public MainPage(), tapez le gestionnaire d'évènement suivant :

 
Sélectionnez
private void New_Click(object sender, RoutedEventArgs e)
{
  _moves = 0;
  _matches.Clear();
  Layout(ref Display);
  Choose();
}
Image non disponible

Étape 13

Enregistrez le Projet maintenant que vous avez terminé l'application Windows Phone Silverlight. Sélectionnez l'option Windows Phone Emulator. Ensuite, sélectionnez Debug puis Démarrer le débogage ou cliquez sur Démarrer le débogage :

Image non disponible

Dès que vous l'aurez fait, ce qui suit apparaîtra dans l'émulateur Windows Phone une fois chargé :

Image non disponible

Étape 14

Cliquez sur le bouton new, puis cliquez sur deux boutons de votre choix pour afficher une forme, associez les formes pour en faire une paire, cela jusqu'à ce que toutes soient associées pour gagner :

Image non disponible

Étape 15

Vous pouvez ensuite Arrêter l'application en sélectionnant la fenêtre d'application Visual Studio 2010 et en cliquant sur le bouton Arrêter le débogage :

Image non disponible

Conclusion

Ceci est un jeu très simple, utilisant des formes pour chacune des cartes qui sont affichées. Essayez de le modifier pour utiliser des formes différentes, des couleurs différentes, voire différentes séquences. Vous pouvez même les faire ressembler davantage à des cartes. Personnalisez-le !

Liens

Remerciements

Je tiens ici à remercier Peter Bull de m'avoir autorisé à traduire son tutoriel.
Je remercie Jean-Michel Ormes pour sa relecture technique et ses propositions.
Je remercie également ced pour sa relecture orthographique et ses propositions.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2012 Peter Bull. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.