A tiny Silverlight 3 Shooting Game

I decided recently to test (myself!) whether I could create a small shooting game in Silverlight. Having read the book "Game Programming with Silverlight", I felt somewhat confident in this! After a couple of coding hours, I managed to deliver a decent (well, maybe not!) and simple game, which I am going to present here to you. The game is, in its nature, rather simple.

Check tha game here: http://www.dgkanatsios.com/SilverlightShootingGame  

Page loads, you click “Start” and the game begins. All you have to do is click on my face to  “shoot” me, and get more points. After some time the game ends, and you are presented with your score.

The code itself has some interesting parts:

First of all, how to programmatically create an animation in C#

   1:  //a doubleanimation with a random duration
   2:  DoubleAnimation da = new DoubleAnimation();
   3:  da.From = (double)element.GetValue(direction);
   4:  da.To = da.From + (double)distance;
   5:  da.Duration = new Duration(new TimeSpan(0, 0, randomgenerator.Next(3, 5)));
   6:   
   7:  //set the target for the animation
   8:  Storyboard.SetTarget(da, element);
   9:  Storyboard.SetTargetName(da, element.Name);
  10:  Storyboard.SetTargetProperty(da, new PropertyPath(direction));

How to play multiple sounds with many MediaElement objects in C#

   1:  //play the first available mediaelement
   2:  sndFire[currentFire].Stop();
   3:  sndFire[currentFire].Play();
   4:   
   5:  if (currentFire == MaxNumberOfTargets - 1)
   6:      currentFire = 0;
   7:  else
   8:      currentFire++;

Programmatically create a FrameworkElement and add it to LayoutRoot (Canvas, Grid, etc.)

   1:  Image image = new Image();
   2:  image.Name = Guid.NewGuid().ToString();//a random name for each image. Yeah, I'm sure I could have done something else :-)
   3:  image.Source = new BitmapImage(new Uri("image.png", UriKind.RelativeOrAbsolute));
   4:  //700 x 502 is the size of the container Canvas
   5:  //just removing some pixels (100 and 50) so the image is displayed correctly
   6:  image.SetValue(Canvas.TopProperty, (double)randomgenerator.Next(0, 502 - 100));
   7:  image.SetValue(Canvas.LeftProperty, (double)randomgenerator.Next(0, 700 - 50));
   8:  image.Effect = new DropShadowEffect();//a simple Silverlight 3 effect
   9:   
  10:  //add the handler so, when user 'shoots' an image
  11:  //it is removed, sound is heard, and the score is increased
  12:  image.MouseLeftButtonDown += new MouseButtonEventHandler(i_MouseLeftButtonDown);
  13:   
  14:  //create and begin the image animation
  15:  Storyboard sb = new Storyboard();
  16:  DoubleAnimation da = GetRandomDirectionAnimation(image);
  17:  sb.Children.Add(da);
  18:  da.Completed += new EventHandler(da_Completed);//when the image has been 'shot' remove it
  19:  LayoutRoot.Children.Add(image);//add the image to the canvas
  20:  sb.Begin();

And more, if you download the source code :-)

You can also view the application here: http://silverlight.services.live.com/invoke/33130/SilverlightShootingGame/iframe.html (Hosted in Silverlight Streaming Service)

You can download the full source code for this (it’s not much!) by navigating to my Skydrive folder here: http://cid-10e568adbb498dc8.skydrive.live.com/browse.aspx/Sample%20Source%20code%20in%20.NET It's the Silverlight Shooting Game file.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s