react五子棋

首先创建一个20*20棋盘 Array(20).fill(null) 根据数组渲染棋盘。

    this.state=({
       listTable: Array(20).fill(null)
    })
    render() {
        return (
          <div>
            {
              this.state.listTable.map((step,move) => {
                return (
                  <div className='board-row' key={move}>
                    {this.state.listTable.map((item,index) => {
                      return this.renderSquares(move*this.state.listTable.length+index)
                    })}
                  </div>
                )
              })
            }
          </div>
        )
      }

显示棋子和记录每一步

    class Game extends React.Component {
      constructor(props) {
        super(props)
        this.state=({
          history: [{
            squares: Array(20*20).fill(null)
          }],
          xIsNext: true,
          stepNumber: 0,
          number: 0,
          winner: false
        })
      }
      handleClick(i) {
        const history=this.state.history.slice(0,this.state.stepNumber+1)
        const current=history[history.length-1]
        const squares=current.squares.slice()
        if(this.state.winner||squares[i]) {
          return
        }
        squares[i]=this.state.xIsNext? 'X':'O'
        let winner=calculateWinner(squares,this.state.xIsNext,i)
        this.setState({
          history: history.concat([{
            squares: squares,
            winner: winner
          }]),
          xIsNext: !this.state.xIsNext,
          stepNumber: history.length,
          number: i,
          winner: winner
        })

      }
      jumpTo(move,winner) {
        this.setState({
          stepNumber: move,
          xIsNext: (move%2)===0,
          winner: winner
        })
      }
      render() {
        const history=this.state.history
        const current=history[this.state.stepNumber]
        const moves=history.map((step,move) => {
          const desc=move? 'Go to move #'+move:'Go to game stats'
          return (<li key={move} onClick={() => this.jumpTo(move,step.winner)}><button>{desc}</button></li>)
        })
        let status
        if(this.state.winner) {
          status='Winner:'+this.state.winner
        } else {
          status='Next play '+(this.state.xIsNext? 'X':'O')
        }

        return (
          <div className='game'>
            <div className='game-board'>
              <Board squares={current.squares} onClick={(i) => this.handleClick(i)} />
            </div>
            <div className='game-info'>
              <div>{status}</div>
              <ol>{moves}</ol>
            </div>
          </div>
        )
      }
    }

判断胜利

      let lines=[

      ]
      let len=squares.length;
      let arr=squares.slice()
      for(let i=0,j=0;i<len;i+=20,j++) {
        lines[j]=arr.splice(0,20);
      }
      let status=xIsNext? 'X':'O'
      let index=parseInt(i/20) // 横坐标
      let indexs=i-parseInt(i/20)*20 // 纵坐标

      //列计数
      let columnCount=0;
      // 向上下棋
      for(let i=index+1;i<20;i++) {
        if(lines[i][indexs]==status) {
          columnCount++;
        } else {
          break;
        }
      }
      // 向下下棋
      for(let i=index-1;i>=0;i--) {
        if(lines[i][indexs]==status) {
          columnCount++;
        } else {
          break;
        }
      }
      if(columnCount>=4) {
        return status;
      }
      //行计数
      let lineCount=0;
      // 向左下棋
      for(let i=indexs+1;i<20;i++) {
        if(lines[index][i]==status) {
          console.log(2)
          lineCount++;
        } else {
          break;
        }
      }
      // 向右下棋
      for(let i=indexs-1;i>=0;i--) {
        if(lines[index][i]==status) {
          console.log(1)
          lineCount++;
        } else {
          break;
        }
      }
      if(lineCount>=4) {
        return status;
      }
      //斜行计数-左斜
      let obliqueLeftCount=0;
      // 向左上下棋↖
      for(let i=index+1,j=indexs+1;i<20&&j<20;i++,j++) {
        if(lines[i][j]==status) {
          obliqueLeftCount++;
        } else {
          break;
        }
      }
      // 向左下下棋↘
      for(let i=index-1,j=indexs-1;i>=0&&j>=0;i--,j--) {
        if(lines[j][i]==status) {
          obliqueLeftCount++;
        } else {
          break;
        }
      }
      if(obliqueLeftCount>=4) {
        return status;
      }
      //斜行计数-右斜/
      let obliqueRightCount=0;
      // 向右上下棋↗
      for(let i=index-1,j=indexs+1;i>=0&&j<20;i--,j++) {
        if(lines[i][j]==status) {
          obliqueRightCount++;
        } else {
          break;
        }
      }
      // 向左右下下棋↙
      for(let i=index+1,j=indexs-1;i<20&&j>=0;i++,j--) {
        if(lines[i][j]==status) {
          obliqueRightCount++;
        } else {
          break;
        }
      }
      if(obliqueRightCount>=4) {
        return status;
      }
      return null
    }

方格

      return (
        <button className='square' onClick={props.onClick}>{props.value}</button>
      )
    }

整体代码