WPF C# Tutorial – Create a space battle shooter game in Visual Studio

The key down function for the space shooter –

This function will run when the player presses down a key. We will program this game to respond when the left or right is pressed down. This key down event will be simple. Lets take a look

Inside the function its simply has two if statements. First we check IF the left key is pressed then we will change the move left Boolean to true and we do the same for the right key when its pressed it will change the move right Boolean to true.

Selectable code for the on key down event is below –

        private void onKeyDown(object sender, KeyEventArgs e)
        {
            // if the left key is pressed
            // set move left to true


            // if the right key is pressed
            // set move right to true

            if (e.Key == Key.Left)
            {
                moveLeft = true;
            }
            if (e.Key == Key.Right)
            {
                moveRight = true;
            }
        }

Key up function for the space shooter –

This function will trigger when the keys are released on the keyboard. When the player presses a key and release it, we can catch that and trigger an event there. Lets take a look at what this event is doing.

Inside this event we have 3 if statement first two are doing similar things from the key down event except when the left or right key is released its changing the move left/right Boolean back to false.

The third if statement in this event is checking if the space bar was released then we can make a bullet and add it to the canvas. You may be asking why are we making it in the key up event would it be logical to have inside the key down function? you are technically right it would be logical but at the same timer putting on the key down function makes for an interesting problem. When we press and hold the image then the key down event will trigger repeatedly meaning player can infinitely shoot bullets when the button is pressed down on keyboard. So we want them to release the key and then shoot the bullet form the player space ship. Makes sense.

        private void onKeyUp(object sender, KeyEventArgs e)
        {
            // if the left key is released
            // set move left to false


            // if the right key is released
            // set move right to false

            if (e.Key == Key.Left)
            {
                moveLeft = false;
            }
            if (e.Key == Key.Right)
            {
                moveRight = false;
            }

            // if the space key is released
            // make a new rectangle called new bullet
            // give this rectangle a tag called bullet
            // height set to 20, width set to 5
            // background colour white and border colour red

            if (e.Key == Key.Space)
            {
                Rectangle newBullet = new Rectangle
                {
                    Tag = "bullet",
                    Height = 20,
                    Width = 5,
                    Fill = Brushes.White,
                    Stroke = Brushes.Red
                };

                // place the bullet on top of the player location
                Canvas.SetTop(newBullet, Canvas.GetTop(player) - newBullet.Height);
                // place the bullet middle of the player image
                Canvas.SetLeft(newBullet, Canvas.GetLeft(player) + player.Width / 2);
                // add the bullet to the screen
                MyCanvas.Children.Add(newBullet);
            }
        }

Lets take a closer look at the code

Rectangle newBullet = new Rectangle

{

Tag = "bullet",

Height = 20,

Width = 5,

Fill = Brushes.White,

Stroke = Brushes.Red

};

Inside the if statement we have the above code first, we are making a new rectangle called newBullet so inside the curly brackets we can give this new rectangle its properties. This new bullet will have a tag called bullet, tag is important because it will help us identify the rectangle when its on the canvas. This bullet will have 20 pixel height, 5 pixel width. It will have a fill colour of white and red border colour. We end the rectangle code here.

Canvas.SetTop(newBullet, Canvas.GetTop(player) – newBullet.Height); this line will set the top location of the bullet we want to player just above the player, so we are using canvas set top function to find the new bullet, get the player objects top position deduct the height of the bullet. So it will be placed just above the player rectangle.

Canvas.SetLeft(newBullet, Canvas.GetLeft(player) + player.Width / 2); this line is setting up the left position of the bullet rectangle. We want it to be centred on the player object so we use the canvas set left function, find the new bullet, get the players left position and divide the players width by 2 so we can have the centre of the player rectangle and place the bullet there.

MyCanvas.Children.Add(newBullet); finally we place the bullet rectangle to the canvas.

Go to the next page for the make enemies’ function.




7 responses to “WPF C# Tutorial – Create a space battle shooter game in Visual Studio”

  1. Daniel Rymes says:

    Having difficulties with URI definition. The original version failed during the build. Code compiled fine after replacing with relative version: `new Uri(@”../images/player.png”, UriKind.Relative)`. However, app is breaking, because it can’t find the image in …\bin\Debug\images\purple.png.

    Wondering if the issue could be related to URI syntax of if something’s wrong with the build process (e.g. missing/wrong item csproj). Any fix suggestions?

  2. Anhar Ali says:

    Hi Daniel, you made the images folder inside the debug folder. This folder needs to be in the main application directory. In page 1 of the tutorial it shows how to make the folder inside the solutions explorer, and then you can import the images into it.

  3. David Macák says:

    Thank you for this tutorial. I am new to C# and WPF and just found your fantastic web and your tutorials. I like this style of tutorials where you actually make something useful and fun. I made this and learned a lot by writing the code myself rather than ctrl+v.

    Also after limit = 20; it gets much harder 😀

  4. Hi Mr. Moo says:

    Well done thank you for all the education to the internet!!!!!!!!!!!! <3

  5. Matthew Marse says:

    a fun tutorial to do because we are in space shooting alien space *suits* I mean if that’s not fun

  6. Davor Kreß says:

    Your sites are very helpful and cool. Thank you very much.

  7. Anhar Ali says:

    Thank You. 🙂