The Padding Ball game in WPF

Home » Articles

	Search

	Technologies
	ASP.Net C# ASP.Net AJAX IIS .NetFramework Webservices Sql Server Javascript Sharepoint Services ASP.Net MVC jQuery

	Sponsored links

	CodeDigest Navigation
	Home Register Login Advertise Contact Us

	Technology News
	No News Feeds available at this time.

	Community News
	No News Feeds available at this time.

The Padding Ball game in WPF

By Balamurali Balaji
Posted On Jun 06,2008

Article Rating:


Average Rating: 5 No of Ratings: 1

No of Comments: 0

Category: .NetFramework


Print this article.

The Padding Ball game in WPF

Padding Ball v1.0

Introduction

Remember, in those good olden days, there was a game to play the ball that moves around all corners of your screen using a little pad and the “Brick and Ball” game that had swept all our joy by breaking the bricks stacked on top of the window. One could not easily forget the same game available in windows form in the recent days.

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 menu, ball and pad objects declaratively as 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">

<Menu VerticalAlignment="Top" HorizontalAlignment="Left"

Height="20" Width="700" Background="AliceBlue" Foreground="Blue">

</MenuItem>

</Menu>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle.BitmapEffect>

</Rectangle.BitmapEffect>

<Rectangle.BitmapEffectInput>

</Rectangle.BitmapEffectInput>

</Rectangle>

</Grid>

</Canvas>

</Window>

As you look at it, each of the menuitem is bind to the respective event handlers for the Click event. When you open the application, you could 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 had experienced a part easier when the drawings for Ball and Pad, the background are created, 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 pad. Nevertheless, the controlling of animation with the keyboard interaction by the user had also thrown new ideas in WPF programming.

Most of the animation and positioning of ball and pad was done with the Thickness structure found in System.Windows namespace and ThicknessAnimation class found in 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, 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 its 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 Ball and the Pad objects, along with the specified duration is added as a child to the StoryBoard and 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 values 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 property 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;