Live Online Demo
Introduction
Any sufficiently advanced technology is indistinguishable from magic.
�Arthur C. Clarke
"Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of Microsoft .NET�based media experiences and rich interactive applications for the Web." � http://silverlight.net/
The best way to learn a new technology is by using it.
The most fun way to learn a new technology is by using it to make a game.
This is my first application I have written in Silverlight. Silverlight is a subset of .NET, just like the .NET Compact Framework is, and has it's own set of special rules, and ways of doing things.
If you want to learn more about Silverlights Outs, then check out my blog: http://www.cjcraft.com/blog/.
That's why I recommend learning Silverlight by first creating a simple application, something like Silverlights Out, so that new users can focus on what is new and different about creating Silverlight applications until they earn their "wings" so to speak.
Prerequisites
In order to create Silverlight applications you will need a machine, I recommend a virtual PC, and have it set up with the following Silverlight prerequisites:
-
Runtimes
To get started with Silverlight, download the Silverlight 1.1 Alpha release to use .NET languages.
-
Microsoft Silverlight 1.1 Alpha [download]
The runtime required to view Silverlight applications created with .NET Microsoft
-
Developer Tools
Download the Visual Studio developer tools to start developing Silverlight applications.
-
Microsoft Visual Studio codename "Orcas" Beta 1 [download]
The next generation development tool.
-
Microsoft Silverlight Tools Alpha for Visual Studio codename "Orcas" Beta 1 [download]
The add-on to create Silverlight applications using .NET
-
Designer Tools
Download the Expression designer tools to start designing Silverlight application.
-
Expression Blend 2 May Preview [download]
Professional design tool to create user interaction for Silverlight.
-
Software Development Kit
For documentation, samples and add-ins, also download the SDK's.
-
Microsoft Silverlight 1.1 Alpha Software Development Kit (SDK) [download]
Download this SDK to create Silverlight Web experiences that target Silverlight 1.1 Alpha.
The SDK contains documentation and samples.
Background
Wikipedia.org Article: Lights Out (puzzle) [view]
"Lights out, also known as Fiver, is a one player puzzle that is played on a m by n grid of squares in which every square has two states: on and off. The game usually starts off with all squares off, where the goal is to turn on every square. By selecting a square, itself and all the surrounding squares' (up, down, left, right) state is turned toggled. For example, on a 3 by 3 grid of squares with all squares off, if the center one is selected, it will turn "on" and so will 4 other squares."
Silverlights Out demonstrates the following features:
- Animated scrolling starfield background
- Transparency
- Timer
Using the code
Puzzle games like Silverlights Out are great to learn a new language or technology with since you get a taste of everything without anything too challenging getting in the way of success.
Main Methods
RandomizeBoard()
This method handles randomizing the board before a game start.
This is accomplished by looping through every square, and randomly deciding to call ToggleSquare()
on it or not.
private void RandomizeBoard()
{
Random random = new Random();
for (int i = 0; i < squares.Count; i++)
{
if (Convert.ToBoolean(random.Next(2)))
{
ToggleSquare(squares[i]);
}
}
}
ClickSquare()
This function is responsible for managing which square the user has clicked.
First, we grab the square's name, and then we call ToggleSquare()
on all appropriate squares.
private void ClickSquare(object sender, MouseEventArgs e)
{
Image image = sender as Image;
int index = squares.IndexOf(image);
if (index > 4)
ToggleSquare(squares[index - 5]);
if (index % 5 != 0)
ToggleSquare(squares[index - 1]);
ToggleSquare(squares[index]);
if (index % 5 != 4)
ToggleSquare(squares[index + 1]);
if (index < 20)
ToggleSquare(squares[index + 5]);
}
ToggleSquare()
When a square is clicked, this helper method decides the results for the nearby squares.
If the square is on, we turn it off; otherwise we turn it back on. Then we check the board for a win state. We also set and change the image opacity for a nice effect.
private void ToggleSquare(Image image)
{
if (image.Source == vistaLogoOn.Source)
{
image.Source = vistaLogoOff.Source;
image.Opacity = 0.50;
}
else
{
image.Source = vistaLogoOn.Source;
image.Opacity = 0.75;
}
if (CheckForWin())
gameStatus.Text = "You Win";
}
CheckForWin()
After a move is made, this helper function determines if the board is in a win state.
We loop through every square, and count how many are on and off. If all are the same, the user has won.
private bool CheckForWin()
{
int onCount = 0;
bool checkForWin = false;
for (int i = 0; i < squares.Count; i++)
{
if (squares[i].Source == vistaLogoOn.Source)
onCount++;
}
if (onCount == 0 || onCount == 25)
checkForWin = true;
return checkForWin;
}
Tips & Tricks
Browser.HtmlTimer
I found there is an HtmlTimer
class in Silverlight 1.1. This class is undocumented and marked obsolete. Visual Studio shows a warning after compilation: 'System.Windows.Browser.HtmlTimer
' is obsolete: 'This is not a high resolution timer and is not suitable for short-interval animations. A new timer type will be available in a future release.
...
System.Windows.Browser.HtmlTimer timer =
new System.Windows.Browser.HtmlTimer();
timer.Interval = 1;
timer.Enabled = true;
timer.Tick += new EventHandler(timer_Tick);
...
void timer_Tick(object sender, EventArgs e)
{
double currentLeft = (double)background.GetValue(Canvas.LeftProperty);
if (currentLeft <= 0)
{
background.SetValue(Canvas.LeftProperty, currentLeft + 2);
}
else
{
background.SetValue(Canvas.LeftProperty, -340);
}
}
Points of Interest
Be sure to check out the timer code using System.Windows.Browser.HtmlTimer
, for now, it is the easiest way to do raw animations.
Resources
Most everything you'll need to use and learn Silverlight is listed at the sites below:
History
- 2007.05.13 Uploaded original article
- 2007.05.14 Converted code to use arrays and loops