Introduction
Silverlight technology serves one of the best platforms to write web based games. The main advantage is that shapes in Silverlight draw themselves and they support the same events as other elements. So we don’t need to worry about painting process of shapes, etc. This game also serves as the basics to develop a game in Silverlight.
Game Play
After selecting the game mode in the first screen, you will see game board; the game will start using “space bar” key. Left and right arrow keys are used to move the bar left or right.
Game Components
The solution of Breakout game consists of the following folder structure.
Brick Component
Brick.xaml file is the representation of Brick in game. A brick is initialized using its contructor, c
is a canvas on which brick is drawn in a specified location and color.
public Brick(Canvas c, Point location, Color color)
{
InitializeComponent();
_color = color;
brickColor.Color = _color;
this.X = location.X;
this.Y = location.Y;
c.Children.Add(this);
}
When a brick is destroyed, an animation plays that will make the size of brick to 0 and Sounds\BrickDestroyed.mp3 sound is played.
<storyboard x:name="brickDestroyed">
<doubleanimationusingkeyframes begintime="00:00:00"
storyboard.targetname="scaleTransform" storyboard.targetproperty="ScaleY">
<splinedoublekeyframe keytime="00:00:01" value="0">
</doubleanimationusingkeyframes>
<doubleanimationusingkeyframes begintime="00:00:00"
storyboard.targetname="scaleTransform" storyboard.targetproperty="ScaleX">
<splinedoublekeyframe keytime="00:00:01" value="0">
</doubleanimationusingkeyframes>
</storyboard>
Ball Component
Ball is moved on canvas using specified speed, Move()
method in ball class will move ball to new X and Y location.
public void Move()
{
X += ((_leftDirection) * SPEED);
Y += ((_topDirection) * SPEED);
}
Bar Component
<Canvas Background="Transparent">
<Rectangle x:Name="bar" Stroke="#FF000000" RadiusY="20" RadiusX="20">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Brown" Offset="0"/>
<GradientStop Color="Black" Offset="0.6"/>
<GradientStop Color="Maroon" Offset="0.7"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
public void MoveRight()
{
if ((X + SPEED) < Utility.PlayingAreaWidth - Bar.BarWidth)
{
X += SPEED;
}
}
public void MoveLeft()
{
if ((X-SPEED) > 0)
{
X -= SPEED;
}
}
Game Board
Gameboard logic is contained in GameBoard.xaml and GameBoard.xaml.cs file. I used canvas layout container as this container provides X and Y axis coordinates system to postion child element
<canvas x:name="mainArea" width="500" height="600"><canvas.background>
<imagebrush imagesource="Images/background.jpg"></canvas.background>
<mediaelement x:name="gameBackGroundSound"
source="Sounds/BackGroundSound.mp3" autoplay="True" volume="0.3"
mediaended="gameBackGroundSound_MediaEnded">
<mediaelement x:name="gameOver" source="Sounds/GameOver.mp3" autoplay="False">
</canvas>
This class contains _mainTimer
member variable that will trigger timer tick event to perform some tasks, like moving ball to its new location, checking whether game is over or not, collision detection, etc.
DispatcherTimer _mainTimer = new DispatcherTimer();
void _mainTimer_Tick(object sender, EventArgs e)
{
_ball.Move(); CheckGameOver(); DetectCollision(); }
Collision Detection
DetectCollision()
method checks collision of ball with bricks, board sides and bar. It uses the Utility.GetDistance(Point point1, Point point2)
method in utility class to calculate the distance between two points.
private void DetectCollision()
{
CheckCollisionWithSides();
Point p1;
Point p2;
CheckCollisionWithBar(out p1, out p2);
Brick brickToRemove = null;
CheckCollisionWithBricks(ref p1, ref p2, ref brickToRemove);
if (brickToRemove != null)
{
_bricks.Remove(brickToRemove);
score += 10;
}
}