Objective
To introduce you to what it is like to program a computer.Summary
You will use Visual Basic to construct Lucky Seven, a simple game that simulates a lucky number slot machine. Note that this is not a programming class, and you are not learning how to program. This is just to give you a feel for what the programming process is like. You are not expected to understand how the program code works, just to gain an appreciation for what goes into computer programming. Please follow the instructions carefully.
Overview
To write Visual Basic programs, there are three main steps that are carried out:
-
Create the User Interface. This involves creating the window for the program and placing on it the buttons, text boxes, menus, pictures, and other controls which the program's users will see and interact with.
-
Set the Properties. Each of the items which have been placed on the program window will usually need to have various properties set, like sizes, fonts, and other settings.
-
Insert the Program Code. This involves typing in the commands according to the Visual Basic programming language. These commands carry out the tasks the program is supposed to perform. This is the step where the program is programmed to actually do something.
Part 1: Creating the User Interface
Create a New Project
-
On your flash drive, create a new folder for this lab in your class folder called Lucky or VB or something similar.
-
Save this image (called PayCoins.jpg) to your assignment folder. You'll need it later:
Start Microsoft Visual Studio 2005. It's on the Start menu under Computer Science, then Microsoft Visual Studio 2005.
On the Visual Studio File menu, click New and then Project. (The New Project dialog box appears.)
-
In the Project Types area of the dialog box, click on Windows under Visual Basic if it is not already selected. (You may have to click the + if the Visual Basic project types are not open.) Your screen should look like this:
Click the Windows Application icon in the Templates area of the dialog box, if it is not already selected.
In the Name text box, type MyLucky7. (The Solution Name text box should change to match what you put in the Name box.
-
Click on the Browse button to the far right of the Location text box. The Project Location dialog box appears:
-
Click on the Desktop icon on the left, browse to your assignment folder on your Flash drive, and click the Open button.
Your New Project window should look like:
Click OK to create the new project in Visual Studio. (Visual Studio takes a few seconds to build your new programming project. It displays the blank Windows form that you will use to build your user interface.)
Now you'll enlarge the form and create the two buttons in the interface.
Create the User Interface
Position the mouse pointer over the lower-right corner of the form until its shape changes to a resizing pointer, and then drag to increase the size of the form to make room for the buttons and other objects in your program.
Size your form so that it is about the size of the form shown here. If you want to match this example exactly, you can use the width and height dimensions (485 pixels x 278 pixels) shown in the lower-right corner of the screen:
Now you'll add a button on the form.
Click the Toolbox tab to display the Toolbox window. (If you can't see the Toolbox tab, click on Toolbox in the View Menu.
-
If the Common Controls section of the Toolbox is closed, click on the + to open it:
Double-click the Button control in the Toolbox, and then move the mouse pointer away from the Toolbox.
Visual Studio creates a default-sized button object on the form and hides the Toolbox:
Double-click the Button control in the Toolbox again to create a second button.
-
You can move a button by positioning the mouse pointer over the button so that the pointer changes to a four-headed arrow, and then drag the button where you want it. Move the buttons so that the form looks like this:
Now you'll add the labels used to display the numbers in the program. A label is a special user interface element designed to display text, numbers, or symbols when a program runs. When the user clicks the Lucky Seven program's Spin button, three random numbers will appear in these label boxes. If one of the numbers is a 7, the user wins.
Add the Number Labels
Double-click the Label control in the Toolbox.
Drag the label to the right of the two buttons.
Double-click the Label control in the Toolbox again, and move this label to the right of the first label.
Double-click the Label control in the Toolbox to create a third label, and move this label to the right of the second label.
Double-click the Label control in the Toolbox to create a fourth label, and move this label below the two buttons. The postioning of these controls does not have to be exact, but your form should look like this:
Now you'll add a picture box to the form to graphically display the payout you'll receive when the user draws a 7, thereby hitting the jackpot. A picture box is designed to display bitmaps, icons, digital photos, and other graphical elements in a program.
Add a Picture Box
Single-click the PictureBox control in the Toolbox.
-
Using the control's drawing pointer, click the mouse below the three labels and drag it down and to the right to create a large rectangular box beneath the labels:
This picture box is named PictureBox1 in your program. You'll use this name later in the program code.
-
At this point, save your work by clicking on Save All in the File menu.
Congratulations! You have finished the first part of the Lucky 7 project.
Part 2: Set the Properties
Follow these steps if you need to reopen your project. If you will continue working on this assignment now, skip to the next section, called Set the Button Properties, and return to this section when needed to reopen your project.
Reopen Your Project
Go back into Visual Basic.
-
If you can see your MyLucky7 project listed under Recent Projects, open it that way by double-clicking on it and skip down to Set the Button Properties. Otherwise continue as follows:
Click Open Project on the File menu.
-
Nagivate to the MyLucky7 folder in your class folder. Open the second MyLucky7 folder. Click on the project icon as shown below, and click Open:
Set the Button Properties
You can change the properties of an object on the form by selecting (single-clicking on) the object on the form and changing their settings in the Properties window. You'll start by changing the property settings for the two buttons.
-
Click the first button, Button1 on the form.
(The button is selected and is surrounded by resize handles.)
Click the Properties window title bar.
(The title bar is frame at the top of the window containing the word Properties. If the Properties window isn't visible, click the Properties Window command on the View menu.
Resize the Properties window (if necessary) so that there is plenty of room to see the property names and their current settings.
This Properties window is a good size for setting properties:
The Properties window lists the settings for the first button. These include settings for the background color, text, font height, and width of the button. Because there are so many properties, Visual Studio organizes them into categories and displays them in outline view. If you want to see the properties under a category, click the plus sign (+) next to the category title.
Scroll in the Properties window until you see the Text property located in the Appearance category.
Double-click the Text property in the left column of the Properties window.
(The current Text setting, Button1, is highlighted in the Properties window.
Type Spin, and press Enter.
(The Text property changes to Spin in the Properties window and on the button on the form.)
-
Click on the second button and change its Text setting to End:
Now you'll set the properties for the labels in the program. The first three labels will hold the random numbers generated by the program and will have identical property settings.
Set the Number Label Properties
Click the first number label, Label1.
Click the AutoSize property in the Properties window, and then click the arrow that appears to the right.
Set the AutoSize property to False.
-
Click the TextAlign property, and then click the arrow that appears to the right. A graphical assortment of alignment options appears in the list box. They look like little rectangles:
Click the center option, MiddleCenter.
Click the BorderStyle property, and then click the arrow that appears to the right.
-
Click FixedSingle in the list box. (A add a thin border appears around the label.)
-
Click the Font property, and then click the button with three dots that's located next to the current font setting. (This opens the Font dialog box.)
-
Change the font to Times New Roman, the font style to Bold, and the point size to 24, and then click OK:
(The label will extend beyond the bottom of the button. This is OK for now.)
Double-click the Text property, type 0, and then press Enter.
Set all the same properties (ie. repeat the preceding steps) for Label2 and Label3.
-
Move and resize the three labels now so that they are evenly spaced and your form looks something like this:
Now you'll change the Text, Font, and ForeColor properties of the fourth label.
Set the Game Name Label Properties
Click the fourth label object, Label4.
Change the Text property in the Properties window to Lucky Seven.
Click the Font property, and then click the button with three dots.
Change the font to Arial, the font style to Bold, and the point size to 18. Then click OK.
-
Click the ForeColor property in the Properties window, and then click the arrow in the second column. A color selection box appears:
-
Click on the Custom tab and select a color of your choosing other than black or gray.
- Now change the colors of the Number labels to something other than black. You can make all three the same or all different.
Now you're ready to set the properties for the last two objects.
The Picture Box Properties
When the person playing your game hits the jackpot (that is, when at least one 7 appears in the number labels on the form), the picture box object, which starts out blank, will change to display the PayCoins picture, showing a person dispensing money. This picture is a digitized image from an unpublished fourteenth-century German manuscript stored in JPEG format.
Click the picture box object on the form.
Click the SizeMode property in the Properties window (listed in the Behavior category), click the arrow to the right, and then click StretchImage.
-
Click the + by the Size property and set the Width to 129 and the Height to 150:
-
Click the Image property in the Properties window, and then click the button with three dots in the second column. The Select Resource dialog box appears:
Click the Local Resource option, and then click the Import button.
-
Navigate to the class folder where you previously stored the PayCoins.jpg image:
Select PayCoins.jpg, and then click Open.
(The medieval illustration of one person paying another appears in the Select Resource dialog box. The letter W represents a Win.)
Click OK.
-
Click the Visible property in the Behavior category of the Properties window, and then click the arrow to the right. Click False. (This makes the picture invisible when the game starts later when you run it.) Your completed form looks like:
Set the Form Properties
Since it may be difficult to convince people that this nifty game was really programmed by you, it will be helpful to place your autograph on it.
-
Click on the gray part of the form. This will select the form itself, rather than one of the objects on the form.
-
Change the Text property to: Lucky Seven by First Last (substituting your own name, of course). You will see your handiwork on the window caption of the form:
Well Done! You have finished the second part of this project and you only have the shortest part left. Now you're ready to move on to Part 3 where you will insert the program code to make the game actually function.
Part 3: Insert the Program Code
In this part, the program code which you will insert will make the components work like you want them to. Right now, they may look nice, but they don't do anything.
Test your Program So Far
-
If your MyLucky7 project is not open, open it now.
Run the program by clicking on the Debug button in the toolbar:
-
When your program window appears, you can see your program running. Try clicking on the Spin and End buttons. Nothing happens!
-
Click the orangeish-red X Close button (the Close button) in the upper right corner of the window to stop running your program:
Insert Program Code for the End Button
-
Return to the Visual Basic window and double-click the End button on the form.
The Code Editor appears as shown here:
-
At the place indicated by the red arrow below, type the word End:
(It must be typed after the line beginning with Private Sub Button2_Click... and before the line that says End Sub.)
-
After you've typed End, click on any white area inside this window. (After you click, End will turn blue and get indented.) You now have:
The End command you just attached to your End button will cause your program to terminate when the person running it clicks on it, acting just like the Close button we used previously.
Insert Program Code for the Spin Button
The program code for the Spin button is more extensive. You are not expected to understand how it all works, but basically, the code hides the winning picture (in case they had won on the previous spin) and creates three random numbers, 0 through 9. Then the program checks to see if any one of those numbers happen to be a 7 and if so, it shows the payout picture and produces a simple beep.
Click Designer in the View menu, which shows you your form again.
-
Double-click the Spin button on the form. (The Code Editor will appear again.)
-
Copy the lines you see here (highlight them with the mouse, right-click, and click Copy):
PictureBox1.Visible = False ' hide picture Label1.Text = CStr(Int(Rnd() * 10)) ' pick numbers Label2.Text = CStr(Int(Rnd() * 10)) Label3.Text = CStr(Int(Rnd() * 10)) ' if any number is 7 display picture and beep If (Label1.Text = "7") Or (Label2.Text = "7") _ Or (Label3.Text = "7") Then PictureBox1.Visible = True Beep() End If(If you have trouble highlighing the text, copy it from here.)
-
Paste what you just copied into the Code Editor where the red arrow appears below:
Your screen now should look like the one below. If you cannot get your screen to look like this, please ask for assistance before continuing:
Insert Program Code to Randomize
This final bit of code is necessary so that you get a different set of random numbers every time you use the program.
Click Designer in the View menu, which shows you your form again.
-
Double-click on a gray part of the form where you have not placed any buttons, labels, or other components. (The Code Editor will appear again.)
After the line beginning with Private Sub Form1_Load... and before the line that says End Sub, type in: Randomize
-
Click on a white area in this window. (After you click, parentheses will be added after Randomize.) You should now have:
Click the Save All command on the File menu to save everything.
Finally! You can now take your new program for a spin.
Testing Your Program
-
As before, click the green Go button and make sure the Spin button does what it is supposed to. Make sure the Win picture appears when only one or more numbers is a 7.
-
Make sure all the labels look right, are spelled correctly, and line up neatly.
-
When you finish testing, be sure to close the program with your shiny new End button.
-
Locate the executable program for the finished project because you'll be turning it in. This executable will run on a computer even if that computer does not have Visual Basic on it, and can even be email to a friend to show off you newly found programming skills.
You can find it your class folder by navigating to your assignment folder, then MyLucky7, MyLucky7, bin, and Debug. Double-click on it, and again make sure the program runs. Make sure you grab the right one:
-
When you are finished admiring your handiwork, close the program.
Turn In Your Assignment
-
Locate the standalone executable program again (MyLucky7) and rename it following the normal pattern: John Smith Lab 2 Lucky.
-
Use the Drop Box to submit your MyLucky7 executable file.
Be sure to send me the right file or I won't be able to grade it!
Grading
program opens and runs without crashing numbers are Randomized Spin button labeled correctly and numbers appear when clicked End button labeled correctly and program ends when clicked picture initially not visible picture pops up for Win, disappears for Loss form has your First and Last name in title bar Lucky Seven label color other than black the three numbers have correct border and font properties the three numbers have colors other than black components are arranged neatly correct file (i.e. the executable) sent the first time filename matches pattern (e.g. John Smith Lab 2 Lucky)
Acknowledgments
This project was adapted from the book Microsoft Visual Basic 2005 Step by Step, by Michael Halvorson, published by Microsoft Press.
