En este blog técnico, presentaremos un ejemplo oficial de React: el juego de tres en raya. Explicaremos la implementación del código paso a paso, incluida la estructura de los componentes del juego, la gestión del estado, la determinación del ganador y las funciones de registro del historial. ¡Empecemos juntos!
Descripción del proyecto
En este juego de tres en raya tenemos los siguientes componentes:
SquareComponente: Representa cada casilla del tablero de juego.BoardComponente: Representa el tablero del juego, que contiene múltiplesSquarecomponentes.GameComponente: el contenedor que representa todo el juego, incluida la gestión y el historial del estado del juego.
Squarecomponentes
SquareLos componentes representan cada cuadrado del tablero de juego. El código se muestra a continuación:
function Square({ value, onSquareClick }) {
return (
<button className="square" onClick={onSquareClick}>
{value}
</button>
);
}
SquareEl componente recibe dos accesorios: valuey onSquareClick. valueIndica el valor del cuadrado actual ('X', 'O' o nulo) y onSquareClickes un controlador de eventos de clic. Cuando se hace clic en el cuadrado, onSquareClickse activará.
Boardcomponentes
BoardUn componente representa el tablero de todo el juego y contiene varios Squarecomponentes. El código se muestra a continuación:
function Board({ xIsNext, squares, onPlay }) {
function handleClick(i) {
if (calculateWinner(squares) || squares[i]) {
return;
}
const nextSquares = squares.slice();
if (xIsNext) {
nextSquares[i] = 'X';
} else {
nextSquares[i] = 'O';
}
onPlay(nextSquares);
}
const winner = calculateWinner(squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
} else {
status = 'Next player: ' + (xIsNext ? 'X' : 'O');
}
return (
<>
<div className="status">{status}</div>
<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>
</>
);
}
BoardEl componente recibe tres accesorios xIsNext: squaresy onPlay. xIsNextIndica qué jugador es el turno actual para jugar ajedrez ('X' o 'O'). squaresEs una matriz, que indica el estado del tablero del juego, y cada elemento es el valor del cuadrado. onPlayes una función que actualiza el estado del tablero del juego.
BoardSe define una función dentro del componente handleClickpara manejar el evento de clic de la cuadrícula. Si el juego ya tiene un ganador o la parrilla ya está ocupada, no hagas nada. De lo contrario, según el jugador actual ("X" u "O"), actualice el valor del cuadrado y luego llame a onPlayla función para actualizar el estado del juego.
BoardEl componente también juzga el estado del juego según el estado actual del tablero y lo muestra en la página.
Gamecomponentes
GameLos componentes son contenedores de todo el juego, responsables de gestionar el estado y el historial del juego. El código se muestra a continuación:
export default function Game() {
const [history, setHistory] = useState([Array(9).fill(null)]);
const [currentMove, setCurrentMove] = useState(0);
const xIsNext = currentMove % 2 === 0;
const currentSquares = history[currentMove];
function handlePlay(nextSquares) {
const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
setHistory(nextHistory);
setCurrentMove(nextHistory.length - 1);
}
function jumpTo(nextMove) {
setCurrentMove(nextMove);
}
const moves = history.map((squares, move) => {
let description;
if (move > 0) {
description = 'Go to move #' + move;
} else {
description = 'Go to game start';
}
return (
<li key={move}>
<button onClick={() => jumpTo(move)}>{description}</button>
</li>
);
});
return (
<div className="game">
<div className="game-board">
<Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
</div>
<div className="game-info">
<ol>{moves}</ol>
</div>
</div>
);
}
GameLos componentes utilizan useStateganchos para gestionar el estado del juego. historyEs una matriz que se utiliza para guardar el historial del juego, cada elemento es una matriz que representa el estado del tablero. currentMoveIndica el número actual de pasos, xIsNexta qué jugador le toca jugar actualmente ('X' u 'O') currentSquaresy el estado del tablero correspondiente al número actual de pasos.
handlePlayLa función se utiliza para manejar las operaciones de ajedrez del jugador. Agregará el siguiente estado del tablero historyy actualizará el recuento de movimientos actual.
jumpTofunción para saltar a un número específico de pasos en el historial.
GameEl componente también muestra una lista histórica que muestra cada paso de la operación. Haga clic en el botón de la lista para saltar al paso del historial correspondiente.
función auxiliarcalculateWinner
Finalmente, tenemos una función auxiliar calculateWinnerque determina si el juego tiene un ganador. El código se muestra a continuación:
function calculateWinner(squares) {
const lines = [
[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 < lines.length; i++) {
const [a, b, c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
return squares[a];
}
}
return null;
}
calculateWinnerLa función recibe una squaresmatriz que representa el estado del tablero del juego. Itera a través de una matriz de todos los casos ganadores lines, verifica si alguno de los tres cuadrados tiene el mismo valor y devuelve ese valor ('X' u 'O'); de lo contrario, no devuelve nullningún ganador.
Resumir
En este blog de tecnología, detallamos el ejemplo oficial del juego de tres en raya de React. Entendemos la estructura de los componentes del juego y realizamos la gestión del estado del juego, la determinación del ganador y las funciones de registro del historial. A través de este sencillo juego de tres en raya, aprendimos sobre la comunicación entre los componentes de React, la gestión del estado y cómo manejar la interacción del usuario.