IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Microsoft Silverlight 4 - Tutoriel 10 : Jeu de mémoire

Jeu de mémoire avec l'association de formes aléatoires

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

Langage : VB.NET

Public visé : niveau Intermédiaire

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

Article lu   fois.

Les trois auteurs et traducteur

Profil ProSite personnel

Traducteur : Profil Pro

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, 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 :

Image non disponible

É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 :

Image non disponible

Étape 3

Une page vierge nommée MainPage.xaml devrait alors apparaître :

Image non disponible

Étape 4

Puis dans la section Tous les contrôles Silverlight de la Boîte à outils, sélectionnez le contrôle Canvas :

Image non disponible

É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 :

 
Sélectionnez
<Canvas Height="300" Width="400" HorizontalAlignment="Left" VerticalAlignment="Top" Name="Page">
</Canvas>

Voir ci-dessous :

Image non disponible

Étape 6

Ensuite, dans la section Contrôles Silverlight communs de la Boîte à outils, sélectionnez le contrôle Grid :

Image non disponible

É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 :

 
Sélectionnez
<Grid Canvas.Left="75" Canvas.Top="0" Height="250" Width="250" Name="Display"/>

Voir ci-dessous :

Image non disponible

Étape 8

Puis dans la section Contrôles Silverlight communs de la Boîte à outils, sélectionnez le contrôle Button :

Image non disponible

É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 :

 
Sélectionnez
<Button Canvas.Left="163" Canvas.Top="263" Height="23" Width="75" Name="New" Content="New"/>

Voir ci-dessous :

Image non disponible

É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 :

 
Sélectionnez
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
Image non disponible

É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 :

 
Sélectionnez
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
Image non disponible

É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 :

 
Sélectionnez
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
Image non disponible
Image non disponible

É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 :

 
Sélectionnez
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
Image non disponible
Image non disponible

É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 :

 
Sélectionnez
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
Image non disponible

É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 :

 
Sélectionnez
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
Image non disponible

É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 :

 
Sélectionnez
_moves = 0
_matches.Clear()
Layout(Display)
Choose()
Image non disponible

É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 :

Image non disponible

Une fois que vous l'aurez fait, ce qui suit apparaîtra dans une nouvelle fenêtre du navigateur :

Image non disponible

Étape 18

Cliquez sur le bouton New et ce qui suit apparaîtra :

Image non disponible

É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 :

Image non disponible

Étape 20

Fermez la fenêtre du navigateur en cliquant sur le bouton Fermer Image non disponible 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.

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 ni 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.