BACK TO THE ROCK, PAPER AND SCISSORS GAME
It is time to turn your attention back to the development of this chapter's game project, the Rock, Paper and Scissors game. You will create this game by following the five basic development steps that you've used to create all the previous chapter projects.
Designing the Game
The Rock, Paper and Scissors game is played on a single window and is made up of one form and the 22 controls listed in Table 9.1.
| Control Type | Control Name | Description |
|---|---|---|
| PictureBox | pcbLeft | Displays an image showing the computer's selection |
| PictureBox | pcbRight | Displays an image showing the player's selection |
| Label | lblComputer | Identifies the PictureBox control where the player's computer's selection is displayed |
| Label | lblPlayer | Identifies the PictureBox control where the player's selection is displayed |
| Label | lblcountDown | Identifies the function of the ProgressBar control |
| ProgressBar | pgbCountDown | Displays a graphical 1.5-second countdown |
| Button | btnPlay | Starts game play by enabling the Timer control |
| Button | btnRock | Allows the player to select Rock |
| Button | btnPaper | Allows the player to select Paper |
| Button | btnscissors | Allows the player to select Scissors |
| GroupBox | grpStatus | Contains Label and TextBox controls that identify and display game statistics |
| Label | lblwins | Identifies the TextBox control that displays the number of games won |
| Label | lblLosses | Identifies the TextBox control that displays the number of games lost |
| Label | lblTies | Identifies the TextBox control that displays the number of games tied |
| TextBox | txtwins | Displays the number of games the player has won |
| TextBox | txtLosses | Displays the number of games the player has lost |
| TextBox | txtTies | Displays the number of games the player has tied |
| Label | lblResults | Identifies the TextBox control where the results of each game are displayed |
| TextBox | lbloutput | Displays a test string detailing the results of each game |
| ToolTip | tltcontrol | Provides the ability to assign ToolTips to individual controls |
| Timer | tmrcontrol | Controls the 1.5-second countdown sequence and the half-second windows in which the player gets to make a selection |
| ImageList | imlxands | Stores the bitmap images that are displayed in the PictureBox controls during game play |
Step 1: Creating a New Visual Basic Project
The first step in creating the Rock, Paper and Scissors game is to open up Visual Basic and create a new project as outlined below.
-
If you have not already done so, start up Visual Basic 2005 Express and then click on File and select New Project. The New Project dialog will appear.
-
Select Windows Application template.
-
Type RockPaperScissors as the name of your new application in the Name field located at the bottom of the New Project window.
-
Click on OK to close the New Project dialog.
Visual Basic will now create a new project for you and display a new form upon which you will design the game's user interface.
Step 2: Creating the User Interface
Let's begin the development of the Rock, Paper and Scissors game by laying out and resizing all of the controls that will be needed to set up the game's user interface. As you go about the job of configuring the game's user interface, refer to Figure 9.8 so that you'll know where to place each control and when and how to resize them.
Figure 9.8: Completing the interface design for the Rock, Paper and Scissors game.
-
Begin by clicking on the form and setting its Size property to 488, 456.
-
Add two PictureBox controls, one in the upper left-hand corner of the form and the other in the upper right-hand corner. Set the Size property for both PictureBox controls to 129,103.
-
Next, add a pair of Label controls to the form. Place the first one just under the first PictureBox control and the second one just under the second PictureBox control.
-
Add another Label control about an inch below the left-hand side of the first PictureBox control, and then add a ProgressBar control just beneath it, setting its Size property to 250, 34.
-
Add four Button controls to the form, as shown in Figure 9.8.
-
Add a GroupBox control to the lower left-hand corner of the form and set its Size property to 187, 108.
-
Add three Label controls and three TextBox controls inside the GroupBox control as shown in Figure 9.8.
-
Add another Label control just to the right of the GroupBox control and then add a TextBox underneath it. Set the TextBox control's Multiline property equal to True and set its Size property for the TextBox control to 229, 86.
-
Finally, add ToolTip, Timer, and ImageList controls.
At this point, you have added all of the controls that you will need in order to develop the Rock, Paper and Scissors game. In addition, you have completed the overall layout of the game's user interface and are ready to start making property modifications to the game's form and controls.
Step 3: Customizing Form and Control Properties
OK, let's get to work on making the required changes to the game's form and control properties as listed in Table 9.2.
| Property | Value |
|---|---|
| Name | frmMain |
| BackColor | LightYellow |
| FormBorderStyle | Fixed3D |
| MaximizeBox | False |
| MinimizeBox | False |
| StartPosition | CenterScreen |
| Text | Rock, Paper and Scissors |
Make the property changes shown in Table 9.3 to the PictureBox controls.
| Control | Property | Value |
|---|---|---|
| PictureBox1 | Name | pcbLeft |
| BorderStyle | Fixed3D | |
| SizeMode | StretchImage | |
| PictureBox2 | Name | pcbRight |
| BorderStyle | Fixed3D | |
| Sizemode | StretchImage |
Make the property changes shown in Table 9.4 to the Label controls.
| Control | Property | Value |
|---|---|---|
| Label1 | Name | lblComputer |
| Font.Bold | True | |
| Text | Computer's Pick | |
| Label2 | Name | lblPlayer |
| Font.Bold | True | |
| Text | Player's Pick | |
| Label3 | Name | lblCountDown |
| Font.Bold | True | |
| Text | Countdown | |
| Label4 | Name | lblWins |
| Font.Bold | True | |
| Text | Wins: | |
| Label5 | Name | lblLosses |
| Font.Bold | True | |
| Text | Losses: | |
| Label6 | Name | lblTies |
| Font.Bold | True | |
| Text | Ties: | |
| Label7 | Name | lblResults |
| Font.Bold | True | |
| Text | Game Results |
Next, change the name of the ProgressBar control to pgbCountDown. Then make the property changes shown in Table 9.5 to the four Button controls.
| Control | Property | Value |
|---|---|---|
| Button1 | Name | btnPlay |
| BackColor | ButtonFace | |
| Font.Bold | True | |
| Text | Play | |
| ToolTip | Begin 1.5 second countdown | |
| Button2 | Name | btnRock |
| BackColor | ButtonFace | |
| Enabled | False | |
| Font.Bold | True | |
| Text | Rock | |
| ToolTip | Select Rock | |
| Button3 | Name | btnPaper |
| BackColor | ButtonFace | |
| Enabled | False | |
| Font.Bold | True | |
| Text | Rock | |
| ToolTip | Select Paper | |
| Button4 | Name | btnScissors |
| BackColor | ButtonFace | |
| Enabled | False | |
| Font.Bold | True | |
| Text | Rock | |
| ToolTip | Select Scissors |
| Trick | The ProgressBar control is used to display a visual indication of the status of a process. Once added to a form, you can update the ProgressBar control's appearance by setting its Value property to zero to represent a process that has not started. You can then set the Value property anywhere between 0 and 100 to represent the current status of a process. Finally, you can set the Value property to 100 to represent a process that has completed. |
Make the property changes shown in Table 9.6 to the four TextBox controls.
| Control | Property | Value |
|---|---|---|
| TextBox1 | Name | txtWins |
| Font.Bold | True | |
| Readonly | True | |
| TextAlign | Right | |
| TextBox2 | Name | txtLosses |
| Font.Bold | True | |
| Readonly | True | |
| TextAlign | Right | |
| TextBox3 | Name | txtTies |
| Font.Bold | True | |
| Readonly | True | |
| TextAlign | Right | |
| TextBox4 | Name | txtOutput |
| Font.Bold | True | |
| Readonly | True |
Next, change the name of the ToolTip control to tltControl. Then make the property changes shown in Table 9.7 to the Timer control.
| Control | Property | Value |
|---|---|---|
| Timer1 | Name | tmrControl |
| Interval | 500 |
Finally, change the name of the Name property for the ImageList control to imlHands. Change the ImageList control's ImageSize property to 96,96 and then add the following bitmap images to its Images property (collection) as shown in Table 9.8. You'll find copies of the Bitmap images required to complete this project, along with the source code, on this book's companion web site.
| Property | File | Index No. |
|---|---|---|
| Name | Left-Paper.bmp | 0 |
| Name | Right-Paper.bmp | 1 |
| Name | Left-Rock.bmp | 2 |
| Name | Right-Rock.bmp | 3 |
| Name | Left-Scissors.bmp | 4 |
| Name | Right-Scissors.bmp | 5 |
| Name | Blank.bmp | 6 |
That's it. The user interface for the Rock, Paper and Scissors game is now complete. Let's move on to the next step and begin adding program code.
Step 4: Adding a Little Programming Logic
The first task to perform in putting together the program code for the Rock, Paper and Scissors game is to double-click on the game's form in order to open the code editor. In response, Visual Basic automatically defines a new Class for you called frmMain (the name you assigned to Form1). This derived class will inherit properties, methods, and events associated with the System.Windows.Forms base class.
Once the frmMain class has been defined, you can begin adding the program code. For starters, define a variable named intCounter with a data type of Integer as shown below. This variable will be used later in the application to keep track of a 1.5-second countdown process that controls the tempo of the game.
Public Class frmMain 'Declare a variable to be used as a counter Private intCounter As Integer End Class
There are a few one-time activities that need to be performed when the Rock, Paper and Scissors game first starts up. These activities include loading a blank bitmap image into both of the game's PictureBox controls and setting all of the Text properties for the three Textbox controls located in the GroupBox control to zero. To accomplish these activities, add the following code statements to the form's Load event.
'This procedure loads default settings when the form first loads Private Sub Forml_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load pcbLeft.Image = imlHands.Images.Item(6) 'Load a blank Bitmap pcbRight.Image = imlHands.Images.Item(6) 'Load a blank Bitmap 'Set game statistics stored in the game's Textbox control to zero txtWins.Text = 0 txtLosses.Text = 0 txtTies.Text = 03 End Sub
In order to initiate game play, the player must click on the Button control labeled Play. This button initiates the game's 1.5-second countdown process by setting the Value property of the ProgressBar control equal to 0 and then enabling the Timer control. This procedure also clears the display of any leftover text in the txtOutput(Textbox) control and sets the display of blank bitmap images in the game's two PictureBox controls. The code for the btnPlay_Click event Sub procedure is shown below.
'This procedure initiates the game's 1.5-second countdown Private Sub btnPlay_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles btnPlay.Click pgbCountDown.Value = 0 'Set ProgressBar to show 0 percent progress tmrControl.Enabled = True 'Start countdown by enabling the Timer txtOutput.Text = "" 'Clear out any text stored in the Textbox pcbLeft.Image = imlHands.Images.Item(6) 'Load a blank Bitmap pcbRight.Image = imlHands.Images.Item(6) 'Load a blank Bitmap End Sub
The Timer control is responsible for controlling the timing of the game. It simulates the amount of time that it typically takes for two players to manually sync up by performing a 1.5-second countdown. The Timer controls Interval property was set at design time to 500, which equates to a half-second. The value of the intCounter variable is incremented by 1 upon each tick of the Timer control.
The tmrControl_Tick procedure, shown below, uses a Select Case block to keep track of time. Once the first half-second has passed, the value of intCounter will be 1 and the ProgressBar control's Value property is set to 33, in order to provide the player with a visual indicator that a third of the countdown has elapsed. After the passage of a full second, the second Case statement is triggered and the ProgressBar control's Value property is updated to show that two-thirds of the countdown have elapsed.
'This procedure controls the timing of game play Private Sub tmrControl_Tick(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles tmrControl.Tick intCounter += 1 'Increment counter 'Determine the actions to take based on the counter's value Select Case intCounter Case 1 'At .5 seconds pgbCountDown.Value = 33 'Set ProgressBar to show 33% Case 2 'At 1 second pgbCountDown.Value = 66 'Set ProgressBar to show 66% Case 3 'At 1.5 seconds pgbCountDown.Value = 100 'Set ProgressBar to show 100% 'Enable the 3 game choice buttons btnRock.Enabled = True btnPaper.Enabled = True btnScissors.Enabled = True Case 4 'At 2 seconds intCounter = 0 'Set counter to zero tmrControl.Enabled = False 'Disable the Timer Control 'Disable the 3 game choice buttons btnRock.Enabled = False btnPaper.Enabled = False btnScissors.Enabled = False pgbCountDown.Value = 0 'Set ProgressBar to show 0% Case Else End Select End Sub
At 1.5 seconds, the ProgressBar control's Value property is updated to show that the countdown is complete. At this point, the buttons representing the Rock, Paper and Scissors options are enabled, and the player has a half-second in which to make a choice of which button to click. Once the last half-second interval has elapsed, the last Case statement is triggered. As a result, the value of intCounter is reset to 0, the three option buttons are disabled, the Timer control is disabled, and the ProgressBar control is cleared by setting its Value property to 0.
The code for the Button control event representing the selection of the Rock option is shown below. It includes two Dim statements that define local variables used to store both the player's and the computer's choices. The last four statements in this procedure display a graphic representing the player's choice of Rock, sets the strPlayerPick variable equal to Rock, calls on the ComputerTurn() procedure function to retrieve the computer's choice, and then passes the player's and computer's choices to the CheckGameResults() procedure for processing (to determine the results of the game).
'This procedure executes when the player selects Rock Private Sub btnRock_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles btnRock.Click Dim strPlayerPick As String 'Used to store player's move Dim strComputerPick As String 'Used to store computer's move 'Load Bitmap representing a Rock into the right-most PictureBox pcbRight.Image = imlHands.Images.Item(3) strPlayerPick = "Rock" 'Set the player's move equal to Rock 'Run procedure that determines the computer's move strComputerPick = ComputerTurn() 'Run procedure that determines who has won the game CheckGameResults(strPlayerPick, strComputerPick) End Sub
The Click event procedure for the Button control representing the Paper option is shown below. Its code is almost identical to that of the Button control for the Rock option, except that it reflects the player's choice of Paper as the move.
'This procedure executes when the player selects Paper Private Sub btnPaper_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles btnPaper.Click Dim strPlayerPick As String 'Used to store player's move Dim strComputerPick As String 'Used to store computer's move 'Load Bitmap representing Paper into the right-most PictureBox pcbRight.Image = imlHands.Images.Item(1) strPlayerPick = "Paper" 'Set the player's move equal to Paper 'Run procedure that determines the computer's move strComputerPick = ComputerTurn() 'Run procedure that determines who has won the game CheckGameResults(strPlayerPick, strComputerPick) End Sub
The code for the Button control representing the Scissors option is shown below. As you can see, it is only a slight variation of the previous two procedures.
'This procedure executes when the player selects Scissors Private Sub btnScissors_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles btnScissors.Click Dim strPlayerPick As String 'Used to store player's move Dim strComputerPick As String 'Used to store computer's move 'Load Bitmap representing Scissors into the right-most PictureBox pcbRight.Image = imlHands.Images.Item(5) strPlayerPick = "Scissors" 'Set player's move equal to Scissors 'Run procedure that determines the computer's move strComputerPick = ComputerTurn() 'Run procedure that determines who has won the game CheckGameResults(strPlayerPick, strComputerPick) End Sub
The ComputerTurn() procedure, shown below, is a custom-developed Function. Therefore, you will have to manually define it before you can begin coding it. It begins by defining a local variable that will be used to store the computer's selection. Then the Random class's Next method is used to generate a random number between 1 and 3.
'This procedure determines the computer's move Function ComputerTurn() As String 'Declare a variable to hold a randomly generated number Dim intRandomNumber As Integer Dim r As New Random 'Instantiate a Random object 'Use the Random class's Next method to get a number between 1 - 3 intRandomNumber = r.Next(1, 3) If intRandomNumber = 3 Then 'Assign Rock as the computer's turn 'Load Bitmap of Rock into left-most PictureBox pcbLeft.Image = imlHands.Images.Item(2) Return "Rock" End If If intRandomNumber = 2 Then 'Assign Scissors as the computer's turn 'Load Bitmap of Scissors into left-most PictureBox pcbLeft.Image = imlHands.Images.Item(4) Return "Scissors" End If If intRandomNumber = 1 Then 'Assign Paper as the computer's turn 'Load Bitmap of Paper into left-most PictureBox pcbLeft.Image = imlHands.Images.Item (1) Return "Paper" End If End Function
The rest of the ComputerTurn() procedure processes the randomly generated number using three If…Then statements. If the random number is equal to 3, the computer's choice is set equal to Rock and the appropriate graphic is loaded into the first PictureBox control. The second and third If…Then blocks are used to process the computer choice for Paper and Scissors.
The CheckGameResults() Sub procedure, shown below, processes two arguments. The arguments passed to it are the player's and the computer's choices. This procedure is made up of a Select Case block that compares the player's choice against each of the three possible options (Rock, Paper and Scissors). Based on which of the three options match the player's choice, three embedded If…Then statements are executed in order to determine what choice the computer was assigned by the game. Once the player's and the computer's choices have been identified, the appropriate output string is posted in the txtOutput (TextBox) control, and the value stored in the TextBox controls that represent the number of games won, lost, and tied is incremented as appropriate.
'This procedure compares the player's move to the computer's move Sub CheckGameResults(Byval strPlayerPick As String, _ ByVal strComputerPick As String) pgbCountDown.Value = 0 'Set the ProgressBar to show 0% Select Case strPlayerPick 'Process the player's move Case "Rock" 'Determine results if the player picks Rock If strComputerPick = "Rock" Then txtOutput.Text = "Rock versus Rock is a Tie!" 'Add 1 to the TextBox that displays the # of ties txtTies.Text += 1 End If If strComputerPick = "Scissors" Then txtOutput.Text = "Rock crushes Scissors. You Win!" 'Add 1 to the TextBox that displays the # of wins txtWins.Text += 1 End If If strComputerPick = "Paper" Then txtOutput.Text = "Paper covers Rock. You Lose!" 'Add 1 to the TextBox that displays the # of losses txtLosses.Text += 1 End If Case "Scissors" 'Determine results if the player picks Scissors If strComputerPick = "Rock" Then txtOutput.Text = "Rock breaks scissors. You Lose!" 'Add 1 to the TextBox that displays the # of losses txtLosses.Text += 1 End If If strComputerPick = "Scissors" Then txtOutput.Text = "Scissors versus Scissors is a Tie" 'Add 1 to the TextBox that displays the # of ties txtTies.Text += 1 End If If strComputerPick = "Paper" Then txtOutput.Text = "Scissors cut Paper. You Win!" 'Add 1 to the TextBox that displays the # of wins txtWins.Text += 1 End If Case "Paper" 'Determine results if the player picks Paper If strComputerPick = "Rock" Then txtOutput.Text = "Paper covers Rock. You Win!" 'Add 1 to the TextBox that displays the # of wins txtWins.Text += 1 End If If strComputerPick = "Scissors" Then txtOutput.Text = "Scissors cut Paper. You Lose!" 'Add 1 to the TextBox that displays the # of losses txtLosses.Text += 1 End If If strComputerPick = "Paper" Then txtOutput.Text = "Paper versus paper is a Tie!" 'Add 1 to the TextBox that displays the # of ties txtTies.Text += 1 End If End Select End Sub
Step 5: Testing the Execution of the Rock, Paper and Scissors Game
OK. That's it. The Rock, Paper and Scissors game is now ready to run. Go ahead and run the game by pressing F5 and make sure that everything works like it is supposed to. If you run into any problems, go back and double-check your typing. Once things are in order, pass it around to a few of your friends and ask them what they think.
EAN: 2147483647
Pages: 126