泡泡龙

• 下载源代码 - 329 KB

引言

使用 Silverlight 技术进行开发非常有趣，为我开发一个网页游戏是一次令人兴奋的体验。这篇文章对想要使用 Silverlight 技术开发游戏的新手来说，内容很有价值。

泡泡消除器是一个使用 Silverlight 开发的益智游戏。通过点击选择相同颜色的泡泡，然后再次点击消除它们。一次点击消除的泡泡越多，得分越高。

绘制泡泡

Bubble 控件的 XAML 非常简单。我使用 Canvas 控件作为容器，因为 Canvas 控件提供了两种定位控制。Canvas 包含 Border 控件作为子控件，这使得设置顶部和左侧坐标变得容易。最后，Button 是 Border 控件的子控件，它将绘制实际的泡泡形状。

<Canvas>
     <Border x:Name="CanvasBubble" Width="26" 
               Height="26" RenderTransformOrigin="0.5,0.5">
         <Button x:Name="btnBubble" Height="Auto" Width="Auto" 
                    Style="{StaticResource ButtonStyleBlue}" Click="btnBubble_Click" 
                    Background="AliceBlue" 
                    BorderThickness="0,0,0,0" HorizontalAlignment="Center" 
                    VerticalAlignment="Center" 
                    MouseLeave="btnBubble_MouseLeave" Cursor="Hand" 
                    RenderTransformOrigin="0.5,0.5">
         </Button>
     </Border>
</Canvas>

模板和样式

在 Silverlight 中，我们可以轻松更改控件的默认形状。我将 Button 的默认形状更改为圆形。Expression Blend 提供了一种简单的方法来更改/创建控件的模板。右键单击一个元素，然后选择“编辑控件部件（模板）”，然后选择“创建空模板”。它会打开一个对话框，您可以在其中为模板命名并按“确定”。然后，它会显示设计视图，用户可以在其中创建/更改模板。

您还可以为 Silverlight 中的控件创建样式。我使用 Style="{StaticResource ButtonStyleBlue}" 属性为按钮设置样式。要创建样式，请从“对象和时间线”面板中选择一个控件，然后从菜单中单击“对象”，单击“编辑样式”，然后选择“创建空模板”。它会打开一个表单，您可以在其中设置样式。

泡泡消除器有五种颜色的泡泡，我为每种颜色创建了一个样式。我没有创建单独的模板。每个样式都有自己的模板。

<Style x:Key="ButtonStyleBlue" TargetType="Button">
 <Setter Property="Background" Value="#FF1F3B53"/>
 <Setter Property="Foreground" Value="#FF000000"/>
 <Setter Property="Padding" Value="3"/>
 <Setter Property="BorderThickness" Value="1"/>
 <Setter Property="BorderBrush">
     <Setter.Value>
         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
             <GradientStop Color="#FFA3AEB9" Offset="0"/>
             <GradientStop Color="#FF8399A9" Offset="0.375"/>
             <GradientStop Color="#FF718597" Offset="0.375"/>
             <GradientStop Color="#FF617584" Offset="1"/>
         </LinearGradientBrush>
     </Setter.Value>
 </Setter>
 <Setter Property="Template">
     <Setter.Value>
        <ControlTemplate TargetType="Button">
            <Ellipse Height="25" Width="25" 
                StrokeThickness="1" x:Name="ellipse" 
                RenderTransformOrigin="0.5,0.5" 
                Stroke="#FF000000" Margin="0,0,0,0">
                 ........
                 ........
            </Ellipse>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
</Style>

您可以轻松地在运行时设置控件样式。

switch (_bubbleColor)
{
    case BubbleColor.Blue:
    {
        btnBubble.Style = (Style)App.Current.Resources["ButtonStyleBlue"];
        break;
    }
    case BubbleColor.Red:
    {
        btnBubble.Style = (Style)App.Current.Resources["ButtonStyleRed"];
        break;
    }
    case BubbleColor.Green:
    {
        btnBubble.Style = (Style)App.Current.Resources["ButtonStyleGreen"];
        break;
    }
}

动画泡泡

您可以轻松地在 Silverlight 中对控件进行动画处理。单击“+”按钮。它会打开一个对话框，您可以在其中为“故事板”命名。StoryBoard 是一个容器，您可以在其中放置动画对象。StoryBoard 被保存为可供您想要动画化的对象使用的资源。

<UserControl.Resources>
  <Storyboard x:Name="StoryboardShakeBubble" RepeatBehavior="Forever">
    ......
    ......
  </Storyboard>
</UserControl.Resources>

StoryBoard 提供了一个 Begin() 方法来启动动画，以及一个 Stop() 方法来停止动画。

if (Seleted)
{
   StoryboardShakeBubble.Begin();
}
else
{
   StoryboardShakeBubble.Stop();
}