× Main Menu

C# Tutorial – Create a Football Penalty Shootout game in visual studio

In this tutorial we will create a football penalty shootout game in visual studio using c# programming language. In this game you are able to click on a selective targets around the goal post and as you select one it will shoot the football towards it. The goal keeper has its own independent movements and he can block your goals from being made. The overall structure of the game is simple and easy to understand.  We are creating this tutorial in Visual Studio 2017 using the Windows Form application and C# programming language. Make sure you download the game assets from the link in this tutorial page to follow along.

Lesson Objectives –

  1. Create a football penalty shootout game in visual studio using c#
  2. Create click events using picture boxes
  3. Create goal keeper movements using lists and strings
  4. Using a timer object to animate the ball and the goal keeper
  5. Using image sprites and changing the goal keepers state within the game
  6. Using various data types such as Integers, Booleans, Strings and List to make the game work
  7. Using windows form components such as Picture Boxes, Timers and Labels to complete the game

Project Preview

Download the Football Penalty Shootout Game images here

Below are the resources we are going to be using for this game

This is the background of the game
This is the football
This is the target icon, this will be placed in 5 different areas around the penalty bar.
This is the goal keeper stand sprite
This is the goal keeper saving right
This is the goal keeper saving left
This is the goal keeper saving top left
This is the goal keeper saving top right
This is the goal keeper saving top

Start a new project in Visual Studio, call it Football Penalty Shootout Game, make sure you have picked the windows form application and click OK.

In the form Properties change the size of the form to 915, 717 and change the text to “Football Penalty Shootout Game”.

In the same properties window find the background image and click on the 3 dotted button.

Once you clicked on it you will see this box, Click on the import button under the project resource file.

Now browse to the assets you downloaded from MOOICT, select them all and click OK.

From the resource selection window find the background image and click OK.

In the properties window under the background image, there is an option called background image layout, choose NONE from the drop down menu. We don’t want the background to have any effects in this game.

From the tool box drag and drop a picture box.

Right click on the picture box and click on Choose Image.

Select the target image from the resource selection window.

In the properties window for the picture box change the background colour to yellow.

In the same properties window change the name to topleft (no spaces) size to 40, 38, Size Mode to Stretch image and tag to “topLeft”. The tag is important and make sure you do not add any space and carefully place the capital letter in it Make sure its all as this tutorial.

The reason this has a tag of top left is because its placed on the top left of the goal post. Now you can copy and paste this picture to match the layout below.

Now that the goal aims are done, add another picture box to the form, once again right click on the picture box and pick the stand-small image from the resource selection window.

<– Pick the stand-small image for the new picture box

For this new picture box change the following in the properties window

Name: goalKeeper

Back Colour: Transparent

Location: 426, 174

Size Mode: Auto Size

Add another picture box to the form, right click on the picture box and from the resource selection window choose the football image and click OK.

Change the following for this new picture box in the properties window

Name: football

Back Colour: Transparent

Location: 431, 515

Size Mode: Auto Size

Recap- We set up the background, the goal post targets, the goal keep and the football. To complete the User interface of the game we need to add 2 labels.

Drag and drop two labels on the form.

Click on Label 1 and lets change some settings in its properties window.

Name: missText

Back Colour: Transparent

Font: Bold Size 14

Fore Colour: White

Location: 12, 16

Text: Miss: 0

<– Final Result

Now click on the label 2 and change the following in the properties window

Name: goalText

Back Colour: Transparent

Font: Bold Size 14

Fore Colour: White

Location: 800, 16

Text: Goal: 0

<– Final Result

Drag and drop two timers to the form.

They should look like this when they are dropped to the form. Click on the Timer 1 and lets change few things in its properties.

change the name to keeperTimer and interval to 20. Leave the rest as is. Now click on the timer 2 and change the following in its properties

Change the name to ballTimer and interval to 20.

<– Click on the little lightning bolt icon on the properties window while you have the ballTimer selected.

In this box type in shootball and press enter. This will take you over to the code view, come back to the design view we need add more events for this game.

Click on the keeper time and go to the events window by clicking on the small lightning bolt icon.

Inside the tick event type moveKeeper and press enter.

Come to the design view for our last event.

HOLD CTRL KEY and CLICK on all of the target picture boxes.

You can select multiple objects in visual studio. Make sure that you have only selected all of the target picture boxes. Now if you look at the events window for all of them you can find a click event from the list.

In the click event type in setTarget and press enter.

Now we have added the 3 events that we need for this game.

Now lets take a look at how the code view is looking thus far.

Start Coding

This is what the code view should look like for you now, we are going to add the variables and functions we need for the game first.

Add the highlighted code in the code view, all the codes are explained in the comments, make sure you type them in there as well which will help understand the code further. The first list of highlighted code above are the variables for the game, we have a random number generator, list of strings, integers, strings and a Boolean. All of these variable help us make this game work. Make sure you have inserted them clearly and accurately. In the bottom of the code view you will see the two highlighted empty functions called checkScore and changeState both of these function are empty right now but we will show you the code to include inside them. The main thing to note down right now is to do this code in the right order.

Shoot Ball Event

Above is the shoot ball event. This event will run when the ballTimer is activated. in the beginning of the event we have football.Left -= ballx and football.Top -= bally, this line links the football to the ballx and bally variables. When the numbers change within those variables the ball will follow those numbers. For example if the ballx is -1 the will move towards the left of the screen and if its 1 then it will move towards right of the screen, same is applied to the vertical y position.

Next is the big If statement. In side of if statement we are able to call multiple statements and we are also able to add anything we want to them as along they return a true or false value.

IF(ball moving left AND ball collides with the left picturebox)

{

If the statements are true then we can add more instructions in here such as move the ball back to the default position and reset the ballx and bally variables, set aim to false and stop the timer.

}

Now we have 5 different aim points good thing in programming we are able to use multiple statements inside of one if statement.

IF(ball moving left AND (&&) ball collides with the left picturebox

OR (||) ball moving right AND (&&) ball collides with the right picturebox

OR (||)ball moving top AND (&&) ball collides with the top picturebox

.. And so on

)

{

If the statements are true then we can add more instructions in here such as move the ball back to the default position and reset the ballx and bally variables, set aim to false and stop the timer.

}

By using the || symbol we are able tell the program that if the first statement isn’t true, then try another to see if that matches the condition. This way we can go over all the 5 targets and then stop the ball when it reaches its destination ready to played again.

Move Keeper Event

Below is the move keeper event, this event is kind of long so as you are following it through make sure you follow the brackets and symbols accordingly. This event will move the goal keeper to the directed state it’s in. The logic behind this event is we save the goal keepers state in the state string, when the data inside that string changes we move the goal keeper accordingly. All the codes are explained in the comments.

Set Target mouse click event

This is the event that’s linked to all the target picture boxes. The reason we have used one event and 5 is because there are ways for us to find out which picture box sent the trigger for this event and then take accurate action based on that. By working this way we save time and redundant codes which we don’t need. So to keep things efficient lets take a look at this event.

To start off we need to make sure that players can’t multi click on the buttons this is why we start with the if(aimset) {return;} What this if statement does is when the aim set is false meaning when the ball is animating then we will not allow the player to click any other buttons and activate it. Until the aim set boolean is set back to false this event will not trigger again. Neat.

After that we are starting both ball timer and keeper timer because we want them both to animate when the player has chosen their target. After that the change state function will which is responsible for changing the goal keeper image.

var senderObject is a variable that will save information about who sent the trigger for this event, remember we have 5 different targets on the screen and we can’t shoot the ball at all of them so we need to know which one sent the trigger for this event. This is how we find it. var senderObject = (PictureBox) sender; tells the program exactly which picture box was clicked.

When we find the picture box then we will change the picture boxes background colour to white, just to give a feedback on the click event. Remember it’s a developers responsibility to let the users know when they have successfully interacted with the game such as giving some small feedback that their action was taken into account.

Then in this event we need to check the tag of each of these picture boxes clicked. The first one is if the sender object has a tag of topRight then we will move the ball towards the top right of the goal post. After that if the picture box clicked has a tag of right, then we move the ball towards the right of the goal post and so on. Each of the if statements have been commented in the code so please follow along carefully and make sure you do not miss out the curly brackets or the semi colons, it’s a common mistake just saying.

End of ALL of these if statement we finally run the check score function. This function will be explained next.

Check Score Function

Below is the check score function. As you remember from earlier this is the empty function we created earlier now we have all of the instructions to put in to it. First the function starts with a big if statement as we have seen before, this time we are checking if the goal keeper and the player picked the same target. If they have then we add 1 to the miss and show the miss text on the screen, else then goal keeper missed the ball and you have scored so we add 1 to the score and show the score on the goals label. This is a simple function, make sure you pay extra attention to the quotation marks and the OR || symbols in the if statement.

Change State Function

This is the change state function, in this function we have put in the instruction to which direction the goal keeper is going to choose and when he does we will change the images accordingly. Now to begin we start the keeper timer.

Then we are creating an integer called i and within this integer we will randomly choose an item from the keeper position list we created early in this game, remember there are 5 different positions the goal keeper can go to, in computer the numbers always start 0 so we will have 0, 1, 2, 3, 4 to complete all the different positions saved inside that list. By using the random number generator we can make the game more dynamic so we don’t which direction the goal keeper will go.

the state string will hold the position we picked by using i integer in the line before, after that we need to run another switch statement to determine which was picked and what instructions to give the game next.

If the random number picked is 0 then we will change the goal keepers image to left, if the random number picked is 1 then we will change the goal keeper image to right image and so on and so forth. Each line of the code is commented so make sure that you are following it accurately.

Final Results- Click on the start button

Lets debug the program and see what’s it doing

The game works great, if you have encountered any errors, look back the code and see what’s missing. Well done following through thus far.

What we haven’t done but you should try to implement in the game, if the game you created is working right now you will notice that you can take as many shots as you want and game will play it all, there is no game ending script in place. Hmm now think where you can put that how can you limit the amount the player plays before they win or lose the game. It’s not very difficult you can do it. Moo out.

 

 




2 responses to “C# Tutorial – Create a Football Penalty Shootout game in visual studio”

  1. Tr says:

    Coming from a C, C++ background, I would love to be able to copy/paste simple elements of this and learn contiguously without having to write simple things.

  2. jason man says:

    why does he fly

Comment on this tutorial and let us know how you got on -

%d bloggers like this: