C-Sharp Programming Beginner Tutorial: Rock! Paper! Scissors!

Hi everyone, welcome back for the next Lesson! I’m going to go a bit more in-depth into the IDE (Interface Development Environment) that I use along with today’s programming lesson. I use Visual Studio 2015 currently, so I’m going to assume that is what you are using (as I want to be consistent); and I’m not going to teach you how to download it either. I’ll be showing the full process of how I will be making today’s game. There’s nothing fundamentally private regarding how I create it, and there is nothing fundamentally private about the game itself, so there should be no restrictions as to programming this first real game.

Rock, Paper, Scissors

Yep, the old classic Rock, Paper, Scissors game. You know the rules already, but I’ll just refresh you in case you get confused:

Rock smashes Scissors
Scissors cut Paper
Paper covers Rock

Winner holds the higher-powered item. Tie goes to nobody.

Game-Play: The player will be going up against a Computer, randomized between the 3 items. This will be text-based using Windows Form programming since that is what I am most comfortable with doing.

Scoring: This is just going to be a basic Win-Loss stat line.

Starting Up

After starting Visual Studio, I get the Start Page where I select New Project from the Start list (as below, circled in red).

The next screen pops up, so I choose Visual C# for the Programming Language and Windows Form Application as the type of program that I will be creating. In the Name field towards the bottom, I entered RockPaperScissors (I don’t like trying to be clever because it makes programming difficult, especially when you need to debug a program for errors). Then I clicked the OK button to create the program.

After a short wait prompt, Visual Studio generates the behind-the-scenes components and the initial Form that we will be using. You can think of a Form as a canvas for the programmer’s visual style. Visual Studio allows you to use the Tools available and drag-and-drop them onto your Form. This is a very simple way to quickly generate the “game arena” so-to-speak. I won’t go over the process to drag-and-drop or even where the Tools are that will contain the Buttons and Labels that we will be using… sometimes they are in different places.

I know, it’s not that impressive now, but I’m going to create our visual interface (the “game board” if that makes more sense). So, now after I’ve performed my Magic Trick, you can see below what I came up with.

Nothing special to look at, but it will be functional once done. As you can see, I have not renamed “Form1” yet, nor have I added any text or names to the other components. I will show you how to rename “Form1” and this will be similar in nature to the other components, but first let me tell you what each component is:

A Button (same as those labeled “button2”, “button3” & “button4”. The names will not stay the same… they’re just used to protect the innocent. These are used to click and do things.

You guessed it, it’s a label. It’s use is simple, to label something.

Above is a Textbox. It’s used to show text… pretty self-expanatory.

Renaming and Cleaning up the Front

So, the process to rename a component (in almost all cases) is to, first, click the component (“Form1” in our below example) to select it.

You can tell that it’s selected because the Properties section will show the name “Form1”; and you should see the white handle dots around the component that is selected. The Properties section is the most important part in setting the text and name for the components, since it makes it so much easier.

In the below image, you will see that I have scrolled down in the Properties list and have found the Name field. I have adjusted the Name to “RockPaperScissors”. The field is circled in red.

I then find the Text field and change what will display on the Form instead of “Form1”. I circled these in red so that they are very visible. Now it says “Rock, Paper, Scissors” so that someone playing knows what they are playing.

I am going to do the same thing to all of the other components, with more appropriate names and text (as is applicable… the Textboxes will remain blank).

Now you see these adjustments (at least the Text changes, that is) below.

Excellent!! That looks much nicer!

It doesn’t really do anything yet though, so now if I double-click the overall Form, it will autogenerate the behind-the-scenes code for the Form’s Load event. This will happen every time the application has to generate the “game area” the first time. This is what the “skeleton” code looks like just after you double-click the form.

It’s pretty empty, I know, because we have not yet done anything to it. As you can see, there is a Function that was created called RockPaperScissors_Load (notice that the “RockPaperScissors” was the Name that we gave the form). This is common… it can be changed, but it’s a bit of a headache sometimes, so try to give your components a good name when you drop them onto the “game area”… that way when you double-click to activate their initial “Click” event (or Text-Changed event or whatnot) it will be easy to understand.

I like to start with the Load event for the overall Form as it makes it a bit easier to read. In this instance, you will see the private and void keywords for this function. As I’ve mentioned in previous posts, private essentially tells the program that this function can only be called from within the namespace.

A namespace is basically the container for the program (or a number of classes)… if you go deep into programming, you will probably wish to create separate class files that allow you to store libraries (groups) of classes (remember, a class is a container for common functionality). For now, though, just think of them as separate containers, some larger than others.

In addition, the Load event has 2 parameters in the “(object sender, EventArgs e)” that you won’t really need to understand. Honestly, with the object and EventArgs types of parameters you won’t have any need in your early work to use them… I rarely do. Parameters in general, though, are very important in your own custom Functions. I will explore those later in this Post.

Ok, so now I’m going to just dive head-first into this and finish the game. I’ll then come back and show you the finished product to explain what happens with all of it. Before I go further, though, I wanted to show you a great little feature of the Visual Studio platform.

The above image shows an example of the Intellisense feature of Visual Studio. It allows the dotNet framework to predict your typing and suggest options… here I typed “me” and it already suggested the MessageBox option.

The Game in Session

Before we see the Code I wanted to show you what the game looks like. I got a screen capture of the game after I had played several times (yeah, I have horrible luck); however, it shows that I chose “Rock!” and the Computer did as well… so it’s a tie.

The game is as simple as clicking one of the options to see the result, then clicking the “OK” button in the “Game Results” pop-up message box. It’s quick and a fun little way to show how quick a game can be made if it doesn’t have a whole lot of bells-and-whistles or complex logic. It’s a great start for us! Now let’s see the Code itself…

Code Review at its best

The Code Review

Ok, let’s go through each section slowly…

Above is the header section that shows what references will be used during the program. All of these, in this instance, were auto-generated.

This section is basically where the code sets itself up. The namespace is the “master container” that says that everything else is based within its hierarchy. This is where we have the basic variable set-ups. “{ get; set; }” is something that is called an accessor and basically just says “you can pull the information from this variable or set the variable with new information”. It’s a bit out of the scope of this lesson, so I won’t be discussing it here.

So, the above segment of code starts with the Load event of the game. In the Load event, we initialize the random_number_generator variable by calling setting it to “new Random();)” which is like saying “this variable needs to be set to a new Random object”. This means that, afterwards, we can use random_number_generator as its own object with its own functions and such.

After that, we set the win_count and loss_count variables to zero. Then we find the 2 textboxes that correspond to the number of wins & losses (“Wins” & “Losses”) and use the functions of the textbox. The .Enabled segment that you can see is a property of the Textbox object… I then set it to “false” so that it disables both of those textboxes.

Lastly, I call a custom function called “RefreshWinsAndLosses()”. The empty parentheses indicate that there are no parameters that need to be passed on to the function. You will see this function later on down in this Tutorial.

The “Done_Click” function is an event that happens when you click the “Done” button (the one with “Exit” as the text). The function just closes the current (this) form; and since there is only the single form, it closes the entire application.

The next segment, shown just above, is repetitious. It should be pretty easy to pick up. The “Rock_Click”, “Paper_Click” & “Scissors_Click” functions does one thing when the corresponding Button (“Rock”, “Paper” & “Scissors”). All it does is call the “PlayRound” custom function, passing in a parameter to indicate which integer-based choice (1=Rock, 2=Paper & 3=Scissors) the Player selects.

Finally, the “PlayRound(int your_choice)” function does just a few things. First, it sets a variable called “AI_Choice” to the returned result of the “Choose_AI_Choice”. After that, the program shows a MessageBox (basically a pop-up box) with parameters, the first is the text inside the pop-up box and the second is the caption of the pop-up box. Here, the caption will read “Game Results” while the text inside is returned from the “CompareSelection(your_choice, AI_Choice)” custom function. The passed-in parameters are the “your_choice” variable, which is the integer value passed in from the original function call, and the “AI_Choice” variable, which is the integer value returned from the “Choose_AI_Choice()” function call.

Ok, so now it’s the 3 remaining custom functions. I will describe each of the basic functions here.

The “Choose_AI_Choice()” custom function is pretty simple at its core, so just watch and learn. It takes no parameters which is shown by the empty parentheses. The function called by the .Next(1, 4) segment is a baked-in function of the Random object (“random_number_generator” is an object of datatype Random). Essentially it says “create a random integer between 1 and 4, not including 4”. Seems like it should be “(1, 3)” but the baked-in function relies on the second parameter of the (minimum, maximum) format to be 1 more than the maximum to generate.

Then there is the “CompareSelection(int your_choice, int AI_Choice)” custom function that basically does all the comparison logic. If you read it I would hope that you can understand it, otherwise this post could become extremely bloated and extra-long.

Just above is the basic format of the switch command. The format is “switch (variable)” and tells us “let’s find the values of the (variable) and check each one to see which logic to use. Inside the switch command you use the case statement to define each option. In the above example, it says “let’s take 1 as the option to check” then the colon defines what to do if the value matches what the “your_choice” value offers. Each case statement ends when you see the break; command. If the value doesn’t match, it falls through to the next case... if you exclude the break; it does every option that matches (if multiple options correspond).

So, the logic says “if the player chooses Rock! (1) and the Computer chooses Rock! (1) then set the “message” variable to “The Computer chose Rock, the same as you did. Tie. No Winners!” then it breaks out of the switch statement. The other comparisons are below that and then the default statement occurs IF by some chance none of the options apply, which they shouldn’t.

After the comparisons are made, then the function calls the “RefreshWinsAndLosses();” custom function and then returns the “message” variable to the code that called this function.

To finish out all of the code for the program you see the “RefreshWinsAndLosses()” custom function that passes in no parameters. The logic does 4 things: it sets the “Wins” and “Losses” Textbox values to the “win_count” variable’s value; and it calls the Update() segment extension. The .Text segment is the property for the Textbox that holds the actual text. The .ToString() segment extension function to the “win_count” and “loss_count” integer variables says to convert the numeric value to a text version. This makes it compatible with what can be shown in the Textbox. The .Update() segment extension function tells the form to refresh the data and update the visuals of the Textbox components.