WPF C# Tutorial – Create Snipe the dummies, a sniper scope shooter game in visual studio

Dummy Move Tick Event

Lets take a closer look at the dummy move ticker timer event. This event will trigger in random times because we set it so it will pick a value between 800 and 2000 so it can be any range of them.

        private void DummyMoveTick(object sender, EventArgs e)
        {
            removeThis.Clear(); // clear the garbage collector when it loads

            // this for each loop will check if we have any rectangles in this scene, if we do we need to clear it out first

            foreach (var i in MyCanvas.Children.OfType<Rectangle>())
            {
                // see if any present rectangle have the top or bottom tag assigned to them
                if ((string)i.Tag == "top" || (string)i.Tag == "bottom")
                {
                    removeThis.Add(i); // add these items to the remove this list

                    topCount--; // take out 1 from the top count
                    bottomCount--; // take out 1 from the bottom count
                    miss++; // add them to miss integer
                }
            }


            // if the top count is less than 3
            if (topCount < 3)
            {
                // run show dummies function
                ShowDummies(topLocations[rand.Next(0, 5)], 35, rand.Next(1, 4), "top");
                topCount++; // add 1 to the top count
            }


            // if the bottom count is less than 3
            if (bottomCount < 3)
            {
                // run the show dummies function
                ShowDummies(bottomLocations[rand.Next(0, 5)], 230, rand.Next(1, 4), "bottom");
                bottomCount++; // add one to the bottom count
            }
        }

removeThis.Clear(); part of the timer we clearing everything from inside of the remove this list.

Run a for each loop and check for all available rectangles in this canvas, if any of the rectangles have the tag top OR bottom add them to the remove this list deduct 1 from the top count and bottom count. Add 1 to miss integer. In this section instead of doing two different if statements we did one with two conditions inside it, this if statement can run when either of them are true, so the way this works is it check if this rectangle has a TOP tag OR (|| <- this is the top pipes symbol) if this rectangle has a bottom tag then do the follow etc.

After that we have two more if statements in this function. Both of them are doing similar things so let’s break it down. They are checking If the top count or bottom count if less than 3 then it will instruct the following

Run the Show Dummies function with values inside of it and add 1 to either top or bottom counter integer. The important part here is the show dummies function and how it works let’s take a look.

Show dummies function has 4 different values that gets passed inside. With a function like this we can reuse to meet our requirements. We are using this to spawn objects to the top and to the bottom location.

This is what is being passed from the if statement –

ShowDummies(topLocations[rand.Next(0, 5)], 35, rand.Next(1, 4), “top”);

Remember those Show top locations list and bottom locations list we had created earlier. We are using the random number to select a random location from inside of it as a X value. So, it works like this

topLocations hold 6 values inside they count them from 0 – 5 = 6 so if we want to access the value at index 1 we have to give instructions like this topLocations[1] and it will respond to it. The same way we want the dummy images to spawn randomly so we are simply generating a random number between 0 and 5 and passing that value inside that function. As for the second value 35 this is the y value or vertical location of the object. Told you earlier than we know the vertical position of the dummy images. Next is the skin well we have 4 different colour for the skins and we have created an IF statement inside the show dummies function that will link the random skin to the new character and show it on the screen. Last thing in the function is the tag, we need the tag to identify the objects from within the foreach loops so it will assign the top tag to this new dummy image.

Look at the bottom one now

ShowDummies(bottomLocations[rand.Next(0, 5)], 230, rand.Next(1, 4), “bottom”);

Do you see the similarity yet? First its going to give a random location our from the bottom locations list, it has a set vertical position of 230 pixels so its lower than the 35 pixels one from the top, it also will generate a random number between 1 and 4 for the skins and last it has a tag of bottom. By creating this function we are saving lots of timer and effort on spawning, positioning and assigning graphics to these dummy images.

Show Dummies Function –

This is the cool function that’s keeping everything working nicely for us, lets take a look under the hood here.

        private void ShowDummies(int x, int y, int skin, string tag)
        {

            // create a new image brush for the dummy background
            ImageBrush dummyBackground = new ImageBrush();

            // whichever skin number comes through this function
            // it will change the dummy background accordingly
            // each number will be monitored and assigned a case to respond appropriately 
            switch (skin)
            {
                case 1:
                    dummyBackground.ImageSource = new BitmapImage(new Uri("pack://application:,,,/images/dummy01.png"));
                    break;
                case 2:
                    dummyBackground.ImageSource = new BitmapImage(new Uri("pack://application:,,,/images/dummy02.png"));
                    break;
                case 3:
                    dummyBackground.ImageSource = new BitmapImage(new Uri("pack://application:,,,/images/dummy03.png"));
                    break;
                case 4:
                    dummyBackground.ImageSource = new BitmapImage(new Uri("pack://application:,,,/images/dummy04.png"));
                    break;
            }


            // make a new rectangle 
            // this rectangle will have the tag passed into this function
            // width 80 pixels and height 155 pixels
            // the fill colour of the rectangle will be dummy background image
            Rectangle newRec = new Rectangle
            {
                Tag = tag,
                Width = 80,
                Height = 155,
                Fill = dummyBackground
            };

            Canvas.SetTop(newRec, y); // position the rectangles y position
            Canvas.SetLeft(newRec, x); // position the rectangles x position

            MyCanvas.Children.Add(newRec); // add the new rectangle to the canvas
        }

 

First we are creating an instance of the image brush class called dummy background. The reason we are creating it inside of this is because as this function runs we want the new background to be associated with the new object and not change any other ones that may be on the canvas. And then we have the switch statement which is taking in the skin integer from the function arguments

switch (skin)

{

case 1:

dummyBackground.ImageSource = new BitmapImage(new Uri("pack://application:,,,/images/dummy01.png"));

break;

case 2:

dummyBackground.ImageSource = new BitmapImage(new Uri("pack://application:,,,/images/dummy02.png"));

break;

case 3:

dummyBackground.ImageSource = new BitmapImage(new Uri("pack://application:,,,/images/dummy03.png"));

break;

case 4:

dummyBackground.ImageSource = new BitmapImage(new Uri("pack://application:,,,/images/dummy04.png"));

break;

}

As you can see when this function runs, it will see what number we have passed in for the skin integer and it will change the graphics for the dummy background image brush according, if we get the number 1 passed into the skin integer then we will link the dummy01 image to this dummy backgrounds image brush and so on. There are cases inside the switch statement than ends with s colon and there you give the instructions for it. After the instructions it important you break; the line there or it will simply not run this condition.

Rectangle newRec = new Rectangle

{

Tag = tag,

Width = 80,

Height = 155,

Fill = dummyBackground

};

Canvas.SetTop(newRec, y); // position the rectangles y position

Canvas.SetLeft(newRec, x); // position the rectangles x position

MyCanvas.Children.Add(newRec); // add the new rectangle to the canvas

These lines here will make a new rectangle first, link the tag to the tag that’s been passed through this function, width 80, height 155, link the fill to the dummy background.

Set the left position to the x and set the top position to y integer that’s been passed through and finally add the new rectangle to the canvas.

If you have followed it so far well done, make sure there are not spelling errors in the code and you have closed all the brackets properly if you are ready let’s click on the Start button on the toolbar and run this game.

mooict wpf c# snipe the dummy game - click on the start button to run this game

See how it runs now.

mooict wpf c# snipe the dummy game - final screen shot of the game and how it works in visual studio

As you can see the image is following the mouse, we can click on dummy images. Dummy images are changing positions and randomly moving around making the game slightly challenging. When you click on the dummy, its ghost will slowly start to float away and we are keeping score for the shots and misses.

If you have followed this tutorial so far, very well done to you and hope you enjoyed it. The full source code for the game is below. We will be back with more fun and interactive programming tutorials for you until then Moo Out.

Go to the full source code page to see the fully c# script for this game.




Comments are closed.