♪
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 :
Étape 2▲
Une page Application Windows Phone nommée MainPage.xaml devrait alors apparaître :
É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 :
<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 :
Design :
Étape 4▲
Puis dans la section Contrôles Windows Phone de la Boîte à outils, sélectionnez le contrôle Grid :
É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 :
<Grid Height="400" Width="400" Name="Display"/>
Voir ci-dessous :
É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 :
using System.Windows.Threading;Toujours dans la vue de code, au-dessus de public MainPage(), tapez les déclarations suivantes :
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();
Étape 7▲
Puisque nous en sommes à la vue de code de MainPage.xaml.cs, au-dessus de public MainPage() tapez la méthode suivante :
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;
}
É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 :
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;
}
}
É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 :
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;
}
}
}
}
}
É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 :
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);
}
É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 :
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++;
}
}
}
É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 :
private void New_Click(object sender, RoutedEventArgs e)
{
_moves = 0;
_matches.Clear();
Layout(ref Display);
Choose();
}
É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 :
Dès que vous l'aurez fait, ce qui suit apparaîtra dans l'émulateur Windows Phone une fois chargé :
É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 :
É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 :
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.
