Silverlights Out -通过示例介绍 Silverlight

• 下载源代码 - 157.1 Kb

在线演示

引言

任何足够先进的技术都与魔法无异。
—亚瑟·C·克拉克

"Silverlight 是一个跨浏览器、跨平台的插件，用于在 Web 上交付下一代基于 Microsoft .NET 的媒体体验和丰富的交互式应用程序。" — http://silverlight.net/

学习新技术最好的方法就是使用它。
学习新技术的最好玩的方法就是用它来制作一款游戏。

这是我编写的第一个 Silverlight 应用程序。Silverlight 是 .NET 的一个子集，就像 .NET Compact Framework 一样，它有自己的一套特殊规则和处理方式。

如果您想了解更多关于 Silverlights Outs 的信息，请访问我的博客： http://www.cjcraft.com/blog/。

这就是为什么我建议通过先创建一个简单的应用程序来学习 Silverlight，例如 Silverlights Out，这样新用户就可以专注于 Silverlight 应用程序创建方面的新特性和不同之处，直到他们“展翅高飞”为止。

必备组件

要创建 Silverlight 应用程序，您需要一台机器，我推荐使用虚拟机，并按照以下 Silverlight 先决条件进行设置。

• 运行时

  要开始使用 Silverlight，请下载 Silverlight 1.1 Alpha 版本以使用 .NET 语言。

• Microsoft Silverlight 1.1 Alpha [下载]

  运行使用 .NET Microsoft 创建的 Silverlight 应用程序所需的运行时。

• 开发人员工具

  下载 Visual Studio 开发人员工具以开始开发 Silverlight 应用程序。

• Microsoft Visual Studio 代号“Orcas” Beta 1 [下载]

  下一代开发工具。

• Microsoft Silverlight Tools Alpha for Visual Studio 代号“Orcas” Beta 1 [下载]

  用于使用 .NET 创建 Silverlight 应用程序的插件。

• 设计工具

  下载 Expression 设计师工具以开始设计 Silverlight 应用程序。

• Expression Blend 2 五月预览版 [下载]

  用于创建 Silverlight 用户交互的专业设计工具。

• 软件开发工具包

  有关文档、示例和插件，也请下载 SDK。

• Microsoft Silverlight 1.1 Alpha 软件开发工具包 (SDK) [下载]

  下载此 SDK 以创建面向 Silverlight 1.1 Alpha 的 Silverlight Web 体验。
  SDK 包含文档和示例。

背景

Wikipedia.org 文章：Lights Out (益智游戏) [查看]

"Lights Out，也称为 Fiver，是一款单人益智游戏，在一个 m x n 的网格上进行，其中每个方块都有两种状态：开和关。游戏通常从所有方块都关闭开始，目标是打开所有方块。通过选择一个方块，该方块及其所有相邻方块（上、下、左、右）的状态将被切换。例如，在一个 3x3 的网格上，所有方块都关闭，如果选择中心方块，它将变为“开”，并且另外 4 个方块也将被切换。"

Silverlights Out 演示了以下功能

• 动画滚动星空背景
• 透明度
• 定时器

使用代码

像 Silverlights Out 这样的益智游戏非常适合学习新语言或新技术，因为您可以体验各种内容，而不会因为过于困难而阻碍成功。

主要方法

RandomizeBoard()

此方法负责在游戏开始前随机化棋盘。

通过遍历每个方块，并随机决定是否调用 ToggleSquare() 来实现这一点。

private void RandomizeBoard()
{
    // create a randomizer
    Random random = new Random();

    // loop through each squares
    for (int i = 0; i < squares.Count; i++)
    {
        // fifty / fifty toggle square
        if (Convert.ToBoolean(random.Next(2)))
        {
            ToggleSquare(squares[i]);
        }
    }
}

ClickSquare()

此函数负责管理用户点击的方块。

首先，我们获取方块的名称，然后对所有相关的方块调用 ToggleSquare()。

private void ClickSquare(object sender, MouseEventArgs e)
{
    Image image = sender as Image; // cast sender object into Image

    int index = squares.IndexOf(image); // get index of clicked square

    if (index > 4) // make sure we are not on topmost row
        ToggleSquare(squares[index - 5]); 
                // toggle square above clicked square

    if (index % 5 != 0)
        ToggleSquare(squares[index - 1]); 
                // toggle square to left of clicked square

    ToggleSquare(squares[index]); // toggle clicked square

    if (index % 5 != 4)
        ToggleSquare(squares[index + 1]); 
                // toggle square to right of clicked square

    if (index < 20) // make sure we are not on bottommost row
        ToggleSquare(squares[index + 5]); 
                // toggle square below clicked square
}

ToggleSquare()

当方块被点击时，此辅助方法决定附近方块的结果。

如果方块是开启状态，我们将其关闭；否则，我们将其重新开启。然后我们检查棋盘是否处于获胜状态。我们还为获得良好效果而设置和更改图像的不透明度。

private void ToggleSquare(Image image)
{
    // check if square is on
    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()

在完成一步之后，此辅助函数确定棋盘是否处于获胜状态。

我们遍历每个方块，并计算有多少是开启和关闭的。如果所有方块都相同，则用户已获胜。

private bool CheckForWin()
{
    int onCount = 0; // assume no square on by default
    bool checkForWin = false; // assume player did not win

    // loop through all squares
    for (int i = 0; i < squares.Count; i++)
    {
        if (squares[i].Source == vistaLogoOn.Source)
            onCount++;
    }

    // if all lights are on or off then player wins
    if (onCount == 0 || onCount == 25)
        checkForWin = true;

    return checkForWin;
}

提示与技巧

Browser.HtmlTimer

我发现 Silverlight 1.1 中有一个 HtmlTimer 类。这个类没有文档记录，并且被标记为已弃用。Visual Studio 在编译后显示警告：'System.Windows.Browser.HtmlTimer' 已弃用：'这不是高分辨率计时器，不适用于短间隔动画。未来版本将提供新的计时器类型。'

...
// use the browser's HtmlTimer to refresh background regularly

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)
   {
      // move background pixels over>
      background.SetValue(Canvas.LeftProperty, currentLeft + 2);
   }
   else
   {
      // reset backgrounds position
      background.SetValue(Canvas.LeftProperty, -340);
   }
}

关注点

请务必查看使用 System.Windows.Browser.HtmlTimer 的计时器代码，目前它是实现原始动画的最简单方法。

资源

您需要使用和学习 Silverlight 的几乎所有内容都列在以下网站：

• Chris Craft 的博客
• Silverlight 资源思维导图
• Silverlight 资源思维导图作为 Silverlight 应用程序

历史

• 2007.05.13 上传原始文章
• 2007.05.14 将代码转换为使用数组和循环