WPF实战俄罗斯方块

概述

本文试图通过经典的游戏-俄罗斯方块，来演示WPF强大的图形界面编程功能。

涉及的图形方面有这几个方面：

1、不规则界面的设置

2、布局系统的使用

3、2D图形的应用

4、输入事件的响应

5、风格样式的使用

6、跨线程的调用

7、自定义控件

我们先截两张成品的图片，获取一点感性的认识。截图如下：

图1

图2

以上两张图中，整个程序界面已经和市场上的游戏比较接近。7种形状分别以不同的颜色进行区分，可以快速下落，一键下落，开始、暂停、算分，基本上功能全了。

实现

那这个程序究竟是怎么实现的呢？实际上，我在逻辑的层面，把它成分了两个层次，一个是图形展示层，一个是游戏算法实现层。游戏算法尽量地与图形界面分离，这样同的算法可以比较轻松地移植到别的平台上，比如用H5实现，或是用D3D实现等等，你只要关注不同平台的图形显示部分即可。

界面

界面上，除了基础的元素如分数、级别、启停按钮等，还对整体做了个性化的定制。比如使用了椭圆的程序界面，游戏主体部分使用了阴影显示，用一个动画显示欢迎信息等。

下边，我们一步一步把程序拆分开来。

1、主窗体部分

主窗体部分主要由Xaml来实现，包括其中的动画部分。

1）椭圆的实现

WPF中设置图形界面是十分的方便，整个应用程序就是一个大画布，想怎么画就怎么画。就算根窗体，一个Clip属性就可以改变它的形状。这里用的是.Net Framework里自带的

EllipseGeometry 类，只要设置两个半径和中心点即可。这里有别于Winform下边的GDI实现，不需要显式的调用图形API去画图。具体代码如下：

    <Window.Clip>
        <EllipseGeometry RadiusX="470" RadiusY="340" Center="512,384"/>
    </Window.Clip>

2）动画的实现

动画的实现，可以自己手动写代码。不过，可以通过VS Blend更方便的实现动画。这里将左边的“俄罗斯广场欢迎你！”几个字做一个随意的动画。为了提高开发效率，这里使用了Blend来制作的动画。下边的Blend的操作界面：

图3

以下是通过编辑器生成的代码：

-定义触发器

 <Window.Triggers>

        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/>
        </EventTrigger>

    </Window.Triggers>

-定义资源

<Window.Resources>
        <Storyboard x:Key="OnLoaded1" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="label">
                <EasingDoubleKeyFrame KeyTime="0" Value="-24"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="69"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-9"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-115.5"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="-90"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="label">
                <EasingDoubleKeyFrame KeyTime="0" Value="-21"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="3"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="100.5"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="90"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="-21"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="label">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-169.33"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="150.377"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="-3.442"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

注：WPF任何属性定义都可以当作资源来重用。

3）花式按钮

这个比较简单，也就是设置了一下本身的样式。

编辑器窗口：

代码如下：

<Button Content="X" ToolTip="关闭" Focusable="False" HorizontalAlignment="Left" Margin="828,320,0,0" VerticalAlignment="Top" Width="75" Height="79" FontSize="36" Foreground="#FFA62121" Click="Button_Click">
            <Button.Background>
                <RadialGradientBrush>
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="#FF6FDABD" Offset="1"/>
                </RadialGradientBrush>
            </Button.Background>
        </Button>

4）Grid布局

界面元素的摆放，可以通过绝对坐标的方式，但这种方式通常需要手工编码的方式去计算元素的位置，所以在复杂的应用系统中是不建议使用的。那么为了简化界面元素的排列，于是便有了布局系统。一般比较细粒度的一点的控制，多采用Grid，这里也采用了Grid。Grid主要是将界面分成若干行和列，然后将元素放入其中，类似Html中的Table，这里不赘述。

下边是一个一行两列的Grid，Grid本身铺满父容器。

 <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="300*"/>
        </Grid.ColumnDefinitions>
...
</Grid>

5）容器的拖拽

这里也很简单，写一段响应MouseDown事件的代码：

 private void Window_MouseDown(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
        }   

6）自定义控件

网格线的实现，及预置方块。代码如下：

private void UserControl_Initialized(object sender, EventArgs e)
        {
            for (var col = 0; col <= 10; col++)
            {
                Line line = new Line();
                line.X1 = col * 30;
                line.X2 = col * 30;
                line.Y1 = 0;
                line.Y2 = 600;
                line.Stroke = new SolidColorBrush(Color.FromArgb(0xFF, 0, 0, 1));
                grid.Children.Add(line);
            }

            for (var row = 0; row <= 20; row++)
            {
                Line line = new Line();
                line.X1 = 0;
                line.X2 = 300;
                line.Y1 = row * 30;
                line.Y2 = row * 30;
                line.Stroke = new SolidColorBrush(Color.FromArgb(0xFF, 0, 0, 1));
                grid.Children.Add(line);
            }

            for (int row = 0; row < 20; row++)
            {
                for (int col = 0; col < 10; col++)
                {
                    bool show = datas[row, col];
                    Cube cube = new Cube();
                    cube.Width = 24;
                    cube.Height = 24;
                    cube.HorizontalAlignment = HorizontalAlignment.Left;
                    cube.VerticalAlignment = VerticalAlignment.Top;
                    if (show)
                    {
                        cube.Visibility = Visibility.Visible;
                    }
                    else
                    {
                        cube.Visibility = Visibility.Hidden;
                    }
                    var m = cube.Margin;
                    cube.Margin = new Thickness(m.Left + col * 30 + 3, m.Top + row * 30 + 3, m.Right, m.Bottom);
                    cubes[row, col] = cube;
                    grid.Children.Add(cube);
                }
            }
        }

算法

本程序的算法，主要是通过两个二维数组来实现的。

具体算法略。

源码