React入门6: 实现回合制机制

2 年 ago
清, 宇
2 minutes

首先

我希望通过学习复习和做备忘录的意义，通过一系列的文章，使用React来开发井字棋游戏（三连棋）。

    • React

 

    • CodeSandbox(公式)

 

    CodeSandbox(非公式)

系列的目录

    1. React入門１: 環境構築 [在線版]

 

    1. React入門1.5: 環境構築 [本地版-番外編]

 

    1. React入門２: 盤面的創建

 

    1. React入門３: 互動實現

 

    1. React入門４: 重構 [提升編]

 

    1. React入門５: 重構 [互動編]

 

    1. React入門６: 手順的實現 (本次)

 

    1. React入門７: 遊戲勝利判斷

 

    1. React入門８: 文本的實現

 

    1. React入門９: 時光旅行(1)

 

    1. React入門10: 時光旅行(2)

 

    React入門11: 時光旅行(3)

关于目的

整体的目标

我們將在React公式的教程中，使用 3×3 的方格來實現井字遊戲的遊戲板。

 

这次的目标是什么？

我们将实现在每个格子上显示不仅限于”X”，还可以显示”O”的功能，并引入回合制进行游戏。

实现轮次控制

您可以在下一页上查看上一次的源文件。

 

    前回の内容はコチラから！

 

「O」的表示

让我们对App.js文件中的Board组件进行以下更改。

    • 手番を表す変数を作成する

state 型の変数 xIsNext を宣言する

初期値を ture とする
set関数の名称を setXIsNext とする

handleClick() 関数の変更

xIsNext 変数で手番を制御する

xIsNext 変数が真のときに、「X」を表示する

xIsNext 変数が真ではないときに、「O」を表示する

マスの表示を更新した後に手番を相手に譲る

set関数で xIsNext の真偽値を反転させる

import { useState } from "react";
import "./styles.css";

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

export default function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));
  const [xIsNext, setXIsNext] = useState(true);

  function handleClick(i) {
    const nextSquares = squares.slice();

    if (xIsNext) {
      nextSquares[i] = "X";
    } else {
      nextSquares[i] = "O";
    }
    setSquares(nextSquares);
    setXIsNext(!xIsNext);
  }

  return (
    <>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
    </>
  );
}

下面展示了执行结果。现在，当点击格子时，”X”和”O”会交替显示。

OとXの交互.gif

修复处理

在当前的程序中，未检查单元格是否为空，只是显示“X”和“O”。因此，如果再次点击已经被标记的单元格，可以通过重新填充内容来修复此错误。

表示処理の修正前.gif

为了修正这个问题，在Board组件的handleClick()函数中，如果点击的方格上已经有标记，我们应该添加一个早期返回的处理。

  function handleClick(i) {
    if (squares[i]) {
      return;
    }

    const nextSquares = squares.slice();

    if (xIsNext) {
      nextSquares[i] = "X";
    } else {
      nextSquares[i] = "O";
    }
    setSquares(nextSquares);
    setXIsNext(!xIsNext);
  }

只要已经有标记的方格，点击它也不会改变显示内容。

表示処理の修正後.gif

最后

这次通过在棋盘上实现轮流下棋的方式，引入了玩家的概念。请见下一页中的源代码。

 

下一步，我们将开发一个程序，根据棋盘上的情况来判断游戏的胜利者。而不仅仅是React，重点在于我们将如何推导算法。

 

bannerAds