Animated snakes to drive around a Windows Phone 7 makes a really good classic game and a great way to find out how to use Silverlight in game mode.

Many novelty games can be created using nothing but Silverlight - XNA is only needed if you want 3D or smooth high resolution graphics. For block animation games such as Pac Man, platform games, games of logic and so on all you need is Silverlight and usually the Grid layout panel.

In this article we start the process of developing a simple block graphic game - snake. We will build all the necessary logic to create and animate the snake but for the sake of keeping things short the graphics used are kept simple and no attempt has been made to "polish" the presentation.

At the end of the article we have a basic snake graphic that moves around the screen randomly as an initial demonstrator for the game. In future articles we look at adding the user interaction and elements of game play.

It is assumed that you have the Windows Phone 7 development system installed and that you know how to write a Silverlight Windows Phone 7 application - if not read: Getting started with Windows Phone 7.

The Grid

The whole principle of creating block graphics games is to use a Grid layout control to provide a suitable playing grid. The Grid can be divided up into rows and columns and graphics can be placed in cells with a location specified by row and column numbers.

The only real problem with using a Grid in this way is that while setting a graphic at a location is very easy - finding what graphic is at a location is more difficult and this has to be kept in mind while designing the game.

The first thing we have to do is create the playing grid. This always takes the same sequence of steps.

First add a Border and then a Grid that you can use for the playing area into the standard user interface - either using drag-and-drop or by entering the XAML:

<Border BorderBrush="white" 
        Width="450" 
        Height="450" 
        BorderThickness="2" 
        CornerRadius="2" >
 <Grid  Height="450" 
        Name="PlayArea" 
        Width="450" 
        ShowGridLines="True" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center">
 </Grid>
</Border>

The main points are make the grid is 450x450 and centred with grid lines visible.

Next we define the size of the grid you want to work with. In this case 15 x 15 is reasonable:

 const Int32 GridSize = 15;

Now we create the rows and columns of the Grid in the page's constructor

public MainPage()
{
 InitializeComponent();
 for (int i = 0; i < GridSize; i++)
 {
  PlayArea.ColumnDefinitions.Add(
               new ColumnDefinition());
  PlayArea.RowDefinitions.Add(
               new RowDefinition());
 }
}

If you run the program now you should be able to see the grid lines marking out the rows and columns. Some games work better with and some without grid lines.

Snakes and Queues

The reason why a snake is such an easy thing to animate is that it is that, while it is a large object, only its head and tail are involved in moving it. To move a snake all you have to do is draw a new head at the new position and blank out the old location of the tail. 

So to animate a snake all you need to keep track of is the position of the head and the tail. This can be done very easily using a queue data structure. A queue is an ordered collection of objects. Objects are added to the back of the queue and taken from the front of the queue. Objects at the back of the queue work they way to the front as things are removed from the front and added to the back. That is a queue data structure works in exactly the way a real life queue works.

Snake animation with a queue is very easy. You simply add the new head to the end of the queue each time and remove the tail from the front of the queue and hence from the screen. If you keep doing this each head object slowly works its way to the tail end and eventually becomes the tail and is removed.

<ASIN:0735643423>

<ASIN:1430232161>

<ASIN:0672332221>

<ASIN:0672333481>