前言
本文分享如何使用wpf的原生xaml代码绘制五子棋游戏界面,及实现简单的UI交互。
整体效果
效果如下:
绘制棋盘
思路:使用两个叠加在一起的Grid:Grid1(19行19列)、Grid2(18行18列)。
1、定义个19行19列的Grid1;
2、在Grid1中填充一个Border,跨越Grid1的所有行和列;
3、在Border中放一个18行18列的Grid2,ShowGridLines设置为true(显示网格线);
注意:正确设置Border的BorderThickness和Margin,使Grid1中的棋子刚好能落在Grid2的网格线的交叉点上。xaml结构如下:
棋子设计
使用RadialGradientBrush绘制棋子光晕。黑色棋子的xaml如下:
<Grid>
<Border CornerRadius="15">
<Border.Background>
<RadialGradientBrush Center="0.3,0.3" GradientOrigin="0.3,0.3" RadiusX="0.4" RadiusY="0.4">
<GradientStop Color="White"/>
<GradientStop x:Name="gsColor1" Color="LightGray" Offset="0.2"/>
<GradientStop x:Name="gsColor2" Color="Black" Offset="1"/>
</RadialGradientBrush>
</Border.Background>
</Border>
</Grid>
UI交互
在Grid1上绑定MouseLeftButtonUp事件,根据鼠标坐标计算在Grid1中放置一颗棋子的row和column。
private void GridBoard_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Point p = e.GetPosition(GridBoard);
int c = (int)p.X / pieceSize;
int r = (int)p.Y / pieceSize;
addPiece(new PieceInfo(c, r,pieceColor));
}
扩展
基于此可以开发五子棋人机对弈或联网对战。若想要实现五子棋智能,可以参考文章:五子棋人机对战思路分享