Silverlight+WCF 实战-网络象棋最终篇之十字轨迹(一)

前言

继之前Silverlight+WCF 新手实例 象棋系列四十篇之后，一个多月的时间都在写CYQ.Data框架系列[CYQ.Data 轻量数据层之路 框架开源系列 索引]，

让各位对该Silverlight+WCF 象棋系列有兴趣的网友久候了，上一系列详见：[Silverlight+WCF 新手实例 象棋 专题索引]

今天开始就在之前四十篇续上，直到把 [Silverlight+WCF 新手实例 象棋 在线演示] 上的最新代码写完，谢谢支持！

乱七杂八说两句：

正文：

我们先回顾下，截一张上一系列 最后一节[Silverlight+WCF 新手实例 象棋 主界面-棋谱-回放-结局(四十) ]里的一张图片先：

好！大伙知道十字轨迹是什么就好了，现在说说实现思路

就这么两步，很简单吧，该出手时就出手。

实现步骤如下：

一：棋盘Board类画十字轨迹

1：增加两个十字轨迹属性

   /// <summary>
    /// 棋盘 by 路过秋天
    /// http://cyq1162.cnblogs.com
    /// </summary>
    public class Board
    {
        /// <summary>
        /// 十字轨迹框
        /// </summary>
        public Canvas TrackFrom
        {
            get;
            set;
        }
        /// <summary>
        /// 十字轨迹框
        /// </summary>
        public Canvas TrackTo
        {
            get;
            set;
        }
        //下面省略N多代码
     }

2：增加一函数，用于画十字轨迹

        private void DrawTrack(Panel panel)
        {
            double width = panel.Width - 8;
            //横线4条
            DrawLine(0, 0, width / 4, 0, 3, panel, false);//L-
            DrawLine(0, width, width / 4, width, 3, panel, false);//LB-
            DrawLine(width * 3 / 4, 0, width, 0, 3, panel, false);//R-
            DrawLine(width * 3 / 4, width, width, width, 3, panel, false);//RB-


            //直线四条
            DrawLine(0, 0, 0, width / 4, 3, panel, false);//L| ok
            DrawLine(width, 0, width, width / 4, 3, panel, false);//R| ok
            DrawLine(0, width, 0, width * 3 / 4, 3, panel, false);//LB|
            DrawLine(width, width * 3 / 4, width, width, 3, panel, false);//RB|
        }

说明：

3：DrawLine方法小调整

        private void DrawLine(double x1, double y1, double x2, double y2)//保留原有方法原型，不用改其它画线代码
        {
            DrawLine(x1, y1, x2, y2, 1, container, true);
        }
        private void DrawLine(double x1, double y1, double x2, double y2, int thick, Panel panel, bool auto)
        {
            double tempGap = ((x1 + y1) > 19 || !auto) ? 1 : gap;//就这行加了一个!Auto，其它没变过
            Line line = new Line()
            {
                X1 = x1 * tempGap + marginLeft,
                Y1 = y1 * tempGap + marginTop,
                X2 = x2 * tempGap + marginLeft,
                Y2 = y2 * tempGap + marginTop,
                Stroke = new SolidColorBrush(Colors.Black),
                StrokeThickness = thick
            };
            panel.Children.Add(line);
        }

说明：

4：初始化画棋盘时，把十字轨迹也画上

        private void Draw()
        {
            //省略画棋盘线代码
      
            #region 画棋步轨迹
            //创建两个十字修饰框
            TrackFrom = new Canvas()
            {
                Width = gap,
                Height = gap,
                Margin = new Thickness(-marginLeft * 12, -marginLeft * 12, 0, 0)
            };
            TrackTo = new Canvas()
            {
                Width = gap,
                Height = gap,
                Margin = new Thickness(-marginLeft * 12, -marginLeft * 12, 0, 0)
            };
            DrawTrack(TrackFrom);
            DrawTrack(TrackTo);
            container.Children.Add(TrackFrom);
            container.Children.Add(TrackTo);
            #endregion
            #region 画楚河汉界
              DrawFont("路过秋天");
            #endregion
        }

二：Chess象棋类增加设置十字焦点方法

1：增加设置十字焦点方法

        /// <summary>
        /// 设置轨迹十字框
        /// </summary>
        public void SetFocus(Point from, Point to)
        {
            from = SwitchPixelArray(from);
            to = SwitchPixelArray(to);
            double offset = Board.TrackFrom.Width / 2 - Board.marginLeft * 11 - 4;//要减去默认初始位置，默认是*-12
            Canvas.SetLeft(Board.TrackFrom, from.X - offset);
            Canvas.SetTop(Board.TrackFrom, from.Y - offset);
            Canvas.SetLeft(Board.TrackTo, to.X - offset);
            Canvas.SetTop(Board.TrackTo, to.Y - offset);
        }

说明：

三：ChessAction棋子动作类

1：棋手移动时调用设置十字轨迹焦点函数

        /// <summary>
        /// 移动棋子
        /// </summary>
        /// <param name="chessman">棋子</param>
        /// <param name="toX">移动到X坐标</param>
        /// <param name="toY">移动到Y坐标</param>
        public bool MoveTo(Chessman chessman, Point moveTo)
        {
            if (Rule.IsCanMove(chessman, moveTo))
            {
                chessman.ReadyMove = false;
                chessman.chessman.Background = null;
                PlayMove(chessman, moveTo);
                Parent.SetFocus(chessman.MovePoint, moveTo);//就这一行代码增加
                HelpMoveStepEvent(chessman, moveTo);
                chessman.MovePoint = moveTo;
                
                return true;
            }
            return false;
        }

2：对方棋手下棋手，系统会自动移动棋子，也要自动设置十字轨迹焦点

       /// <summary>
        /// 系统自动移动棋子
        /// </summary>
        public void AutoMoveTo(Point from, Point to)
        {
            Chessman chessman = Parent.FindChessman(from);
            Chessman eatChessman = Parent.FindChessman(to);
            if (chessman != null)
            {
                PlayMove(chessman, to);
                Parent.SetFocus(from, to);//就这一行代码增加
                chessman.MovePoint = to;
                if (eatChessman != null)
                {
                    SetIsGameEnd(eatChessman);
                    eatChessman.GoToDead();
                }
            }
        }

四：F5看运行结果

1：运行后直接上图了

OK，大伙看到效果了吧！

版权声明：本文原创发表于博客园，作者为路过秋天，原文链接：

http://www.cnblogs.com/cyq1162/archive/2010/10/11/1847625.html