Lucky Dice

This simple game uses Random Numbers, Functions and Drawing using Windows Presentation Foundation (WPF).

www.cespage.com/vb/vb08tut7.html

Step 1

Start Microsoft Visual Basic 2008 Express Edition, then select File then New Project... Choose WPF Application from the New Project Window, enter a name for the Project and then click OK, see below:

New Project

Step 2

A Blank Window named Window1 should then appear, see below:

Window1

Step 3

Then from the Controls tab on the Toolbox select the Canvas component:

Canvas Component

Step 4

Draw two Canvases on the Window or in the XAML Pane below the "<Grid>" type the following: 

<Canvas Margin="34,34,0,0" Name="Canvas1" Height="64" Width="64" VerticalAlignment="Top" HorizontalAlignment="Left" /> 
<Canvas Margin="0,34,34,0" Name="Canvas2" Height="64" Width="64" VerticalAlignment="Top" HorizontalAlignment="Right" />

See below:

Window1 with Canvases

Step 5

Select or click on the first Canvas (Canvas1) and goto the Properties box, change the Name to "DiceOne" without the quotes, then select the second Canvas (Canvas2) and Change the Name to "DiceTwo" again without quotes, see below:

Canvas Properties

Step 6

Then from the Controls tab on the Toolbox select the Button component:

Button Component

Step 7

Draw two Buttons on the Window, by dragging the button from the Toolbox onto the Window, or in the XAML Pane above the "</Grid>" type the following: 

<Button Margin="23,0,0,12" Name="Button1" Height="23" Width="75" VerticalAlignment="Bottom" HorizontalAlignment="Left">Button</Button> 
<Button Margin="0,0,23,12" Name="Button2" Height="23" Width="75" VerticalAlignment="Bottom" HorizontalAlignment="Right">Button</Button>

See below:

Window1 with Canvases and Buttons

Step 8

Select the first Button (Button1), then goto the Properties box and change the Name to btnRoll and the Content property from Button to Roll, see below:

btnRoll Properties

Step 9

Select the second Button (Button2), then goto the Properties box and change the Name to btnNew and the Content property from Button to New Game, the window should appear as below:

btnRoll Properties

Step 10

Right Click on the Window or the entry for "Window1" in the Solution Explorer and choose the "View Code" option then below the "Class Window1" type the following: 

Private Turn As Integer

See Below:

Window1 Declarations

Step 11

While still in the Code View for Window1, above "End Class" type the following: 

Private Sub Add(ByRef Canvas As Canvas, ByRef Left As Double, _
            ByRef Top As Double, ByRef Right As Double, _
            ByRef Bottom As Double, ByRef Brush As Brush)
  Dim Dot As New Ellipse
  Dot.Width = 12
  Dot.Height = 12
  Dot.Fill = Brush
  Dot.Margin = New Thickness(Left, Top, Right, Bottom)
  Canvas.Children.Add(Dot)
  Dot = Nothing
End Sub

See Below:

Window1 Add Subroutine

Step 12

Again while still in the Code View for Window1, below the "End Sub" for "Private Sub Add(...)", type the following: 

Private Sub Face(ByRef Canvas As Canvas, ByRef Value As Integer)
  Dim Brush As SolidColorBrush = Brushes.Black
  Canvas.Children.Clear() ' Clear the Canvas
  Canvas.BitmapEffect = New Windows.Media.Effects.OuterGlowBitmapEffect
	Canvas.Background = Brushes.White
  Select Case Value
    Case 0
      ' Do nothing
    Case 1
      Add(Canvas, Canvas.Height / 2 - 6, Canvas.Height / 2 - 6, _
         Canvas.Width / 2 - 6, Canvas.Height - 6, Brush) ' Centre
    Case 2
      Add(Canvas, 6, 6, Canvas.Width - 6, _
          Canvas.Height - 6, Brush) ' Top Left
      Add(Canvas, Canvas.Width - 18, Canvas.Height - 18, _
          Canvas.Width - 6, Canvas.Height - 6, Brush) ' Bottom Right
    Case 3
      Add(Canvas, 6, 6, Canvas.Width - 6, _
          Canvas.Height - 6, Brush) ' Top Left
      Add(Canvas, Canvas.Height / 2 - 6, Canvas.Height / 2 - 6, _
         Canvas.Width / 2 - 6, Canvas.Height - 6, Brush) ' Centre
      Add(Canvas, Canvas.Width - 18, Canvas.Height - 18, _
          Canvas.Width - 6, Canvas.Height - 6, Brush) ' Bottom Right
    Case 4
      Add(Canvas, 6, 6, Canvas.Width - 6, _
          Canvas.Height - 6, Brush) ' Top Left
      Add(Canvas, Canvas.Width - 18, 6, Canvas.Width - 12, _
          Canvas.Height - 6, Brush) ' Top Right
      Add(Canvas, 6, Canvas.Height - 18, _
          Canvas.Width - 6, Canvas.Height - 6, Brush) ' Bottom Left
      Add(Canvas, Canvas.Width - 18, Canvas.Height - 18, _
          Canvas.Width - 6, Canvas.Height - 6, Brush) ' Bottom Right
    Case 5
      Add(Canvas, 6, 6, Canvas.Width - 6, _
          Canvas.Height - 6, Brush) ' Top Left
      Add(Canvas, Canvas.Width - 18, 6, Canvas.Width - 12, _
          Canvas.Height - 6, Brush) ' Top Right
      Add(Canvas, Canvas.Height / 2 - 6, Canvas.Height / 2 - 6, _
         Canvas.Width / 2 - 6, Canvas.Height - 6, Brush) ' Centre
      Add(Canvas, 6, Canvas.Height - 18, _
          Canvas.Width - 6, Canvas.Height - 6, Brush) ' Bottom Left
      Add(Canvas, Canvas.Width - 18, Canvas.Height - 18, _
          Canvas.Width - 6, Canvas.Height - 6, Brush) ' Bottom Right
    Case 6
      Add(Canvas, 6, 6, Canvas.Width - 6, _
          Canvas.Height - 6, Brush) ' Top Left
      Add(Canvas, Canvas.Width - 18, 6, Canvas.Width - 12, _
          Canvas.Height - 6, Brush) ' Top Right
      Add(Canvas, 6, Canvas.Height / 2 - 6, _
          Canvas.Width - 6, Canvas.Height - 6, Brush) ' Centre Left
      Add(Canvas, Canvas.Width - 18, Canvas.Height / 2 - 6, _
          Canvas.Width - 12, Canvas.Height - 6, Brush) ' Centre Right
      Add(Canvas, 6, Canvas.Height - 18, _
          Canvas.Width - 6, Canvas.Height - 6, Brush) ' Bottom Left
      Add(Canvas, Canvas.Width - 18, Canvas.Height - 18, _
          Canvas.Width - 6, Canvas.Height - 6, Brush) ' Bottom Right
  End Select
End Sub

See Below:

Window1 Face Subroutine

Step 13

Finally with the Code View still displayed, below the "End Sub" for "Private Sub Face(...)", type the following Function and Sub: 

Private Function DiceValue() As Integer
    Randomize()
    DiceValue = CInt(Int((6 * Rnd()) + 1))
End Function

Private Sub NewGame()
    Face(DiceOne, 0)
    Face(DiceTwo, 0)
    Turn = 1
    Me.Title = "Player One"
End Sub

See Below:

Window1 DiceValue Function and NewGame Sub

Step 14

Return to the Design view by selecting the [Design] tab or Right Click on the "View Designer" option in Solution Explorer for Window1. Double Click on the "Roll" Button (btnRoll) and type the following in the btnRoll_Click() Sub: 

If Turn = 1 Then
  Face(DiceOne, DiceValue)
  Me.Title = "Player One"
  Turn = 2
Else
  Face(DiceTwo, DiceValue)
  Me.Title = "Player Two"
  Turn = 1
End If

See Below:

Window1 Roll Click Event

Step 15

Click on the [Design] Tab to view the window again, then Double Click on the "New Game" Button (btnNew) and type the following in the btnNew_Click() Sub: 

NewGame()

See Below:

Window1 New Game Click Event

Step 16

While still in Code View, if not Right Click on the Window or the entry for "Window1" in the Solution Explorer and choose "View Code". The top of this window will have two drop-down boxes one with "(General)" in and the other "(Declarations)", click on the first and select the "(Window1 Events)" Option, then from the drop-down next to this select "Loaded", type the following in the Window1_Loaded Sub: 

NewGame()

See Below:

Window1 Loaded Event

Step 17

Save the Project as you have now finished the application, then click on Start:

Start

When you do the following will appear:

Application Running

Step 18

Click on Roll to roll the dice for Player One by clicking on Roll, see below:

Dice One Rolled

Step 19

Click on the Close button Close on the top right of Window1 to end the application.

By clicking on the Roll button it will alternate between Player One and Player Two (Left & Right). You have just created a simple Dice Game, but what about scoring and proper dice rules, try and make it have a scoring system/rules yourself and see what else you can achieve with this simple program.