使用React实现井字棋小游戏

使用React实现井字棋小游戏

• 按照React官方教程来实现一个井字棋小游戏并完善其他功能，这里主要讲怎么完善这些功能
  1. 在游戏历史记录列表显示每一步棋的坐标，格式为 (列号, 行号)。
  2. 在历史记录列表中加粗显示当前选择的项目。
  3. 使用两个循环来渲染出棋盘的格子，而不是在代码里写死（hardcode）。
  4. 添加一个可以升序或降序显示历史记录的按钮。
  5. 每当有人获胜时，高亮显示连成一线的 3 颗棋子。
  6. 当无人获胜时，显示一个平局的消息。
• 点击此处获取React官方井字棋小游戏源码———官方代码.
• 点击此处获取已完善的井字棋的源码———已完善代码.

1.添加坐标功能

1. 在state的history中添加coordinate

    this.state = {
   
        // square: Array(9).fill(null),
        xIsNext: true,
        history: [
            {
   
                square: Array(9).fill(null),
                coordinate: 0
            }
        ],
        stepNumber: 0,
        order: false
    }

2. 点击时根据index添加坐标信息

    handleClick(i) {
   
        let history = this.state.history.slice(0, this.state.stepNumber + 1);
        let current = history[history.length - 1]
        let square = current.square.slice();
        //如果存在获胜者或此棋格已有值，则返回
        if (calculateWinner(square) || square[i]) {
   
            return;
        }
        //根据xIsNext判断值为X或0
        square[i] = this.state.xIsNext ? "X" : "O";
        //计算此步的x坐标
        let x = Math.floor(i / 3) + 1
        //计算此步的y坐标
        let y = i % 3 + 1
        //生成坐标信息
        let coordinate = square[i] + '(' + x + ',' + y + ')'
        this.setState({
   
            history: history.concat([
                {
   
                    square: square,
                    coordinate: coordinate
                }
            ]),
            stepNumber: history.length,
            xIsNext: !this.state.xIsNext
        });
    }

3. 渲染时渲染坐标

    const moves = history.map((step, index) => {
   
        const desc = index ?
            'Go to move : ' + step.coordinate :
            'Go to game start';
        return (
            <li key={
   index}>
                <button onClick={
   () => this.jumpTo(index)} className=