React官方教程的课后作业的实现 tic-tac-toe(三连棋)游戏

React教程第一章作业练习

第一章结尾，我们跟随react教程完成了一个三连棋的游戏

它包含如下的功能

tic-tac-toe(三连棋)游戏的所有功能
能够判定玩家何时获胜
能够记录游戏进程
允许玩家查看游戏的历史记录，也可以查看任意一个历史版本的游戏棋盘状态

原教程中的最终代码与效果

同时提出了

如果你还有充裕的时间，或者想练习一下刚刚学会的 React 新技能，这里有一些可以改进游戏的想法供你参考，这些功能的实现顺序的难度是递增的：

1. 在游戏历史记录列表显示每一步棋的坐标，格式为 (列号, 行号)。
2. 在历史记录列表中加粗显示当前选择的项目。
3. 使用两个循环来渲染出棋盘的格子，而不是在代码里写死（hardcode）。
4. 添加一个可以升序或降序显示历史记录的按钮。
5. 每当有人获胜时，高亮显示连成一线的 3 颗棋子。
6. 当无人获胜时，显示一个平局的消息。

于是按照上述6个需求，“改进”了这个小游戏，代码直接写完没有优化，为了方便查阅，在上传到本站前添加了注释，以后深入了解react之后再优化吧（如果有）

下面贴出代码

JS部分

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'

function Square(props) {
  //具体的框框，由一个win属性的值决定是否能连成一线，值类似[0,1,2]，表示每个点的索引
    return (
      <button 
        className={'square ' + (props.win ? ' win' : ' ')} 
        onClick={props.onClick}
      >
        {props.value}
      </button>
    );
}

class Board extends React.Component {
  
  renderSquare(i, row, col) {
    //判断这个框框是否满足胜出条件,下面的<Square />可以简化为function Square内的组件
    let isWin = this.props.win.indexOf(i) != -1 ? true : false;
    return (
    <Square
      key={i}
      value={this.props.squares[i]}
      win={isWin}
      onClick={()=>this.props.onClick(i, row, col)}
     />
    )
  }
//渲染行
  renderRow(){
    const rows = [];
    //字母用于在右侧显示的某一步的坐标，值可能类似A1,B2...
    const letters = ['A','B','C'];
    for(let rowIndex = 0; rowIndex < 3; rowIndex++){
      rows.push(
        <div className="board-row" key={rowIndex}>
          {this.renderCol(letters[rowIndex], rowIndex)}
        </div>
      )
    }
    return rows;
  }
//渲染列
  renderCol(rowName, rowIndex){
    const cols = [];
    for(let colIndex = 0; colIndex < 3; colIndex++){
        cols.push(
          this.renderSquare((rowIndex*3 + colIndex), rowName, colIndex+1)
        )
    }
    return cols;
  }

  render() {
    return this.renderRow();
  }
}

class Game extends React.Component {
  constructor(props){
    super(props);
    //moves为右侧的历史步骤的集合，在构造函数中默认定义第一步
    const moves = [
      (
        <li key={0}>
          1 <button>Go to game start</button>
        </li>
      )
    ];
    this.state = {
      //历史步骤具体情况的集合
      history : [{
        //步骤中每个点的情况
        squares : Array(9).fill(null),
        //该步骤操作的具体坐标
        detail : [],
        //该步骤由X或O操作
        which : '',
        //逻辑上的步骤的索引
        index : 0
      }],
      //胜出的框框的索引，三个可以连成一线
      winCell : [null,null,null],
      //是否历史步骤翻转排序
      isReverse : false,
      //当前选择的历史步骤的索引
      stepNumber : 0,
      //当前选择的历史步骤的逻辑意义的索引（逻辑上的先后）
      stepIndex : 0,
      //同上 const moves
      moves : moves,
      //X是否是下一步
      xIsNext : true
    }
  }
  //点击单元格，传入i=单元格索引，row=行索引，col=列索引
  handleClick(i, row, col){
    //是否翻转
    if(this.state.isReverse){
      //取当前历史步骤的索引起 至 结尾 的步骤集合
      var history = this.state.history.slice(this.state.stepNumber, this.state.history.length);
      //当前操作的步骤为集合的第一个，即最上面一个
      const current = history[0];
      //复制一个点位到变量squares
      const squares = current.squares.slice();
      //判断是否胜出
      const res = calculateWinner(squares);
      if (res || squares[i]) {
        return;
      }
      //下一步的历史步骤的逻辑索引
      const stepnm = current.index+1;
      //在历史步骤集合最前方插入这次操作的数据
      squares[i] = this.state.xIsNext ? 'X' : 'O';

      history.unshift({
        squares: squares,
        detail : [row, col],
        which : squares[i],
        index : stepnm
      });
      this.setState({
        history: history,
        stepNumber : 0,
        stepIndex : stepnm,
        xIsNext: !this.state.xIsNext,
      });
      //触发更新渲染历史步骤
      this.getHistoryList(history, stepnm)
    }else{
      //如果是正常的升序
      //取历史步骤集合的第0个到，当前步骤索引+1
      var history = this.state.history.slice(0, this.state.stepNumber+1);
      //取最后一个步骤为当前步骤，即最后一个
      const current = history[history.length - 1];
      //复制点位
      const squares = current.squares.slice();
      //计算是否有一方胜出
      if (calculateWinner(squares) || squares[i]) {
        return;
      }
      //下一步的历史步骤的索引
      const stepnm = current.index+1;
      //将本次操作添加到历史步骤的队尾
      squares[i] = this.state.xIsNext ? 'X' : 'O';
      const his = history.concat([{
        squares: squares,
        detail : [row, col],
        which : squares[i],
        index : stepnm
      }]);
      
      this.setState({
        history: his,
        stepNumber : stepnm,
        stepIndex : stepnm,
        xIsNext: !this.state.xIsNext,
      });
      //触发更新渲染历史步骤
      this.getHistoryList(his, stepnm)
    }
  }
//点击某一个历史步骤,stepIndex=当前点击的历史步骤集合的索引，newHistory=新集合的列表
  jumpTo(stepIndex, newHistory){
    //声明一个历史步骤集合的逻辑索引
    var newStepIndex = 0;
    newHistory.map((v,k)=>{
      if(k == stepIndex){
        newStepIndex = v.index;
      }
    })
    
    this.setState({
      stepNumber : newStepIndex,
      stepIndex : stepIndex,
      xIsNext : (stepIndex % 2) === 0,
    })
    //触发更新渲染历史步骤
    this.getHistoryList(newHistory, stepIndex)
  }
//点击排序
  changeSort(){
    //复制一个历史步骤集合
    var history = this.state.history.slice()
    //上一步的逻辑索引
    var oldIndex = history[this.state.stepNumber].index
    //翻转历史记录
    const his = history.reverse()
    //获取新的stepNumber（历史步骤列表的当前的索引）
    //而stepIndex则不用改变
    var newIndex = null;
    for(var i = 0; i < his.length; i++){
      if(his[i].index == oldIndex){
        newIndex = i;
      }
    }
    this.setState({
      history : his,
      stepNumber : newIndex,
      isReverse : !this.state.isReverse
    })
    //触发更新渲染历史步骤
    this.getHistoryList(his, this.state.stepIndex)
  }
//触发更新渲染历史步骤,据目前所知如果要同步获得setState之后state的值，需要使用回调，暂时使用传参来保证数据一致。。。
//newHistory=历史步骤集合,stepind=当前步骤的逻辑索引
  getHistoryList(newHistory, stepind){
    //重新构造moves，即右侧的历史记录列表
    const moves = [];
    newHistory.map((step, move)=>{
      //列表的名称
      const desc = step.index ? 
        'Go to move #' + step.index :
        'Go to game start';
      //是否是当前列表
      const active = step.index === stepind ? ' active ' : ' ';
      //此步骤是X还是O
      const which = step.which ? step.which+' : ' : '';
      //step.detail是此步骤的具体坐标
      moves.push(
        <li key={step.index} className={active}>
          {step.index+1} <button onClick={()=>{this.jumpTo(step.index, newHistory)}}>{desc}</button> <span>{which}{step.detail.join(',')}</span>
        </li>
      )
    })

    this.setState({
      moves : moves
    })
  }
//组件的渲染方法
  render() {

    const history = this.state.history;
    //取当前的步骤
    const current = history[this.state.stepNumber];
    //判断是否胜出
    const winner = calculateWinner(current.squares);
    const moves = this.state.moves;
    //连成一线的单元格索引的集合
    var win = this.state.winCell;
    let status;
    if (winner) {
      win = winner.win;
      status = 'Winner: ' + winner.name;
    } else {
      //判断是否步数走完了都没有人胜出
      if(this.state.stepIndex == 9){
        status = 'Nobody wins';
      }else{
        status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
      }
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board 
            win={win}
            squares={current.squares}
            onClick={(i, row, col)=>this.handleClick(i, row, col)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <div><button onClick={()=>{this.changeSort()}}>排序</button></div>
          <ul>{moves}</ul>
        </div>
      </div>
    );
  }
}
//官方给的判断胜出的方法，稍作修改
function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i]; 
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      //能连成一线的点的索引的集合
      var win = lines[i];
      return {name :squares[a], win : win};
    }
  }
  return null;
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

CSS部分

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
   34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

.active{ font-weight: bold;}
.win{ color: red;}

完