Click here to Skip to main content
13,042,630 members (76,892 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


29 bookmarked
Posted 8 Apr 2010

Breakout in Silverlight

, 15 Apr 2010
Rate this:
Please Sign up or sign in to vote.
An implementation of classic breakout game in Silverlight


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)
    _color = color;
    brickColor.Color = _color;
    this.X = location.X;
    this.Y = location.Y;

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 begintime="00:00:00" 

	storyboard.targetname="scaleTransform" storyboard.targetproperty="ScaleX">
        <splinedoublekeyframe keytime="00:00:01" value="0">

Ball Component

Ball is moved on canvas using specified speed, Move() method in ball class will move ball to new X and Y location.

/// <summary>
/// This method will move ball according to its current speed and direction
/// </summary>
public void Move()
   X += ((_leftDirection) * SPEED);
   Y += ((_topDirection) * SPEED);

Bar Component

<Canvas Background="Transparent">
        <Rectangle x:Name="bar" Stroke="#FF000000" RadiusY="20" RadiusX="20">
                <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"/>
/// <summary>
/// This function will move bar to right side according to its speed
/// </summary>
public void MoveRight()
    if ((X + SPEED) < Utility.PlayingAreaWidth - Bar.BarWidth)
       X += SPEED;

/// <summary>
/// This function will move bar to left side according to its speed
/// </summary>
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"

    <mediaelement x:name="gameOver" source="Sounds/GameOver.mp3" autoplay="False">

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();
/// <summary>
/// Main Game Loop
/// </summary>
void _mainTimer_Tick(object sender, EventArgs e)
   _ball.Move(); // move ball
   CheckGameOver(); // check game is over or not
   DetectCollision(); // collision detection

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.

/// <summary>
/// Collision detection logic
/// </summary>
private void DetectCollision()
   // Check collision with sides

   // Check collision with bar
   Point p1;
   Point p2;
   CheckCollisionWithBar(out p1, out p2);

   // Collision with Bricks
   Brick brickToRemove = null;
   CheckCollisionWithBricks(ref p1, ref p2, ref brickToRemove);

   if (brickToRemove != null)
       score += 10;


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Yasser Azeem
Software Developer
Pakistan Pakistan
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
kaishen12-Aug-10 20:06
memberkaishen12-Aug-10 20:06 
GeneralRe: My vote of 5 Pin
Yasser Azeem22-Sep-10 2:11
memberYasser Azeem22-Sep-10 2:11 
GeneralMy vote of 4 Pin
Howard Richards30-Jun-10 10:07
memberHoward Richards30-Jun-10 10:07 
GeneralRe: My vote of 4 Pin
Yasser Azeem6-Jan-11 23:43
memberYasser Azeem6-Jan-11 23:43 
GeneralExcellent work Pin
shahzadafzal10-Apr-10 8:39
membershahzadafzal10-Apr-10 8:39 
GeneralGood example for starters Pin
junaid10910-Apr-10 7:50
memberjunaid10910-Apr-10 7:50 
GeneralExcellent Article for game developers new to Silverlight Pin
Nausherwan10-Apr-10 7:39
memberNausherwan10-Apr-10 7:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 15 Apr 2010
Article Copyright 2010 by Yasser Azeem
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid