React实现五子棋：让古老智慧焕发新生

2024-02-10 01:35:43

React实现五子棋：一步步教学

五子棋，一个古老而智慧的策略游戏，如今在React的世界里焕发出新生。它不仅承载着悠久的文化，更成为前端游戏开发的经典范例。让我们一步步走进React实现五子棋的奇妙世界。

1. 组件挂载：构建游戏的基础

在React中，我们首先要创建一个名为FiveChess的组件，它将作为五子棋游戏的主体。在组件挂载函数componentDidMount中，我们将构建棋盘和游戏逻辑。

componentDidMount() {
  this.board = new Array(15).fill(0).map(() => new Array(15).fill(0));
  this.player = 1; // 玩家初始为1（黑棋）
  this.setState({
    board: this.board,
    player: this.player,
  });
}

2. 棋盘渲染：将五子棋具象化

接下来，我们需要将棋盘渲染到页面上。我们可以使用renderBoard()函数来完成这个任务。该函数将棋盘上的每个格子渲染为一个<div>元素，并根据格子的状态赋予不同的样式。

renderBoard() {
  return (
    <div className="chessboard">
      {this.board.map((row, i) => (
        <div key={i} className="row">
          {row.map((cell, j) => (
            <div
              key={j}
              className={`cell ${cell === 1 ? 'black' : cell === 2 ? 'white' : ''}`}
              onClick={() => this.handleClick(i, j)}
            />
          ))}
        </div>
      ))}
    </div>
  );
}

3. 落子操作：让棋子在棋盘上起舞

当玩家点击棋盘上的格子时，我们需要响应这个点击事件，并在相应的格子上落下棋子。我们可以使用handleClick()函数来处理这个事件。

handleClick(i, j) {
  if (this.board[i][j] !== 0) {
    return; // 该格子已落子，不能重复落子
  }
  this.board[i][j] = this.player;
  this.setState({
    board: this.board,
  });
  this.checkWin(); // 落子后检查是否胜利
  this.switchPlayer(); // 切换当前玩家
}

4. 胜利检查：让胜负水落石出

每当棋子落下后，我们需要检查是否满足胜利条件。我们可以使用checkWin()函数来完成这个任务。

checkWin() {
  // 检查水平方向
  for (let i = 0; i < 15; i++) {
    for (let j = 0; j < 11; j++) {
      if (
        this.board[i][j] === this.player &&
        this.board[i][j + 1] === this.player &&
        this.board[i][j + 2] === this.player &&
        this.board[i][j + 3] === this.player &&
        this.board[i][j + 4] === this.player
      ) {
        this.setState({
          winner: this.player,
        });
        return;
      }
    }
  }
  // 检查垂直方向
  for (let i = 0; i < 11; i++) {
    for (let j = 0; j < 15; j++) {
      if (
        this.board[i][j] === this.player &&
        this.board[i + 1][j] === this.player &&
        this.board[i + 2][j] === this.player &&
        this.board[i + 3][j] === this.player &&
        this.board[i + 4][j] === this.player
      ) {
        this.setState({
          winner: this.player,
        });
        return;
      }
    }
  }
  // 检查右斜方向
  for (let i = 0; i < 11; i++) {
    for (let j = 0; j < 11; j++) {
      if (
        this.board[i][j] === this.player &&
        this.board[i + 1][j + 1] === this.player &&
        this.board[i + 2][j + 2] === this.player &&
        this.board[i + 3][j + 3] === this.player &&
        this.board[i + 4][j + 4] === this.player
      ) {
        this.setState({
          winner: this.player,
        });
        return;
      }
    }
  }
  // 检查左斜方向
  for (let i = 4; i < 15; i++) {
    for (let j = 0; j < 11; j++) {
      if (
        this.board[i][j] === this.player &&
        this.board[i - 1][j + 1] === this.player &&
        this.board[i - 2][j + 2] === this.player &&
        this.board[i - 3][j + 3] === this.player &&
        this.board[i - 4][j + 4] === this.player
      ) {
        this.setState({
          winner: this.player,
        });
        return;
      }
    }
  }
}

5. 玩家切换：让黑白棋子交替起舞

每当棋子落下后，我们需要切换当前玩家，以便轮到另一位玩家落子。我们可以使用switchPlayer()函数来完成这个任务。

switchPlayer() {
  this.player = this.player === 1 ? 2 : 1;
  this.setState({
    player: this.player,
  });
}

6. 人机对战：让计算机成为你的对手

为了让游戏更加有趣，我们可以添加人机对战功能。我们可以使用computerMove()函数来让计算机自动落子。

computerMove() {
  // 随机选择一个空格子落子
  while (true) {
    const i = Math.floor(Math.random() * 15);
    const j = Math.floor(Math.random() * 15);
    if (this.board[i][j] === 0) {
      this.handleClick(i, j);
      break;
    }
  }
}