React 实现井字棋游戏 (tic-tac-toe) 教程 (4) <译自官方文档>

深藏阁楼爱情的钟 2022-06-06 09:22 149阅读 0赞

[React 实现井字棋游戏 (tic-tac-toe) 教程 (1) <译自官方文档>][React _ _tic-tac-toe_ _ _1_]  
[React 实现井字棋游戏 (tic-tac-toe) 教程 (2) <译自官方文档>][React _ _tic-tac-toe_ _ _2_]  
[React 实现井字棋游戏 (tic-tac-toe) 教程 (3) <译自官方文档>][React _ _tic-tac-toe_ _ _3_]

### 轮流下棋 ###

目前，游戏中一个明显的问题是，只有“X”一个人能玩。现在就解决这个问题。

我们默认，“X”执先手。在 Board 组件的构造函数中，修改初始状态：

**code**

class Board extends React.Component { 
      constructor() {
        super();
        this.state = {
          squares: Array(9).fill(null),
          xIsNext: true,
        };
      }

每走一步棋，我们都要切换`xIsNext`的布尔值，并把它保存到状态中。现在，我们更新 Board 组件的`handleClick`函数，以实现切换`xIsNext`的值。

**code**

handleClick(i) {
        const squares = this.state.squares.slice();
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
          squares: squares,
          xIsNext: !this.state.xIsNext,
        });
      }

现在，”X”和”O”就可以轮流下棋了。下一步，修改 Board 组件`render`方法中的”status”，用来显示下一步棋该谁下。

**code**

render() {
        const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    
        return (
          // 其他的不动

经过了这些改动，你的 Board 组件看起来成了这样子：

**code**

class Board extends React.Component { 
      constructor() {
        super();
        this.state = {
          squares: Array(9).fill(null),
          xIsNext: true,
        };
      }
    
      handleClick(i) {
        const squares = this.state.squares.slice();
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
          squares: squares,
          xIsNext: !this.state.xIsNext,
        });
      }
    
      renderSquare(i) {
        return (
          <Square
            value={
       this.state.squares[i]}
            onClick={() => this.handleClick(i)}
          />
        );
      }
    
      render() {
        const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    
        return (
          <div>
            <div className="status">{status}</div>
            <div className="board-row">
              {
       this.renderSquare(0)}
              {
       this.renderSquare(1)}
              {
       this.renderSquare(2)}
            </div>
            <div className="board-row">
              {
       this.renderSquare(3)}
              {
       this.renderSquare(4)}
              {
       this.renderSquare(5)}
            </div>
            <div className="board-row">
              {
       this.renderSquare(6)}
              {
       this.renderSquare(7)}
              {
       this.renderSquare(8)}
            </div>
          </div>
        );
      }
    }

[查看最新的代码][Link 1]

### 宣布获胜者 ###

现在，当有玩家胜出的时候，我们把这个结果显示出来。把这个辅助函数添加到文件的末尾：

**code**

调用 Board 组件的`render`函数，用来检查是否有人获胜，以及在有人胜出的时候，让状态文本显示“Winner: \[X/O\]”。

用下面这段代码替换掉 Board 组件`render`函数中的`status`声明:

**code**

render() {
        const winner = calculateWinner(this.state.squares);
        let status;
        if (winner) {
          status = 'Winner: ' + winner;
        } else {
          status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
        }
    
        return (
          // 其余代码不动

现在，你可以改写 Board 组件中的`handleClick`，来这样的功能：当已经有人获胜，或者小方格已经被点击过的情况下，提前 return，忽略重复点击。

**code**

handleClick(i) {
        const squares = this.state.squares.slice();
        if (calculateWinner(squares) || squares[i]) {
          return;
        }
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
          squares: squares,
          xIsNext: !this.state.xIsNext,
        });
      }

恭喜！现在你已经有了一个能玩的井字棋游戏了。对 React 的基本知识，你也已经有所了解。或许*你*才是真的赢家。

[查看最新的代码][Link 2]

[React _ _tic-tac-toe_ _ _1_]: http://blog.csdn.net/beijiyang999/article/details/78444850
[React _ _tic-tac-toe_ _ _2_]: http://blog.csdn.net/beijiyang999/article/details/78445968
[React _ _tic-tac-toe_ _ _3_]: http://blog.csdn.net/beijiyang999/article/details/78447685
[Link 1]: https://codepen.io/gaearon/pen/KmmrBy?editors=0010
[Link 2]: https://codepen.io/gaearon/pen/LyyXgK?editors=0010