返回列表
发布日期: 2009-07-02 发布者: cobra 中文编程图书最低价热卖  English Programming Books 1#
最近在看《Pro Silverlight 2 in C# 2008》，结合书中的示例举一反三做一些东东。

根据第四章关于Mouse Event的示例，改编成一个五子棋游戏。

XAML Code：
  1. <UserControl x:Class="WuZi.Page"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  4.     <Canvas x:Name="parentCanvas" MouseLeftButt Background="BurlyWood">
  5.     </Canvas>
  6. </UserControl>
复制代码
C# Code：

首先，画出一个15×15的棋盘。
  1.       public Page()
  2.     {
  3.         InitializeComponent();
  4.         int offset = 0;
  5.         //横竖各15条线
  6.         for (int i = 0; i <= 15; i++)
  7.         {
  8.           //垂直线
  9.             Line lineX = new Line();
  10.           lineX.Stroke = new SolidColorBrush(Colors.Black);
  11.           lineX.X1 = 10 + offset;
  12.           lineX.Y1 = 10;
  13.           lineX.X2 = 10 + offset;
  14.           lineX.Y2 = 610;
  15.           parentCanvas.Children.Add(lineX);
  16.           //水平线
  17.             Line lineY = new Line();
  18.           lineY.Stroke = new SolidColorBrush(Colors.Black);
  19.           lineY.X1 = 10;
  20.           lineY.Y1 = 10 + offset;
  21.           lineY.X2 = 610;
  22.           lineY.Y2 = 10 + offset;
  23.           parentCanvas.Children.Add(lineY);
  24.           //线间距
  25.             offset += 40;
  26.         }
  27.       }
复制代码
当点击棋盘时，按次序显示黑白子。
  1.       //跟踪棋子是否被拖拽
  2.       private bool isDragging = false;
  3.     //当棋子被点击时，记录相对于棋子的坐标值。
  4.       private Point mouseOffset;       
  5.     //判断黑子
  6.       private int num = 0;
  7.     private void canvas_Click(object sender, MouseButtonEventArgs e)
  8.     {
  9.         //当鼠标没进行拖拽时，创建棋子。
  10.           if (!isDragging)
  11.         {
  12.           int y;
  13.           y = num % 2;
  14.           Ellipse ellipse = new Ellipse();
  15.           //判断棋子的颜色，奇数黑、偶数白。
  16.             if (y == 0)
  17.           {
  18.               ellipse.Fill = new SolidColorBrush(Colors.Black);
  19.           }
  20.           else
  21.           {
  22.               ellipse.Fill = new SolidColorBrush(Colors.White);
  23.           }
  24.           //设置棋子大小
  25.             ellipse.Width = 40;
  26.           ellipse.Height = 40;
  27.           //改变棋子鼠标形状(手型)
  28.           ellipse.Cursor = Cursors.Hand;
  29.           //根据鼠标位置定位棋子的坐标
  30.             Point point = e.GetPosition(this);
  31.           ellipse.SetValue(Canvas.TopProperty, point.Y - ellipse.Height / 2);
  32.           ellipse.SetValue(Canvas.LeftProperty, point.X - ellipse.Width / 2);
  33.           //跟踪鼠标左键操作
  34.             ellipse.MouseLeftButtonDown += ellipse_MouseDown;
  35.           //添加棋子
  36.             parentCanvas.Children.Add(ellipse);
  37.           num++;
  38.         }
  39.     }
复制代码
鼠标操作跟踪
  1.       //按住鼠标左键
  2.       private void ellipse_MouseDown(object sender, MouseButtonEventArgs e)
  3.     {
  4.         //对棋子进行拖拽
  5.           isDragging = true;
  6.         Ellipse ellipse = (Ellipse)sender;
  7.         //获取相对棋子的坐标值，以棋子左上角为(0,0)点
  8.           mouseOffset = e.GetPosition(ellipse);
  9.         //跟踪鼠标其他操作
  10.           ellipse.MouseMove += ellipse_MouseMove;
  11.         ellipse.MouseLeftButtonUp += ellipse_MouseUp;
  12.         //捕获鼠标位置，将棋子与鼠标绑定
  13.           ellipse.CaptureMouse();
  14.         }
  15.         //鼠标移动
  16.         private void ellipse_MouseMove(object sender, MouseEventArgs e)
  17.         {
  18.             if (isDragging)
  19.             {
  20.                 Ellipse ellipse = (Ellipse)sender;
  21.                 //获取相对Canvas的坐标值
  22.                   Point point = e.GetPosition(this);
  23.                 //移动棋子
  24.                   ellipse.SetValue(Canvas.TopProperty, point.Y - mouseOffset.Y);
  25.                 ellipse.SetValue(Canvas.LeftProperty, point.X - mouseOffset.X);
  26.             }
  27.         }
  28.         //放开鼠标左键
  29.         private void ellipse_MouseUp(object sender, MouseButtonEventArgs e)
  30.         {
  31.             if (isDragging)
  32.             {
  33.                 Ellipse ellipse = (Ellipse)sender;
  34.                 //取消鼠标操作跟踪
  35.                   ellipse.MouseMove -= ellipse_MouseMove;
  36.                 ellipse.MouseLeftButtonUp -= ellipse_MouseUp;
  37.                 ellipse.ReleaseMouseCapture();
  38.                 isDragging = false;
  39.             }
  40.         }
复制代码
效果图

         
附件: 2009-7-1-21_21_45_2.jpg


至此一个五子棋的雏形完成，还可以进行其他功能完善。例如，将棋子摆放整齐、判定输赢等等，大家可以举一反三。（文/Gnie）

本例参考自Apress《Pro Silverlight 2 in C# 2008》CHAPTER 4 ■ DEPENDENCY PROPERTIES AND ROUTED EVENTS

下一篇：Silverlight2 边学边练 之二 图形变换
TOP
返回列表