Start adding code to the events –

Lets add some code inside of the ShootDummy event. This event will trigger when we click somewhere on the canvas.

private void ShootDummy(object sender, MouseButtonEventArgs e)
        {
            if (e.OriginalSource is Rectangle)
            {
                // if the click source is a rectangle then we will create a new rectangle
                // and link it to the rectangle that sent the click event
                Rectangle activeRec = (Rectangle)e.OriginalSource; // create the link between the sender rectangle

                MyCanvas.Children.Remove(activeRec); // find the rectangle and remove it from the canvas

                score++; // add 1 to the score

                if ((string)activeRec.Tag == "top")
                {
                    // if the rectangles tag was top
                    // deduct one from the top count integer
                    topCount--;
                }
                else if ((string)activeRec.Tag == "bottom")
                {
                    // if the rectangles tag was bottom
                    // deduct one from the bottom count integer
                    bottomCount--;
                }

                // make a new ghost rectangle
                //width 60 pixels and height 100 pixels
                // it will have a tag called ghost and fill will be ghost image
                Rectangle ghostRec = new Rectangle
                {
                    Width = 60,
                    Height = 100,
                    Fill = ghostSprite,
                    Tag = "ghost"
                };

                // once the rectangle is set we need to give a X and Y position for the new object
                // we will calculate the mouse click location and add it there
                Canvas.SetLeft(ghostRec, Mouse.GetPosition(MyCanvas).X - 40); // set the left position of rectangle to mouse X
                Canvas.SetTop(ghostRec, Mouse.GetPosition(MyCanvas).Y - 60); // set the top position of rectangle to mouse Y

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

Beginning of this function we check where the click landed. So we are checking using the IF(e.OriginalSource is Rectangle) meaning if the click landed on a rectangle then we create a local version of that rectangle and call it activeRec this will be directly linked to the rectangle we just clicked on. Once we have identified it then we can remove it from the canvas. This means we have shot a dummy image so we can increase the score 1. There are few other things we need to check here. We need to check if the dummy images we clicked on belongs to the top or bottom location. So, we can then see if the activeRec has a tag because each dummy image that’s created in this game either has a tag called top or bottom. So, if either of these tags are present, we take away 1 from either top counter or bottom counter integer.

After that part we are getting to creating a new rectangle and calling it ghost rec. This rectangle will hold the ghost image so inside the rectangle we give its properties for example width 60 pixels, height 100 pixels and remember we created that image brush called ghostSprite this is where it will work. We are linking the ghostSprite to this ghost rec as its main Fill and this rectangle will have a tag called ghost. After that we are setting and left and position of the ghostRec object and lastly adding to the canvas to display.

Mouse Move Event

This event is responsible for when the mouse enters and moves inside the canvas.

        private void Canvas_MouseMove(object sender, MouseEventArgs e)
        {
            // Get the x and y coordinates of the mouse pointer.
            System.Windows.Point position = e.GetPosition(this);
            double pX = position.X;
            double pY = position.Y;

            // Sets the Height/Width of the circle to the mouse coordinates.
            Canvas.SetLeft(scopeImage, pX - (scopeImage.Width / 2));
            Canvas.SetTop(scopeImage, pY - (scopeImage.Height / 2));
        }

This is a simple event, first we are creating a new point called position and it capturing the mouse position. Then we have created two double variables called pX and pY. pX is capturing the mouse horizontal or x position. pY is capturing the mouse vertical or y position. With both of them set up we are setting score image left and top to the px and pY minus the height and width of the image so it looks like the its in the centre of the mouse pointer.

Ghost Animation Event

This event will trigger every 20 milliseconds as we have set it when we declared the timer and its properties.

        private void ghostAnimation(object sender, EventArgs e)
        {
            scoreText.Content = "Scored: " + score; // link the score text label to score
            missText.Content = "Missed: " + miss; // link the miss text label to miss


            // run a foreach loop to check if there are any rectangles present in the canvas

            foreach (var x in MyCanvas.Children.OfType<Rectangle>())
            {
                // if any rectangle has the ghost tag attached to them
                if ((string)x.Tag == "ghost")
                {
                    // animate it towards top of the screen
                    Canvas.SetTop(x, Canvas.GetTop(x) - 5);

                    // if any ghost makes it to -180 pixels to the top
                    if (Canvas.GetTop(x) < -180)
                    {
                        // add this ghost to the garbage collection
                        removeThis.Add(x);

                    }
                }
            }

            // removing its from the scene
            // check how many rectangles are in the items move list
            // remove them from the list using the for each loop

            foreach (Rectangle y in removeThis)
            {
                MyCanvas.Children.Remove(y);
            }
        }

This is a very simple event. First two lines are setting up the link between the two labels we have the canvas and their content. So, this timer works very fast this is why we are giving it the responsibility to update the score and misses when the game is running.

After that we have a foreach loop to check all of the rectangles present in this canvas. Inside the loop we get a bit more specific, we want to find only the rectangles that has a tag called ghost inside of it. When we find it then we can animate it by using the Canvas.SetTop(x, Canvas.GetTop(x) – 5); What this line means is that first we access the set top function of x and inside it we get the current position of x which is the ghost and then we deduct 5 pixels from it every frame, so it will look like its floating to the top.

The ghost rectangle only serves the purpose of telling the user that they shot the dummy image and scored a point, once it floats out of display, we have no need for it. Inside the second fi statement we are checking if the ghost rectangle made it past -180 pixels from the top, if it has then we add that rectangle x into the remove this list.

Bottom of the function you can see the other for each loop, this one is looking for rectangles saved inside of the remove this list. Any rectangles found inside will be remove from my canvas display. This method is important because if we leave the objects spawning and leaving the scene without removing them properly, we can have memory overload and crash the game. If you have any objects in your game that doesn’t need to be there make sure you remove it.

Go to Page 4 for Dummy Move Tick Event Programming