React 三子棋小游戏

demo来源：react教程 - 三子棋游戏

目录结构

Quick start

npx create-react-app game

Let's do it

1. 删除 src/ 下所有文件

2. 在 src/ 下创建一个 index.js + index.css

3. 在 src/ 下创建一个 components 文件夹用来放需要用到的三个组件：Square Board Game Moves

4. 在 /src/components 下创建 Square.js 写第一个组件 Square
   Square.js

import React from 'react';
import '../index.css'

class Square extends React.Component {
    constructor () {
        super();
        this.state = {
            squares: 1
        }
    }

    handleClick () {
        this.setState({
            squares: 'x'
        })
    }

    render () {
        return (
            <div>
                <span className='square'
                    onClick={() => {this.handleClick()}}>{this.state.squares}</span>
            </div>
        )
    }
}

export default Square;

5. 将组件 Square 渲染到页面中
   index.js

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

import Square from './components/Square';

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

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

6. 在 /src/components 下创建 Board.js 写第二个组件 Board ，同时进行状态提升
   Board.js

import React from 'react';
import Square from './Square';
import '../index.css';

class Board extends React.Component {
    constructor () {
        super();
        this.state = {
            squares: [1,2,3,4,5,6,7,8,9]
        }
    }

    handleClick (i) {
        const squares = this.state.squares.slice();
        squares[i] = 'x';
        this.setState({
            squares: squares
        })
    }

    renderSquare (i) {
        return (
            <Square
                squares={this.state.squares[i]}
                onClick={() => this.handleClick(i)} />
        )
    }

    render () {
        return (
            <div>
                {this.state.squares.map((item, index) => {
                    if (index % 3 === 0) {
                        return (
                            <div key={index} className='board-row'>
                                {[0, 1, 2].map((item, i) => {
                                    return (
                                        <div key={index + i}>
                                            {this.renderSquare(index + i)}
                                        </div>
                                    )
                                })}
                            </div>
                        )
                    }
                })}
            </div>
        )
    }
}

export default Board;

7. 在 /src/components 下创建 Moves.js 写第三个组件 Moves 用来显示历史记录

import React from 'react';
import '../index.css';

class Moves extends React.Component {
    render () {
        const moves = this.props.moves;
        return (
            <div className={this.props.orderStatus === 'ase' ? 'ascending' : 'descending'}>
                {moves.map((item, index) => {
                    const desc = index ? '返回第' + index + '步' : '开始游戏'; 
                    return (
                        <p className={this.props.step === index ? 'light-show' : null}
                            key={index} 
                            onClick={() => this.props.onClick(index)}>{desc}</p>
                    )
                })} 
            </div>
        )
    }
}

export default Moves;

8. 在 /src/components 下创建 Game.js 写第四个组件 Game ，同时再次进行状态提升，实现以下功能：

   (1).进行胜利判断：有人胜出则显示胜利者并结束游戏，满足胜利条件的棋子高亮显示，无人胜出则显示游戏结束

   (2).实现显示历史记录并可以跳回历史记录操作，当前历史记录处高亮显示

   (3).实现历史记录正序或倒叙排列切换

import React from 'react';
import Board from './Board'
import Moves from './Moves'
import '../index.css'

class Game extends React.Component {
    constructor () {
        super();
        this.state = {
            history: [{
                square: Array(9).fill(null)
            }],
            stepNum: 0,
            isXTurn: true,
            orderStatus: 'ase'
        }
    }

    handleClick (i) {
        const history = this.state.history.slice(0, this.state.stepNum + 1);
        const current = history[history.length - 1];
        const squares = current.square.slice();

        if (whoIsWinner(squares) || squares[i]) {
            return;
        }

        squares[i] = this.state.isXTurn ? 'x' : 'o';
        this.setState({
            history: history.concat({
                square: squares
            }),
            stepNum: this.state.stepNum + 1,
            isXTurn: !this.state.isXTurn
        })
    }

    jumpTo (step) {
        this.setState({
            history: step === 0 ? [{square: Array(9).fill(null)}] : this.state.history,
            stepNum: step,
            isXTurn: step % 2 === 0
        })
    }

    orderChange () {
        this.setState({
            orderStatus: this.state.orderStatus === 'ase' ? 'desc' : 'ase'
        })
    }

    render () {
        const history = this.state.history;
        const current = history[this.state.stepNum];
        let status;
        const winner = whoIsWinner(current.square) ? whoIsWinner(current.square).winner : null;
        const winnerSquares = whoIsWinner(current.square) ? whoIsWinner(current.square).winnerSquares : [];
        const order = this.state.orderStatus === 'ase' ? '升序排列' : '降序排列';

        if (winner) {
            status = 'Winner is ' + winner;
        } else if (this.state.stepNum === 9) {
            status = 'Game is over';
        } else {
            status = this.state.isXTurn ? 'Next player is x' : 'Next player is o';
        }
        return (
            <div className='game'>
                <div className='game-board'>
                    <Board
                        winnerSquares={winnerSquares}
                        onClick={(i) => this.handleClick(i)}
                        squares={current.square} />
                </div>
                <div className='game-info'>
                    <p>{status}</p>
                    <button onClick={() => this.orderChange()}>
                        {order}
                    </button>
                    <ul>
                        <Moves
                            step={this.state.stepNum}
                            orderStatus={this.state.orderStatus}
                            moves={history}
                            onClick={(i) => this.jumpTo(i)} />
                    </ul>
                </div>
            </div>
        )
    }
}

function whoIsWinner (squares) {
    const winnerList = [
        [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 < winnerList.length; i++) {
        let [a, b, c] = winnerList[i];
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
            return {
                winner: squares[a],
                winnerSquares: winnerList[i]
            }
        }
    }
    return null;
}

export default Game;

完整代码见：https://github.com/direwolf512/react-demo/tree/feature/game