ReversiEight - Windows 8 Reversi 游戏

ReversiView 定义了如下一些模板。

<ControlTemplate x:Key="BlackScoreTemplate">
  <Viewbox>
    <Grid Width="150" Height="150">
      <Image Source="Assets/BlackPiece.png" Stretch="Uniform"/>
      <TextBlock Text="{Binding BlackScore}" VerticalAlignment="Center" HorizontalAlignment="Center"
                  FontSize="50"/>
    </Grid>
  </Viewbox>
</ControlTemplate>
    
<ControlTemplate x:Key="RestartGameTemplate">
  <Button Visibility="{Binding Path=GameOver, Converter={StaticResource BoolToVisibilityConverter}}"
          Command="{Binding Path=RestartGame}"
          Template="{StaticResource PlainButtonTemplate}">
    <Image Source="Assets/GameOver.png"
            Stretch="Uniform" Margin="40"
            VerticalAlignment="Top"/>
  </Button>
</ControlTemplate>
    
<ControlTemplate x:Key="ReversiTitleTemplate">
  <Image Source="Assets/ReversiText.png"
          Stretch="Uniform"
          Margin="0,80,0,0"/>
</ControlTemplate>
    
<ControlTemplate x:Key="WhiteScoreTemplate">
  <Viewbox>
    <Grid Width="150" Height="150">
      <Image Source="Assets/WhitePiece.png" Stretch="Uniform"/>
      <TextBlock Text="{Binding WhiteScore}" VerticalAlignment="Center" HorizontalAlignment="Center"
                  FontSize="50" Foreground="Black"/>
    </Grid>
  </Viewbox>
</ControlTemplate>

<ControlTemplate x:Key="ReversiBoardTemplate">
  <Viewbox>
    <Grid Margin="20">
      <Image Source="Assets/Board.png" Stretch="UniformToFill"/>
      <ItemsControl ItemsSource="{Binding Squares}">
        <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
            <Grid Width="1200" Height="1200" x:Name="boardContainer"
                    common:GridUtils.RowDefinitions="*,*,*,*,*,*,*,*"
                    common:GridUtils.ColumnDefinitions="*,*,*,*,*,*,*,*">
            </Grid>
          </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
          <DataTemplate>
            <local:BoardSquareView Grid.Row="{Binding Row}" Grid.Column="{Binding Column}"
                                      Width="150" Height="150"/>
          </DataTemplate>
        </ItemsControl.ItemTemplate>
      </ItemsControl>
    </Grid>
  </Viewbox>
</ControlTemplate> 

如上代码所示，应用程序有三种不同的布局，VisualStateManager 根据当前的应用程序视图状态显示/隐藏每个布局。ContentControls 的使用确保了视图组件的完全重用，它还允许您清晰地看到各种布局。

使用 Visual Studio，您可以通过设备面板测试各种状态。这是游戏在横向模式下的样子。

这是游戏在纵向模式下的样子，您可以看到应用了不同的布局。

同样建议针对所有不同的显示分辨率测试您的应用程序，这也可以通过设备面板上的“显示”属性来实现。

棋盘上的每个方格都使用 BoardSqureView 进行渲染。您可能已经注意到在 ReversiBoardTemplate 的 Squares 属性上使用了绑定到视图模型的 ItemsControl 。这确保为棋盘上的 64 个方格中的每一个都构造一个 BoardSquareView 。BoardSquareView 根据其绑定的方格状态显示/隐藏黑色或白色棋子。

ItemsControl 创建一个 ContentPresenter 来承载每个 BoardSquareView 实例。正是这些 ContentPresenter 实例被添加到被指定为 ItemsPanel 的 Grid 中。为了在 Grid 中正确排列每个方格，必须在每个 ContentPresenter 上正确设置 Grid.Row 和 Grid.Column 。在 WPF 中，可以通过指定带有附加 Grid 属性绑定的 ItemContainerStyle 来实现这一点。不幸的是，Windows 8 应用商店不支持此功能。

作为此问题的解决方法，BoardSquareView 通过代码设置所需的绑定。

public sealed partial class BoardSquareView : UserControl
{
  public BoardSquareView()
  {
    this.InitializeComponent();

    this.LayoutUpdated += BoardSquareView_LayoutUpdated;
  }

  void BoardSquareView_LayoutUpdated(object sender, object e)
  {
    var container = VisualTreeHelper.GetParent(this) as FrameworkElement;

    container.SetBinding(Grid.RowProperty, new Binding()
    {
      Source = this.DataContext,
      Path = new PropertyPath("Row")
    });

    container.SetBinding(Grid.ColumnProperty, new Binding()
    {
      Source = this.DataContext,
      Path = new PropertyPath("Column")
    });
  }
}

这基本上涵盖了与视图相关的所有有趣点，现在是时候更仔细地研究游戏逻辑了……

翻转棋游戏逻辑

GameBoardViewModel 跟踪每个玩家的分数、谁有下一个回合以及游戏是否结束——这些都是相当简单的任务。这个视图模型执行的更复杂的任务与强制执行翻转棋游戏的逻辑有关。

当玩家点击棋盘时，这会被 BoardSquareView 渲染的 Button 捕获。此按钮绑定到 GameBoardSquareViewModel 公开的命令，该命令随后通知 GameBoardViewModel 玩家试图进行移动。所有这些都相当直接。

当玩家点击一个单元格时，会发生以下一系列事件：

1. 检查移动是否有效（如果无效……则中止！）。
2. 设置被点击单元格的状态。
3. 翻转被包围的对手的棋子。
4. 交换回合。
5. 检查对手是否可以进行回合——如果不能，则换回。
6. 检查游戏是否结束。
7. 更新分数

这一切都发生在 GameBoardViewModel 公开的以下方法中。

/// <summary>
/// Makes the given move for the current player. Score are updated and play then moves
/// to the next player.
/// </summary>
public void MakeMove(int row, int col)
{
  // is this a valid move?
  if (!IsValidMove(row, col, NextMove))
    return;

  // set the square to its new state
  GetSquare(row, col).State = NextMove;

  // flip the opponents counters
  FlipOpponentsCounters(row, col, NextMove);
      
  // swap moves
  NextMove = InvertState(NextMove);

  // if this player cannot make a move, swap back again
  if (!CanPlayerMakeAMove(NextMove))
  {
    NextMove = InvertState(NextMove);
  }

  // check whether the game has finished
  GameOver = HasGameFinished();

  // update the scores
  BlackScore = _squares.Count(s => s.State == BoardSquareState.BLACK);
  WhiteScore = _squares.Count(s => s.State == BoardSquareState.WHITE);
} 

我们将在 IsValidMove 中更详细地了解视图模型如何确定移动是否有效。

在翻转棋游戏中，如果一个移动可以包围对手的一个或多个棋子（水平或对角线），则该移动有效。这意味着视图模型必须搜索 8 个不同的方向来寻找被包围的棋子。我没有写 8 次相同的逻辑，而是决定将确定棋子是否被包围的逻辑与每个方向的棋盘导航逻辑解耦。

首先，我定义了一个委托，用于更新传递给它的行和列。视图模型创建此委托的 8 个实例，每个实例代表棋盘可以导航的 8 个方向。

delegate void NavigationFunction(ref int row, ref int col);

private static List<NavigationFunction> _navigationFunctions = new List<NavigationFunction>();

static GameBoardViewModel()
{
  _navigationFunctions.Add(delegate(ref int row, ref int col) { row++; });
  _navigationFunctions.Add(delegate(ref int row, ref int col) { row--; });
  _navigationFunctions.Add(delegate(ref int row, ref int col) { row++; col--; });
  _navigationFunctions.Add(delegate(ref int row, ref int col) { row++; col++; });
  _navigationFunctions.Add(delegate(ref int row, ref int col) { row--; col--; });
  _navigationFunctions.Add(delegate(ref int row, ref int col) { row--; col++; });
  _navigationFunctions.Add(delegate(ref int row, ref int col) { col++; });
  _navigationFunctions.Add(delegate(ref int row, ref int col) { col--; });
}

视图模型使用这些导航函数来提供从特定起点在特定方向导航时遇到的方格列表。

/// <summary>
/// A list of board squares that are yielded via the given navigation function.
/// </summary>
private IEnumerable<GameBoardSquareViewModel> NavigateBoard(NavigationFunction navigationFunction,
                                                            int row, int column)
{
  navigationFunction(ref column, ref row);
  while (column >= 0 && column <= 7 && row >= 0 && row <= 7)
  {
    yield return GetSquare(row, column);
    navigationFunction(ref column, ref row);
  }
} 

这巧妙地封装了在特定方向导航棋盘的逻辑以及检查棋盘边界的需求。

IsValidMove 使用导航函数集合来确定移动是否有效，正如您从 Any Linq 方法的使用中可以看到的那样。

/// <summary>
/// Determines whether the given move is valid
/// </summary>
public bool IsValidMove(int row, int col, BoardSquareState state)
{
  // check the cell is empty
  if (GetSquare(row, col).State != BoardSquareState.EMPTY)
    return false;

  // if counters are surrounded in any direction, the move is valid
  return _navigationFunctions.Any(navFunction => MoveSurroundsCounters(row, col, navFunction, state));
}

Any 查询使用 MoveSurroundsCounter 方法，该方法提供了逻辑的“核心”。

/// <summary>
/// Determines whether the given move 'surrounds' any of the opponents pieces.
/// </summary>
private bool MoveSurroundsCounters(int row, int column,
  NavigationFunction navigationFunction, BoardSquareState state)
{
  int index = 1;

  var squares = NavigateBoard(navigationFunction, row, column);
  foreach(var square in squares)
  {
    BoardSquareState currentCellState = square.State;

    // the cell that is the immediate neighbour must be of the other colour
    if (index == 1)
    {
      if (currentCellState != InvertState(state))
      {
        return false;
      }
    }
    else
    {
      // if we have reached a cell of the same colour, this is a valid move
      if (currentCellState == state)
      {
        return true;
      }

      // if we have reached an empty cell - fail
      if (currentCellState == BoardSquareState.EMPTY)
      {
        return false;
      }
    }

    index++;
  }

  return false;
} 

在上面的代码中，您可以看到它使用 NavigateBoard 函数来遍历由导航函数决定的方向上的方格。

如果移动有效，则将翻转在 8 个方向上被包围的棋子。同样，这利用了导航函数。

/// <summary>
/// Flips all the opponents pieces that are surrounded by the given move.
/// </summary>
private void FlipOpponentsCounters(int row, int column, BoardSquareState state)
{
  foreach (var navigationFunction in _navigationFunctions)
  {
    // are any pieces surrounded in this direction?
    if (!MoveSurroundsCounters(row, column, navigationFunction, state))
      continue;

    BoardSquareState opponentsState = InvertState(state);

    var squares = NavigateBoard(navigationFunction, row, column);
    foreach (var square in squares)
    {
      if (square.State == state)
        break;

      square.State = state;
    }
  }
}

private bool HasGameFinished()
{
    return  !CanPlayerMakeAMove(BoardSquareState.BLACK) &&
            !CanPlayerMakeAMove(BoardSquareState.WHITE);
}

/// <summary>
/// Determines whether there are any valid moves that the given player can make.
/// </summary>
private bool CanPlayerMakeAMove(BoardSquareState state)
{
    // test all the board locations to see if a move can be made
    for (int row = 0; row < 8; row++)
    {
        for (int col = 0; col < 8; col++)
        {
            if (IsValidMove(row, col, state))
            {
                return true;
            }
        }
    }
    return false;
} 

这完成了游戏逻辑！

电脑玩家 – Minimax 算法

“我恐怕，有时你也会玩孤独的游戏。你赢不了的游戏，因为你会与自己对弈。” ― 苏斯博士, 《哦，你想去的地方！》

如果您没有对手，请不要绝望，我们将为您创建一个电脑对手来让您打发时间！

代表电脑对手的类被初始化为游戏视图模型，它观察游戏视图模型以确定何时是电脑的回合。

public class ComputerOpponent
{
  private int _maxDepth;

  private GameBoardViewModel _viewModel;

  private BoardSquareState _computerColor;

  public ComputerOpponent(GameBoardViewModel viewModel, BoardSquareState computerColor, int maxDepth)
  {
    _maxDepth = maxDepth;
    _computerColor = computerColor;
    _viewModel = viewModel;
    _viewModel.PropertyChanged += GameBoardViewModel_PropertyChanged;

    MakeMoveIfCorrectTurn();
  }

  private void GameBoardViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
  {
    if (e.PropertyName == "NextMove")
    {
      MakeMoveIfCorrectTurn();
    }
  }
  ...
}

电脑采取了一种粗暴的方法来决定下一步棋。它分析每一个潜在的下一步棋，然后给它们打分，选择最好的一个。

private void MakeNextMove()
{
  Move bestMove = new Move()
  {
    Column = -1,
    Row = -1
  };
  int bestScore = int.MinValue;

  // check every valid move for this particular board, then select the one with the best 'score'
  List<Move> moves = ValidMovesForBoard(_viewModel);
  foreach (Move nextMove in moves)
  {
    // clone the current board and make this move
    GameBoardViewModel testBoard = new GameBoardViewModel(_viewModel);
    testBoard.MakeMove(nextMove.Row, nextMove.Column);

    // determine the score for this move
    int scoreForMove = ScoreForBoard(testBoard, 1);

    // pick the best
    if (scoreForMove > bestScore || bestScore == int.MinValue)
    {
      bestScore = scoreForMove;
      bestMove.Row = nextMove.Row;
      bestMove.Column = nextMove.Column;
    }
  }

  if (bestMove.Column != -1 && bestMove.Row != -1)
  {
    _viewModel.MakeMove(bestMove.Row, bestMove.Column);
  }
}<span style="white-space: normal;">
</span>

// Computes the score for the given board
private int ScoreForBoard(GameBoardViewModel board, int depth)
{
  // if we have reached the maximum search depth, then just compute the score of the current
  // board state
  if (depth >= _maxDepth)
  {
    return _computerColor == BoardSquareState.WHITE ?
                              board.WhiteScore - board.BlackScore :
                              board.BlackScore - board.WhiteScore;
  }

  int minMax = int.MinValue;

  // check every valid next move for this particular board
  List<Move> moves = ValidMovesForBoard(board);
  foreach (Move nextMove in moves)
  {
    // clone the current board and make the move
    GameBoardViewModel testBoard = new GameBoardViewModel(board);
    testBoard.MakeMove(nextMove.Row, nextMove.Column);

    // compute the score for this board
    int score = ScoreForBoard(testBoard, depth + 1);

    // pick the best score
    if (depth % 2 == 0)
    {
      if (score > minMax || minMax == int.MinValue)
      {
        minMax = score;
      }
    }
    else
    {
      if (score < minMax || minMax == int.MinValue)
      {
        minMax = score;
      }
    }
  }

  return minMax;
}

var vm = new GameBoardViewModel();
var comp = new ComputerOpponent(vm, BoardSquareState.WHITE, 5);
DataContext = vm;