Creating a Video Slot game with VB.NET

Part 1 - The basics

Introduction

I have a confession to make... I like gambling. OK, I am not addicted to gambling at all, but every once in a while (when the wife and I have a date night) we'll go to an internet cafe and gamble a bit. We like playing video slot games.

I have always found them fascinating - that is mainly why I play. As curious as I am, I told my wife once that I'd like to try to make my own, hence, this article series.

Mechanics

For those that do not know what a video slot game is, let me quote from Wikipedia :

The video slot machine is a more recent innovation, with no moving parts at all – instead a graphical representation of one appears on screen. Since the player is essentially playing a computer/video game, the manufacturers are able to offer more interactive elements, such as advanced bonus games and advanced video graphics.

In addition, because there are no mechanical constraints on the design of video slot machines, most display five reels rather than three. This greatly expands the number of possibilities: a machine can have 50 or more symbols on a reel, giving odds as high as 300 million to 1 against – enough for even the largest jackpot. As there are so many combinations given by five reels, the manufacturers do not need to weight the payout symbols (although some may still do so). Instead, higher paying symbols will typically appear only once or twice on each reel, while more common symbols, earning a more frequent payout, will appear many times.

Video slot machines typically encourage the player to play multiple 'lines', so rather than simply taking the middle of the three symbols displayed on each reel, a line could go from top left to bottom right, or any of the other patterns specified by the manufacturer. As each symbol is equally likely, there is no difficulty for the manufacturer in allowing the player to take any or all of the possible lines on offer – the long-term return to player will be the same. The difference for the player is that the more lines he plays the more likely he is to get paid on a given spin – though of course he is betting more in the first place.

To avoid the feeling that the player's money is simply ebbing away (whereas a payout of 100 credits on a single line machine would be 100 bets, and the player would feel they had made a substantial win, on a 20 line machine, it would only be 5 bets and would not seem significant), manufacturers commonly offer bonus games, which can return many times their bet. The player is encouraged to keep playing to reach the bonus: even if he is losing, the bonus game could allow him to win back his losses.

Our project will function the same way. Obviously I am not the world's best graphic designer, so my pictures will not be fantastic. I will try to relate the logic used to make these games to you. Unfortunately, there will be no bonus rounds. I'll leave that logic to you.

Our Project

Time to get our hands dirty! Our project's name is HTG Slots. It is a VB.NET Windows Forms Project. Once you have created the project, add the following controls to it and set the appropriate properties for each.

ControlPropertySetting
Form1 Name frmHTGSlots
  BackColor White
  Size 662, 576
  StartPosition CenterScreen
  Text HTG Slots
Timer Name tmrSlots
  Interval 10
Timer Name tmrPause
  Interval 500
PictureBox Name PicSpin
  Image HTG_Slots.My.Resources.Resources.SPIN ( Or a Picture of your choice )
  Location 542, 480
  Size 100, 50
Panel Location 24, 26
  Size 100, 244
Panel Location 130, 26
  Size 100, 244
Panel Location 236, 26
  Size 100, 244
Panel Location 342, 26
  Size 100, 244
Panel Location 448, 26
  Size 100, 244

This produces a screen with five columns, i.o.w our wheels, in which we can put all our pictureboxes. The easiest would be to add the PictureBoxes at runtime, as they will be easier to maintain and keep track of when they are stored in an array or two. We will have four pictures in each column, so that gives us twenty PictureBoxes in total. Now, we need to fill them with images and make the wheels spin! In general Video Slot games have 5 columns ( wheels ) of three pictures each. I am not saying my variant is not common; it is not as common as its three row counterpart.

Making Them Spin - the Code

The obvious place to start is with the images, and putting them into pictureboxes - which we will create on the fly. Create the following objects in General Declarations :

    Private arrImages(9) As Image 'Images
    Private Column1(3) As PictureBox 'Wheel 1
    Private Column2(3) As PictureBox 'Wheel 2
    Private Column3(3) As PictureBox 'Wheel 3
    Private Column4(3) As PictureBox 'Wheel 4
    Private Column5(3) As PictureBox 'Wheel 5

Add the next code inside Form_Load :

    Private Sub frmHTGSlots_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        'Load all images from resources
        arrImages(0) = My.Resources.applesmall1
        arrImages(1) = My.Resources.bananasmall1
        arrImages(2) = My.Resources.cherry21
        arrImages(3) = My.Resources.fruitbowlz1
        arrImages(4) = My.Resources.grapesmall1
        arrImages(5) = My.Resources.lemonsmall1
        arrImages(6) = My.Resources.orangesmall1
        arrImages(7) = My.Resources.strawberrysmall1
        arrImages(8) = My.Resources.Kiwi1
        arrImages(9) = My.Resources.Pineapple_jumps1
    End Sub

We have created the picturebox arrays to be used as our wheels, and we initialized our Images array with pictures that I have added into the project's resources. These pictures I have found on the internet - there are numerous websites that offer free gif files - feel free to use these, or add your own. Now we need to display the pictures randomly in all possible 20 pictureboxes. Add the following objects to your General Declarations section :

    Private RandGen As Random 'Random number generator
    Private RandIndex As Integer 'Random index

Creating a Video Slot game with VB.NET - Page 2

Edit your Form_Load Event

Edit your Form_Load event to add the pictureboxes into the panels, and load the images randomly. Your Form_Load should resemble:

    Private Sub frmHTGSlots_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        'Load all images from resources
        arrImages(0) = My.Resources.applesmall1
        arrImages(1) = My.Resources.bananasmall1
        arrImages(2) = My.Resources.cherry21
        arrImages(3) = My.Resources.fruitbowlz1
        arrImages(4) = My.Resources.grapesmall1
        arrImages(5) = My.Resources.lemonsmall1
        arrImages(6) = My.Resources.orangesmall1
        arrImages(7) = My.Resources.strawberrysmall1
        arrImages(8) = My.Resources.Kiwi1
        arrImages(9) = My.Resources.Pineapple_jumps1

        RandGen = New Random(Now.Millisecond) 'Generate new random seed

        Dim i As Integer 'Loop counter

        For i = 0 To 3 'Loop rows

            Column1(i) = New PictureBox 'Create new pictureboxes
            Column2(i) = New PictureBox
            Column3(i) = New PictureBox
            Column4(i) = New PictureBox
            Column5(i) = New PictureBox

            RandIndex = RandGen.Next(0, 9)


            With Column1(i) 'Set properties to fit nicely into panels
                .SizeMode = PictureBoxSizeMode.StretchImage

                .Image = arrImages(RandIndex)

                .BackColor = System.Drawing.Color.White
                .BorderStyle = BorderStyle.Fixed3D

                Select Case i
                    Case 0
                        Column1(i).Top = 26
                    Case 1
                        Column1(i).Top = 82
                    Case 2
                        Column1(i).Top = 138
                    Case 3
                        Column1(i).Top = 194

                End Select

                .Visible = True
            End With

            RandIndex = RandGen.Next(0, 9)

            With Column2(i)
                .SizeMode = PictureBoxSizeMode.StretchImage

                .Image = arrImages(RandIndex)

                .BackColor = System.Drawing.Color.White
                .BorderStyle = BorderStyle.Fixed3D

                Select Case i
                    Case 0
                        Column2(i).Top = 26
                    Case 1
                        Column2(i).Top = 82
                    Case 2
                        Column2(i).Top = 138
                    Case 3
                        Column2(i).Top = 194

                End Select

                .Visible = True
            End With

            RandIndex = RandGen.Next(0, 9)

            With Column3(i)
                .SizeMode = PictureBoxSizeMode.StretchImage

                .Image = arrImages(RandIndex)

                .BackColor = System.Drawing.Color.White
                .BorderStyle = BorderStyle.Fixed3D

                Select Case i
                    Case 0
                        Column3(i).Top = 26
                    Case 1
                        Column3(i).Top = 82
                    Case 2
                        Column3(i).Top = 138
                    Case 3
                        Column3(i).Top = 194

                End Select

                .Visible = True
            End With

            RandIndex = RandGen.Next(0, 9)

            With Column4(i)
                .SizeMode = PictureBoxSizeMode.StretchImage

                .Image = arrImages(RandIndex)

                .BackColor = System.Drawing.Color.White
                .BorderStyle = BorderStyle.Fixed3D

                Select Case i
                    Case 0
                        Column4(i).Top = 26
                    Case 1
                        Column4(i).Top = 82
                    Case 2
                        Column4(i).Top = 138
                    Case 3
                        Column4(i).Top = 194

                End Select

                .Visible = True
            End With

            RandIndex = RandGen.Next(0, 9)

            With Column5(i)
                .SizeMode = PictureBoxSizeMode.StretchImage

                .Image = arrImages(RandIndex)

                .BackColor = System.Drawing.Color.White
                .BorderStyle = BorderStyle.Fixed3D

                Select Case i
                    Case 0
                        Column5(i).Top = 26
                    Case 1
                        Column5(i).Top = 82
                    Case 2
                        Column5(i).Top = 138
                    Case 3
                        Column5(i).Top = 194

                End Select

                .Visible = True
            End With

            Me.Panel1.Controls.Add(Column1(i)) 'Add the dynamic pictureboxes
            Me.Panel2.Controls.Add(Column2(i))
            Me.Panel3.Controls.Add(Column3(i))
            Me.Panel4.Controls.Add(Column4(i))
            Me.Panel5.Controls.Add(Column5(i))

        Next i

    End Sub

The code is quite straightforward. We simply use a loop to load each row's image, and set the appropriate properties for the pictureboxes to display correctly. When run, your screen would look similar to the following figure.

All Pictures nicely organized into wheels
Figure 1 - All Pictures nicely organized into wheels

Let us now get busy spinning!

Add the next code segment :

    Private Sub picSpin_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles picSpin.Click

        RandGen = New Random(Now.Millisecond) 'Seed the randomizer

        tmrSlots.Enabled = True 'Enable slots timer
        picSpin.Enabled = False 'Disable Spin button

        picSpin.Image = My.Resources.SPIN2 'Indicate that it is in use

    End Sub

This generates a random seed, so that we can get better results with the spinning of the wheels - which in fact is actually just randomly substituting images, and starts the tmrSlots timer. Before we edit the tmrSlots event, we need new variables. Add them :

    Private Col As Integer = 1 'Keep track of current column
    Private TimeCounter As Integer 'Wheel spin duration

Now edit the tmrSlots_Tick event as follows :

    Private Sub tmrSlots_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles tmrSlots.Tick

        TimeCounter += 1 'Increment until duration is reached

        If TimeCounter <= 50 Then 'Finished spinning
            Select Case Col
                Case 1 'Wheel 1
                    Spin(Column1)
                    Panel1.BackColor = Color.Blue 'Indicate that wheel is busy spinning

                Case 2 'Wheel 2
                    Spin(Column2)
                    Panel1.BackColor = Color.White
                    Panel2.BackColor = Color.Red

                Case 3 'Wheel 3
                    Spin(Column3)
                    Panel1.BackColor = Color.White
                    Panel2.BackColor = Color.White
                    Panel3.BackColor = Color.LightGreen

                Case 4 'Wheel 4
                    Spin(Column4)
                    Panel1.BackColor = Color.White
                    Panel2.BackColor = Color.White
                    Panel3.BackColor = Color.White
                    Panel4.BackColor = Color.Yellow

                Case 5 'Wheel 5
                    Spin(Column5)
                    Panel1.BackColor = Color.White
                    Panel2.BackColor = Color.White
                    Panel3.BackColor = Color.White
                    Panel4.BackColor = Color.White
                    Panel5.BackColor = Color.Black

            End Select

        Else
            tmrSlots.Enabled = False ' Done spinning, move to next wheel
            tmrPause.Enabled = True 'Wait a bit, before proceeding

        End If

    End Sub

Also relatively straightforward. All we do is to have the counter count to 50, while spinning. The actual spinning code is called from the Spin sub, which we will add now, and then we set the background colours of the panels; just for a bit of visual appeal. Add the Spin sub now :

    'Emulates spinning of the wheels by shuffling the pictures randomly
    Private Sub Spin(ByVal Col() As PictureBox)
        Dim i As Integer 'Row counter

        For i = 0 To 3 'Loop each row
            Col(i).Image = arrImages(RandIndex) 'Shuffle pictures
            RandIndex = RandGen.Next(0, 9) 'Generate new random number

        Next i

    End Sub

The above sub, generates a random number between 0 and 9, then we set the pictureboxes' pictures to a random number in the array. The last step is to bring some sort of a pause feature between spinning the wheels, add the next code to the tmrPause_Tick event :

    Private Sub tmrPause_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles tmrPause.Tick

        If Col <= 5 Then 'Reset timecounter for each column
            Col += 1
            TimeCounter = 0
            tmrPause.Enabled = False
            tmrSlots.Enabled = True

        Else 'Done with all columns
            Col = 1
            TimeCounter = 0
            tmrPause.Enabled = False
            tmrSlots.Enabled = False
            picSpin.Enabled = True

            Panel5.BackColor = Color.White
            picSpin.Image = My.Resources.SPIN 'Enable spin button again

        End If

    End Sub

That's it! Run your project now, and you'll see the wheels "spinning" when the Spin button was clicked. It looks similar to Figure 2

Third wheel spinning
Figure 2 - Third wheel spinning

Conclusion

This concludes the first installment of this series. In the next part we will learn how to implement the betting logic into our project. Until then, cheers and have fun!



Related Articles

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • IBM Worklight is a mobile application development platform that lets you extend your business to mobile devices. It is designed to provide an open, comprehensive platform to build, run and manage HTML5, hybrid and native mobile apps.

  • A modern mobile IT strategy is no longer an option, it is an absolute business necessity. Today's most productive employees are not tied to a desk, an office, or a location. They are mobile. And your company's IT strategy has to be ready to support them with easy, reliable, 24/7 access to the business information they need, from anywhere in the world, across a broad range of communication devices. Here's how some of the nation's most progressive corporations are meeting the many needs of their mobile workers …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds