原文: WPF实战俄罗斯方块
概述
本文试图通过经典的游戏-俄罗斯方块,来演示WPF强大的图形界面编程功能。
涉及的图形方面有这几个方面:
1、不规则界面的设置
2、布局系统的使用
3、2D图形的应用
4、输入事件的响应
5、风格样式的使用
6、跨线程的调用
7、自定义控件
我们先截两张成品的图片,获取一点感性的认识。截图如下:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuUTM4ITZxETN2IWNzATY4ITM2QGOjRDZ4MGOkFGZzY2YfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
图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);
}
}
}
算法
本程序的算法,主要是通过两个二维数组来实现的。
具体算法略。
源码