Silverlight+WCF 新手实例象棋主界面-棋谱-回放(三十九)

在线演示地址：Silverlight+WCF 新手实例象棋在线演示

本节完后，同时会更新Silverlight+WCF 新手实例象棋专题索引，并顺路提供第八阶段源码

在Silverlight+WCF 新手实例象棋主界面-棋谱-布局写谱(三十六)节中，我们完成了下棋双方的棋谱传递

在Silverlight+WCF 新手实例象棋主界面-棋谱-获取列表(三十八)节中，我们完成了观棋者获取棋谱列表

在本节中，我们要进行最一步了，棋谱回放：

首先，当用户进入列表后，获取完棋谱信息之后，第一个动作，就是要把棋谱按顺序播放一下，这样，用户看到棋局就是双方正在下的棋局了，之后，就跟下棋一样，一步步接收棋步，然后一步步的自动移动就行了。

我们播放哪里的棋谱呢的？

界面上显示的ListBox显然是不能用来循环读取的，毕竟那显示的是格式化后的字符串，从字符串解析回棋步是不现实的；

一开始获取的列表不是可以循环？那也只有一部分，之后棋手双方下的呢？

所以，说了这么多，其实不就是想找多个变量来存棋谱列表么，于是，我们在App.xaml.cs全局又添加一个全局变量了:

public partial class App : Application
    {
     //...省略N行代码...
        public static List<GameService.MoveStep> stepList = new List<GameService.MoveStep>();//棋谱
        public static bool chessManualPlaying = false;//棋谱正回放中
        //...省略N行代码...
        public App()
        {
         //...省略N行代码...
        }
        //...省略N行代码...

}

这里又顺路添加了一个全局属性，用于设置棋谱是不是正在回放中，后面我们会用到[很后哦]。

OK，全局棋谱存贮变量有了，我们就得为它增加棋谱数据了，我们会在两个地方添加棋谱，

1：一个是用户下棋时传递时的棋谱：

我们进入Chess.xaml.cs，找到收到棋谱通知的代码，只需要添加一行，第一行，把棋步添加一下就行了：

void client_NotifyMoveStepReceived(object sender, NotifyMoveStepReceivedEventArgs e)
        {
            App.stepList.Add(e.player.Step);//只需要一行
            if (App.player.ID != e.player.ID)//非自己
            {
               //...省略N行...
            }
            HelpSetChessManualEvent(e.player.Step);
        }

2：进入页面时获取的棋谱列表读取到棋谱区时：

我们进入ChessManual.xaml.cs，找到获取棋谱列表的代码，同样只需要一行：

void client_GetMoveStepListCompleted(object sender, GameService.GetMoveStepListCompletedEventArgs e)
        {
            //获取完棋谱后，这里循环调用添加就可以了
            if (e.Result != null && e.Result.Count > 0)
            {
                App.stepList = e.Result;//这里只需要一行代码
                foreach (GameService.MoveStep step in e.Result)
                {
                    lbChessManual.Items.Add(step.ID + ":" + step.Name);
                }
            }
        }

OK,我们对全局棋谱的传值，两行代码就搞定了，于是在播放棋谱时，理论上我们循环全局的stepList就行了：

我们先产生一个方法，用于播放一个棋步，就是传进一个棋步，然后自动播放：

void AutoMove(GameService.MoveStep step)
        {
            Point from = new Point(step.FromX, step.FromY);
            Point to = new Point(step.ToX, step.ToY);
            if (App.player.ColorValue + step.ColorValue == 3 || (step.ColorValue == 2 && App.player.ColorValue == 3))//旁观者黑色棋子
            {
                from = App.chess.ReverseArray(from);
                to = App.chess.ReverseArray(to);
            }
            App.chess.Action.AutoMoveTo(from, to);
        }

这个方法其实有点简单，只要调用AotoMoveTo就搞完了，唯一的复杂点，就是判断要不要反转坐标了。

[两种情况：如果是下棋者，棋步是对手的，要反转坐标；观众默认是红色的，收到黑色棋步，也要反转坐标]

好了，有了单步的方法，我们for一下step里，然后循环传值就OK了？No,如果这样循环，棋步刷的一下就没了，还看啥回放？

因此，我们需要定间隔播放了，所以，我们需要先产生间隔的秒数，我们通过滑动块来设置文本框的数字：

我们设置一下滑动块的属性[默认值为0,最大值为9，最小滑动为0.5,最大滑动为1]:

我们同时添加滑动事件：

而我们滑动时只需要一行代码，为文本框赋值就行了:

private void slPlayerInternal_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            txtValue.Text = e.NewValue.ToString();
        }

我们增加一个方法，叫PlayStep,用于循环播放棋步：

private void PlayStep()
{
//待实现
}

好了，接着我们双击一下“回放”按钮，里面调用一下这个PlayStep就行了：

private void btnPlay_Click(object sender, RoutedEventArgs e)
{
PlayStep();
}

默认我们加载完棋步列表后，也要定位棋步，所以也调用一下PlayStep:

于是，所有的重点只剩下怎么实现这个PlayStep了。

我们每一步棋步都需要间隔N秒走一步，一开始我竟然用线程的Sleep来操作，结果是，程序卡住了，直接播放完了才能动，那个汗-_-!

于是，N久之后，非线程阻塞的timer出来了，让它定时每N秒走一步就行了：

全局定义一下timer先,顺路加上移动的索引：

public partial class ChessManual : UserControl
    {
        System.Windows.Threading.DispatcherTimer timer;//定义timer
        int moveStepIndex = 0;//移动到第几步了

         //...下面省略N行...
}

接着初始化timer及事件：

public partial class ChessManual : UserControl
    {
        System.Windows.Threading.DispatcherTimer timer;//定义timer
        int moveStepIndex = 0;//移动到第几步了
        public ChessManual()
        {
            //...省略N行...
            timer = new System.Windows.Threading.DispatcherTimer();
            timer.Tick += new EventHandler(timer_Tick);
        }

        void timer_Tick(object sender, EventArgs e)
        {
            //待实现
        }

            //...省略N行...
     }

我们这里没有初始化timer的间隔时间，是因为把间隔时间设置放到PlayStep函数里了，说到PlayStep，我们可以实现它了：

private void PlayStep()
        {
            if (App.stepList.Count > 0)
            {
                //播放前复位棋子
                  App.chess.Reset();
                timer.Interval = TimeSpan.FromSeconds(slPlayerInternal.Value);
                timer.Start();
            }
        }

我们只用了小小几行代码，其实就是设置一下时间，然后让timer它Start起来就完事了，于是重心又一步转移到timer的tick事件里了：

void timer_Tick(object sender, EventArgs e)
        {
            //待实现
            GameService.MoveStep step = App.stepList[moveStepIndex];//获取棋步
            lbChessManual.SelectedIndex = moveStepIndex;//定位棋步索引
            lbChessManual.UpdateLayout();//需要更新下布局
            lbChessManual.ScrollIntoView(lbChessManual.SelectedItem);//滚动到先中的项
            AutoMove(step);//移动棋步
            moveStepIndex++;//索引加1
            if (moveStepIndex == App.stepList.Count)//判断棋步结束没有
            {
                moveStepIndex = 0;//重置索引
                timer.Stop();//停止timer
            }
        }

这里每一步都有注释，相信不会看不懂的了。OK，至此，我们是可以F5看效果了：

1：目前正在下棋，下到一半中：