The PaddingBall game in WPF

• Download source code - 44.4 KB

Introduction/Background

Remember, those good olden days, there was this game to play the ball that moves around all corners of your screen using a little pad, and the “Brick and Ball” game that swept all our joy by breaking the bricks stacked on top of the window.

This article deals with the development of a little game called “Paddling Ball” using WPF technology, and is just a demo-like game that uses minor user interactions with not so much of graphical items in it.

Game window

XAML allows you to create a menu, ball, and pad objects declaratively, as shown below:

<Window x:Class="PaddingBall.Window1" 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Title="Padding Ball v1.0" Height="500" 
  Width="700" Background="Gray" 
  Name="playground" ResizeMode="NoResize" 
  WindowStartupLocation="CenterScreen" SizeToContent="Manual"> 
<Canvas Width="700" Height="500"> 
<Menu VerticalAlignment="Top" HorizontalAlignment="Left" 
  Height="20" Width="700" 
  Background="AliceBlue" Foreground="Blue"> 
<MenuItem Header="File"> 
<MenuItem Header="Start Game" 
  Background="AliceBlue" Click="StartGame"></MenuItem> 
<MenuItem Header="Exit" Background="AliceBlue" 
  Click="ExitGame"></MenuItem> 
</MenuItem> 
<MenuItem Header="About" 
       Click="ShowAboutBox"></MenuItem> 
</Menu> 
<Grid Height="462" Width="700"> 
<Grid.ColumnDefinitions> 
<ColumnDefinition Width="700*" /> 
<ColumnDefinition Width="0*" /> 
<ColumnDefinition Width="0*" /> 
</Grid.ColumnDefinitions> 
<Rectangle Margin="114,132,0,0" Name="ball" 
  Stroke="Black" RadiusX="120" RadiusY="120" 
  Fill="Blue" Height="38" VerticalAlignment="Top" 
  Stretch="UniformToFill" 
  HorizontalAlignment="Left" Width="38"> 
<Rectangle.BitmapEffect> 
<BevelBitmapEffect BevelWidth="11" /> 
</Rectangle.BitmapEffect> 
<Rectangle.BitmapEffectInput> 
<BitmapEffectInput /> 
</Rectangle.BitmapEffectInput> 
</Rectangle> 
<Rectangle Height="13" Margin="200,390,0,0" 
  Name="pad" Stroke="Black" VerticalAlignment="Bottom" 
  Fill="Black" HorizontalAlignment="Left" Width="100" /> 
</Grid> 
</Canvas> 
</Window>

As you can see, each menu item is bound to the respective event handlers for the Click event. When you open the application, you can see a window with the menu bar on top of it. You start the game by selecting the “Start Game” command in the File menu.

WPF implications

While developing this game with WPF, I found it easier to draw the ball and pad and the background, thanks to XAML. On the other hand, the behaviour part of the game still had its own intricacies especially during the animation of the ball and the pad. Nevertheless, implementing controlling the animation with keyboard interaction by the user has given me new ideas in WPF programming.

Most of the animation and positioning of ball and pad was done with the Thickness structure found in the System.Windows namespace and the ThicknessAnimation class found in the System.Windows.Media.Animation namespace of the PresentationFramework.dll assembly.

The Thickness structure describes the thickness of a frame around a rectangle, in this case, the Ball and Pad. Four double values describe the Left, Top, Right, and Bottom sides of the rectangle that encapsulates the Ball and Pad objects, respectively.

The ThicknessAnimation class creates a transition between two target values. To set its target values, use the From and To properties of the Ball and Pad elements inside the window.

Needless to say, we need a StoryBoard object to host the whole animation. The ThicknessAnimation instances created for the Ball and the Pad objects, along with the specified duration, is added as a child to the StoryBoard, and we use the Begin method to start the animation.

Here is the code for animating the pad as the user presses the right and left arrow keys:

void AnimatePad(double x) 
{ 
    moveThePad = new ThicknessAnimation(); 
    moveThePad.From = PadCurrentPos; 
    moveThePad.To = new Thickness(pad.Margin.Left+x, pad.Margin.Top, 0, 0); 
    moveThePad.Duration = new Duration(TimeSpan.FromSeconds(0)); 
    Storyboard.SetTargetName(moveThePad, "pad"); 
    Storyboard.SetTargetProperty(moveThePad, 
       new PropertyPath(Rectangle.MarginProperty)); 
    PlayPad = new Storyboard(); 
    if (PlayPad.Children.Count > 0) 
    PlayPad.Children.RemoveAt(0); 
    PlayPad.Children.Add(moveThePad); 
    PlayPad.Begin(this, true); 
}

The value x refers to the increment or decrement value specified for the target location (Left property of the Margin) for the pad. This could be easily done by writing the following code in the KeyDown event of the window:

void playground_KeyDown(object sender, KeyEventArgs e) 
{ 
    PadCurrentPos = pad.Margin; 
    double xPadValue=0; 
    if (e.Key == Key.Left) 
        if (pad.Margin.Left > -100) 
            xPadValue = -50; 
    if (e.Key == Key.Right) 
        if (pad.Margin.Left <= (playground.Width - pad.Width)) 
    xPadValue = 50; 
    AnimatePad(xPadValue); 
}

Animating the ball

When the ball moves around within the window, the Left and Top properties of the Margin changes and promptly triggers the LayoutUpdated event of the particular WPF element. Therein, we can write some code to control the behaviour of the animated ball like checking if it crosses the boundaries of the window or if the ball is hit by the pad.

void ball_LayoutUpdated(object sender, EventArgs e) 
{
    BallCurrentPos = ball.Margin; 
    if (((ball.Margin.Top - ball.Height) >= pad.Margin.Top) && 
          ball.Margin.Left >= pad.Margin.Left && 
          ball.Margin.Left <= (pad.Margin.Left + 30)) 
    { 
        BallNextPos.Top = 0; 
        BallNextPos.Left = BallCurrentPos.Left - 200; 
        AnimateBall(BallNextPos, BallCurrentPos); 
    } 
    else if (((ball.Margin.Top - ball.Height) >= pad.Margin.Top) && 
               ball.Margin.Left >= (pad.Margin.Left + 30) && 
               ball.Margin.Left <= (pad.Margin.Left + 60)) 
    { 
    BallNextPos.Top = 0; 
    AnimateBall(BallNextPos, BallCurrentPos); 
    } 
    else if (((ball.Margin.Top - ball.Height) >= pad.Margin.Top) && 
               ball.Margin.Left >= (pad.Margin.Left + 60) && 
               ball.Margin.Left <= (pad.Margin.Left + 100)) 
    { 
        BallNextPos.Top = 0; 
        BallNextPos.Left = BallCurrentPos.Left + 200; 
        AnimateBall(BallNextPos, BallCurrentPos); 
    } 
    else if (ball.Margin.Top <= 5) 
    { 
        BallNextPos.Top = playground.Height; 
        AnimateBall(BallNextPos, BallCurrentPos); 
    } 
    else if (ball.Margin.Left <= 0) 
    { 
        BallNextPos.Left = playground.Width; 
        AnimateBall(BallNextPos, BallCurrentPos); 
    } 
    else if (ball.Margin.Left >= playground.Width - 50) 
    { 
        BallNextPos.Left = 0; 
        AnimateBall(BallNextPos, BallCurrentPos); 
    }
}

You would get useful information and instructions about the game when you select the “About” command in the menu bar.

Summary

It is a nice experience to go back and bring the pad and ball to the WPF environment. There is still a lot more to do with this such as setting the duration of the game, the number of balls, and counting the points scored by the player, besides just playing the ball with the pad. When these features get implemented, it would be a perfect game for anyone to see WPF in full action. Hope I would come up with these things with version 2 of the game.