import { useState } from 'react';
function Square({ value,onSquareClick }) {
return <button className="square"
onClick={onSquareClick}>{value}</button>;
}
function Board({ xIsNext, squares, onPlay }) {
// const [xIsNext, setXIsNext] = useState(true);
// const [squares, setsquares] = useState(Array(9).fill(null));
function handleClick(i) {
// if (squares[i]) {
// 使得已经翻开的卡不能再翻转,
// 若点击已经翻过一次的卡,则退出函数的执行
// return;
// }
if (squares[i] || calculateWinner(squares)) {
return;
}
const nextSquares = squares.slice();
if (xIsNext) {
nextSquares[i] = "X";
} else {
nextSquares[i] = "O";
}
onPlay(nextSquares);
// nextSquares[i] = "X";
// setsquares(nextSquares);
// setXIsNext(!xIsNext);
// console.log(i);
// console.log(nextSquares[i])
// console.log(squares)
// console.log(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>
</>
);
}
export default function Game() {
const [xIsNext, setXIsNext] = useState(true);
const [history, setHistory] = useState([Array(9).fill(null)]);
//跟踪用户当前正在查看的步骤
const [currentMove, setCurrentMove] = useState(0);
// const currentSquares = history[history.length - 1];
//修改组件以呈现当前选定的移动,而不是始终呈现最终移动
const currentSquares = history[currentMove];
function handlePlay(nextSquares) {
// TODO
const nextHistory
= [...history.slice(0, currentMove + 1), nextSquares];
setHistory([...history, nextSquares]);
setCurrentMove(nextHistory.length - 1);
setXIsNext(!xIsNext);
}
//显示历史记录
function jumpTo(nextMove) {
// TODO
setCurrentMove(nextMove);
setXIsNext(nextMove % 2 === 0);
}
//显示历史记录
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>
);
}
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;
}
井字棋游戏(React实现)
最新推荐文章于 2024-03-25 18:27:40 发布