Silverlight版本的打砖块游戏

代码下载:

http://www.codeproject.com/KB/silverlight/Silverlight_Breakout/BreakOutSource.zip

 

Introduction  

Silverlight technology serves one of the best platform 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 game in Silverlight.

Game Play

After selecting the game mode in first screen,you will see game board; 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 following folder structure.

 

 

 

 

 

 

 

 

 

 

 

 

 

Brick component

Brick.xaml file is representation of Brick in game.a brick is initialized using it contructor,c is canvas on which brick is drawn on specified location and color.

Collapse

Copy Code

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.

Collapse

Copy Code

<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.

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 cordinates system to postion child element

Collapse

Copy Code

<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.

Collapse

Copy Code

dispatcherTimer _mainTimer = new dispatcherTimer();
/// 
/// Main Game Loop
/// 
/// /// 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 distance between two points.

Collapse

Copy Code

/// 
/// Collision detection logic
/// 
private void DetectCollision()
{   
   // Check collision with sides
   CheckCollisionWithSides();

   // 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)
   {
       _bricks.Remove(brickToRemove);
       score += 10;
   }
}