♪
Traduction▲
Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Peter Bull, Microsoft Silverlight 4 - Memory Game with Random Shape Matching.
Introduction▲
Jeu de mémoire est un jeu simple d'association de formes aléatoires qui peut être créé avec ce tutoriel en Silverlight.
Jeu de mémoire avec l'association de formes aléatoires▲
Étape 1▲
Démarrez Microsoft Visual Web Developer 2010 Express, puis sélectionnez Fichier puis Nouveau Projet… Sélectionnez Visual Basic puis Application Silverlight 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 nouvelle fenêtre Nouvelle application Silverlight devrait apparaître, décochez la case Héberger l'application Silverlight sur un nouveau site Web, puis sélectionnez la Version de Silverlight ciblée :
Étape 3▲
Une page vierge nommée MainPage.xaml devrait alors apparaître :
Étape 4▲
Puis dans la section Tous les contrôles Silverlight de la Boîte à outils, sélectionnez le contrôle Canvas :
Étape 5▲
Dessinez un Canvas qui remplit toute la page, ou dans le volet XAML entre les lignes <Grid> et </Grid> tapez le code XAML suivant :
<Canvas Height="300" Width="400" HorizontalAlignment="Left" VerticalAlignment="Top" Name="Page">
</Canvas>Voir ci-dessous :
Étape 6▲
Ensuite, dans la section Contrôles Silverlight communs de la Boîte à outils, sélectionnez le contrôle Grid :
Étape 7▲
Dessinez un Grid en glissant un Grid de la Boîte à outils sur le Canvas, puis dans le volet XAML entre les balises <Canvas> et </Canvas> modifiez la ligne <Grid> comme ceci :
<Grid Canvas.Left="75" Canvas.Top="0" Height="250" Width="250" Name="Display"/>Voir ci-dessous :
Étape 8▲
Puis dans la section Contrôles Silverlight communs de la Boîte à outils, sélectionnez le contrôle Button :
Étape 9▲
Dessinez un bouton sur le Canvas en glissant le bouton de la Boîte à outils sur le Canvas, ensuite dans le volet XAML en dessous de la balise <StackPanel> modifiez la ligne <Button> comme ceci :
<Button Canvas.Left="163" Canvas.Top="263" Height="23" Width="75" Name="New" Content="New"/>Voir ci-dessous :
Étape 10▲
Faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code, en dessous de la ligne Inherits UserControl tapez le code suivant :
Private _moves As Integer = 0
Private _first As Integer = 0
Private _second As Integer = 0
Private _firstButton As Button
Private _secondButton As Button
Private _board(4, 4) As Integer
Private _matches As New List(Of Integer)
Private _timer As New Windows.Threading.DispatcherTimer
Étape 11▲
Toujours dans la vue de code pour MainPage.xaml, en dessous du End Sub pour le constructeur Public Sub New(), tapez la fonction suivante :
Private Function Shape(ByRef Points As _
System.Windows.Media.PointCollection) As Object
Dim _shape As New Polygon
_shape.Stretch = Stretch.Uniform
_shape.StrokeLineJoin = PenLineJoin.Round
_shape.Points = Points
_shape.Height = 30
_shape.Width = _shape.Height
_shape.Stroke = New SolidColorBrush(Colors.Black)
_shape.StrokeThickness = 4.0
_shape.Margin = New Thickness(5)
Return _shape
End Function
Étape 12▲
Puisque nous en sommes à la vue de code pour MainPage.xaml, en dessous du End Function pour la fonction Private Function Shape(), tapez la fonction suivante :
Private Function Card(ByRef Type As Integer) As Object
Dim _points As New System.Windows.Media.PointCollection
Select Case Type
Case 1 ' Circle
Dim _ellipse As New EllipseGeometry
Dim _circle As New Path
_ellipse.Center = New Point(15, 15)
_ellipse.RadiusX = 15
_ellipse.RadiusY = 15
_circle.Data = _ellipse
_circle.Stroke = New SolidColorBrush(Colors.Black)
_circle.StrokeThickness = 4.0
_circle.Margin = New Thickness(5)
Return _circle
Case 2 ' Cross
Dim _lines As New Path
Dim _line1, _line2 As New LineGeometry
Dim _linegroup As New GeometryGroup
_line1.StartPoint = New Point(0, 0)
_line1.EndPoint = New Point(30, 30)
_line2.StartPoint = New Point(30, 0)
_line2.EndPoint = New Point(0, 30)
_linegroup.Children.Add(_line1)
_linegroup.Children.Add(_line2)
_lines.Data = _linegroup
_lines.Stroke = New SolidColorBrush(Colors.Black)
_lines.StrokeThickness = 4.0
_lines.Margin = New Thickness(5)
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(_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(_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(_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(_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(_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(_points)
Case Else
Return Type
End Select
End Function
Étape 13▲
Puisque nous en sommes toujours à la vue de code pour MainPage.xaml, en dessous du End Function pour la fonction Private Function Card(…), tapez les Subs suivants :
Private Sub Clear()
If Not _firstButton Is Nothing Then
_firstButton.Content = Nothing
_firstButton = Nothing
End If
If Not _secondButton Is Nothing Then
_secondButton.Content = Nothing
_secondButton = Nothing
End If
_timer.Stop()
End Sub
Private Sub Button_Click(ByVal sender As System.Object, _
ByVal e As System.Windows.RoutedEventArgs)
Dim _btn As New Button
Dim _row, _col, _selected As Integer
If Not _timer.IsEnabled Then
_btn = CType(sender, Button)
_row = _btn.GetValue(Grid.RowProperty)
_col = _btn.GetValue(Grid.ColumnProperty)
_selected = _board(_row, _col)
If _matches.IndexOf(_selected) < 0 Then ' No Match
If _first = 0 Then
_firstButton = _btn
_first = _selected
_firstButton.Content = Card(_selected)
ElseIf _second = 0 Then
_secondButton = _btn
If Not _firstButton.Equals(_secondButton) Then ' Different
_second = _selected
_secondButton.Content = Card(_selected)
If _first = _second Then ' Is Match
_matches.Add(_first)
_matches.Add(_second)
MessageBox.Show("Match!", "Memory Game", MessageBoxButton.OK)
If _matches.Count = 16 Then
MessageBox.Show("Well Done! You matched them all in " & _moves & " moves!", _
"Memory Game", MessageBoxButton.OK)
End If
Else ' No Match
_timer.Interval = TimeSpan.FromSeconds(1.5)
AddHandler _timer.Tick, AddressOf Clear ' Clear Buttons after 1.5 Seconds
_timer.Start()
End If
_moves += 1
_first = 0
_second = 0
End If
End If
End If
End If
End Sub
Étape 14▲
En restant toujours dans la vue de code pour MainPage.xaml, en dessous du End Sub pour Private Sub Button_Click(), tapez les Subs suivants :
Private Sub Add(ByRef Grid As Grid, ByRef Row As Integer, ByRef Column As Integer)
Dim _btn As New Button
AddHandler _btn.Click, AddressOf Button_Click
_btn.Content = Nothing
_btn.Margin = New Thickness(5)
_btn.SetValue(Grid.ColumnProperty, Column)
_btn.SetValue(Grid.RowProperty, Row)
Grid.Children.Add(_btn)
End Sub
Private Sub Layout(ByRef Grid As Grid)
Grid.Children.Clear()
Grid.ColumnDefinitions.Clear()
Grid.RowDefinitions.Clear()
For Index As Integer = 0 To 3 ' Setup 4x4 Grid
Grid.RowDefinitions.Add(New RowDefinition)
Grid.ColumnDefinitions.Add(New ColumnDefinition)
Next
Add(Grid, 0, 0)
Add(Grid, 0, 1)
Add(Grid, 0, 2)
Add(Grid, 0, 3)
Add(Grid, 1, 0)
Add(Grid, 1, 1)
Add(Grid, 1, 2)
Add(Grid, 1, 3)
Add(Grid, 2, 0)
Add(Grid, 2, 1)
Add(Grid, 2, 2)
Add(Grid, 2, 3)
Add(Grid, 3, 0)
Add(Grid, 3, 1)
Add(Grid, 3, 2)
Add(Grid, 3, 3)
End Sub
Étape 15▲
Toujours au niveau de la vue de code pour MainPage.xaml, en dessous du End Sub pour le constructeur Private Sub Layout(), tapez la fonction et le Sub suivants :
Private Function Random(ByRef Start As Integer, ByRef Finish As Integer, _
ByRef Total As Integer) As List(Of Integer)
Dim _number As Integer
Dim _numbers As New List(Of Integer)
While _numbers.Count < Total ' Total Numbers
Randomize(Timer) ' Random Number with Seed
_number = Int((Finish * Rnd()) + Start) ' Between Start - Finish
If Not _numbers.Contains(_number) _
Or _numbers.Count < 1 Then ' If Chosen or None
_numbers.Add(_number) ' Add Number
End If
End While
Return _numbers
End Function
Private Sub Choose()
Dim _values, _indices As New List(Of Integer)
Dim _counter As Integer = 0
While _values.Count < 17 ' Get 16 Numbers (2x8)
Dim _numbers As List(Of Integer) = Random(1, 8, 8) ' Random 1 - 8
For _number As Integer = 0 To 7
_values.Add(_numbers.Item(_number)) ' Add to Cards
Next
End While
_indices = Random(1, 16, 16) ' Random 1 - 16
For Column As Integer = 0 To 3 ' Board Columns
For Row As Integer = 0 To 3 ' Board Rows
_board(Column, Row) = _values.Item(_indices(_counter) - 1)
_counter += 1
Next
Next
End Sub
Étape 16▲
Retournez au concepteur de vues en sélectionnant l'onglet MainPage.xaml, ou faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Concepteur de vues.
Double-cliquez sur le contrôle Button « New » et tapez ceci dans le Sub New_Click :
_moves = 0
_matches.Clear()
Layout(Display)
Choose()
Étape 17▲
Enregistrez le projet maintenant que vous avez terminé l'application Silverlight. Sélectionnez Debug ensuite Démarrer le débogage ou cliquez sur Démarrer le débogage :
Une fois que vous l'aurez fait, ce qui suit apparaîtra dans une nouvelle fenêtre du navigateur :
Étape 18▲
Cliquez sur le bouton New et ce qui suit apparaîtra :
Étape 19▲
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 20▲
Fermez la fenêtre du navigateur en cliquant sur le bouton Fermer en haut à droite du navigateur Web pour Arrêter l'application.
Conclusion▲
Ceci est un jeu 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, bref ce que vous voulez !
Liens▲
Remerciements▲
Je tiens ici à remercier Peter Bull de m'avoir autorisé à traduire son tutoriel.
Je remercie tomlev pour sa relecture technique et ses propositions.
Je remercie également FirePrawn pour sa relecture orthographique et ses propositions.
