Lucky Dice

Create a simple Dice game with this Tutorial using Random Numbers, Functions all based using Silverlight.

Printer Friendly Download Tutorial (191KB) Download Source Code (6.37KB) Online Demonstration

Step 1

Start Microsoft Visual Web Developer 2010 Express, then Select File then New Project... Select "Visual Basic" then "Silverlight Application" from Templates, select a Location if you wish, then enter a name for the Project and then click OK, see below:

New Project

Step 2

New Silverlight Application window should appear, uncheck the box "Host the Silverlight Application in a new Web site" and then select the required Silverlight Version, see below:

New Silverlight Application

Step 3

A Blank Page named MainPage.xaml should then appear, see below:

MainPage.xaml

Step 4

Then from the All Silverlight Controls section in the Toolbox select the Canvas control:

Canvas Control

Step 5

Draw a Canvas that fill the whole Page or in the XAML Pane between the "<Grid>" and "</Grid>" lines type the following XAML:

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

See below:

MainPage with Canvas

Step 6

Then from the Common Silverlight Controls section in the Toolbox select the Button control:

Button Control

Step 7

Draw Three Buttons on the Canvas by dragging the Buttons from the Toolbox onto the Canvas then in the XAML Pane inbetween the "<Canvas>" and "</Canvas>" tags change the "<Button> lines to the following:

<Button Canvas.Left="35" Canvas.Top="32" Height="64" Width="64" Name="Button1" Content="Button"/> 
<Button Canvas.Left="298" Canvas.Top="32" Height="64" Width="64" Name="Button2" Content="Button"/> 
<Button Canvas.Left="163" Canvas.Top="263" Height="23" Width="75" Name="Button3" Content="Button"/> 

See below:

MainPage with Canvas and Buttons

Step 8

Click on the first Button (Button1), then goto the Properties box and change the Name to "DiceOne" and have the Content Property blank (without the quotes), see below:

Button Properties

Step 9

Click on the second Button (Button2), then goto the Properties box and change the Name to "DiceTwo" and the Content property from Button to blank like the First Button.
Click on the third Button (Button3) and goto the Properties box and change the Name to "New" and the Content property to "New".
(all without the quotes), the page should appear as below:

MainPage with Canvas and Dice and New Buttons

Step 10

Right Click on the Page or the entry for "MainPage.xaml" in Solution Explorer and choose the "View Code" option. In the Code View below "End Sub" for "Public Sub New()" Constructor type the following Sub:

Private Sub Add(ByRef Grid As Grid, _
    ByRef Row As Integer, _
    ByRef Column As Integer)
  Dim _dot As New Ellipse
  _dot.Width = 12
  _dot.Height = 12
  _dot.Fill = New SolidColorBrush(Colors.Black)
  _dot.SetValue(Grid.ColumnProperty, Column)
  _dot.SetValue(Grid.RowProperty, Row)
  Grid.Children.Add(_dot)
End Sub

See Below:

MainPage Add Sub

Step 11

While still in the Code View for MainPage.xaml, below "End Sub" for "Private Sub Add(...)" Sub, type the following Function:

Private Function Dice(ByRef Value As Integer) As Grid  
  Dim _grid As New Grid
  _grid.Height = 54
  _grid.Width = 54
  For Index As Integer = 0 To 2 ' 3 by 3 Grid 
    _grid.RowDefinitions.Add(New RowDefinition)
    _grid.ColumnDefinitions.Add(New ColumnDefinition)
  Next
  Select Case Value
    Case 0
      ' No Dots
    Case 1
      Add(_grid, 1, 1) ' Middle
    Case 2
      Add(_grid, 0, 2) ' Top Right
      Add(_grid, 2, 0) ' Bottom Left
    Case 3
      Add(_grid, 0, 2) ' Top Right
      Add(_grid, 1, 1) ' Middle
      Add(_grid, 2, 0) ' Bottom Left
    Case 4
      Add(_grid, 0, 0) ' Top Left
      Add(_grid, 0, 2) ' Top Right
      Add(_grid, 2, 0) ' Bottom Left
      Add(_grid, 2, 2) ' Bottom Right
    Case 5
      Add(_grid, 0, 0) ' Top Left
      Add(_grid, 0, 2) ' Top Right
      Add(_grid, 1, 1) ' Middle
      Add(_grid, 2, 0) ' Bottom Left
      Add(_grid, 2, 2) ' Bottom Right
    Case 6
      Add(_grid, 0, 0) ' Top Left
      Add(_grid, 0, 2) ' Top Right
      Add(_grid, 1, 0) ' Middle Left
      Add(_grid, 1, 2) ' Middle Right
      Add(_grid, 2, 0) ' Bottom Left
      Add(_grid, 2, 2) ' Bottom Right
  End Select
  Return _grid
End Function

See Below:

MainPage Dice Function

Step 12

While still in the Code View for MainPage.xaml, below "End Function" for "Private Function Dice(...)" Function, type the following Function:

Private Function Roll() As Integer
  Randomize(Timer)
  Return CInt(Int((6 * Rnd()) + 1))
End Function

See Below:

MainPage Roll Function

Step 13

Return to the Designer View, by selecting the "MainPage.xaml" Tab, or Right Click on the Page or the Entry for "MainPage.xaml" in Solution Explorer and choose the "View Designer" option.
Double Click on the "New" Button Control and type in the New_Click Sub:

DiceOne.Content = Dice(0)
DiceTwo.Content = Dice(0)

See Below:

New Button Click Event

Step 14

Return to the Designer View, by selecting the "MainPage.xaml" Tab, or Right Click on the Page or the Entry for "MainPage.xaml" in Solution Explorer and choose the "View Designer" option.
Double Click on the Left-most Button (DiceOne) and type in the DiceOne_Click Sub:

DiceOne.Content = Dice(Roll)

See Below:

DiceOne Button Click Event

Step 15

Return to the Designer View, by selecting the "MainPage.xaml" Tab, or Right Click on the Page or the Entry for "MainPage.xaml" in Solution Explorer and choose the "View Designer" option.
Double Click on the Right-most Button (DiceTwo) and type in the DiceTwo_Click Sub:

DiceTwo.Content = Dice(Roll)

See Below:

DiceTwo Button Click Event

Step 16

Save the Project as you have now finished the Silverlight application. Select Debug then Start Debugging or click on Start Debugging:

Start Debugging

After you do, the following will appear in a new Web Browser window:

Application Running

Step 17

Now Click on the Left Large Button (DiceOne) for Player One, see below:

Lucky Dice

Step 18

Close the Browser window by clicking on the Close Button Close on the top right of the Web Browser to Stop the application.

Clicking on either the First Large button is Player One and the Second is Player Two (Left & Right). This is a very simple Dice Game, you could add a Score system to see who's roll is better and give that player points or see what else you can add to this simple game!

Share

Creative Commons License

Copyright Comentsys © 2009 - 2010, All rights reserved. About | Contact | Link to Page
Valid XHTML 1.1! Valid CSS Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0 This website is ICRA rated Creative Commons License