demo来源：react教程 - 三子棋游戏
目录结构
Quick start
npx create-react-app game
Let's do it
删除 src/ 下所有文件
在 src/ 下创建一个 index.js + index.css
在 src/ 下创建一个 components 文件夹用来放需要用到的三个组件：Square Board Game Moves
在 /src/components 下创建 Square.js 写第一个组件 Square
Square.js
import React from 'react';
import '../index.css'
class Square extends React.Component {
constructor () {
super();
this.state = {
squares: 1
}
}
handleClick () {
this.setState({
squares: 'x'
})
}
render () {
return (
<div>
<span className='square'
onClick={() => {this.handleClick()}}>{this.state.squares}</span>
</div>
)
}
}
export default Square;
- 将组件 Square 渲染到页面中
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Square from './components/Square';
// ========================================
ReactDOM.render(
<Square />,
document.getElementById('root')
);
- 在 /src/components 下创建 Board.js 写第二个组件 Board ，同时进行状态提升
Board.js
import React from 'react';
import Square from './Square';
import '../index.css';
class Board extends React.Component {
constructor () {
super();
this.state = {
squares: [1,2,3,4,5,6,7,8,9]
}
}
handleClick (i) {
const squares = this.state.squares.slice();
squares[i] = 'x';
this.setState({
squares: squares
})
}
renderSquare (i) {
return (
<Square
squares={this.state.squares[i]}
onClick={() => this.handleClick(i)} />
)
}
render () {
return (
<div>
{this.state.squares.map((item, index) => {
if (index % 3 === 0) {
return (
<div key={index} className='board-row'>
{[0, 1, 2].map((item, i) => {
return (
<div key={index + i}>
{this.renderSquare(index + i)}
</div>
)
})}
</div>
)
}
})}
</div>
)
}
}
export default Board;
- 在 /src/components 下创建 Moves.js 写第三个组件 Moves 用来显示历史记录
import React from 'react';
import '../index.css';
class Moves extends React.Component {
render () {
const moves = this.props.moves;
return (
<div className={this.props.orderStatus === 'ase' ? 'ascending' : 'descending'}>
{moves.map((item, index) => {
const desc = index ? '返回第' + index + '步' : '开始游戏';
return (
<p className={this.props.step === index ? 'light-show' : null}
key={index}
onClick={() => this.props.onClick(index)}>{desc}</p>
)
})}
</div>
)
}
}
export default Moves;
-
在 /src/components 下创建 Game.js 写第四个组件 Game ，同时再次进行状态提升，实现以下功能：
(1).进行胜利判断：有人胜出则显示胜利者并结束游戏，满足胜利条件的棋子高亮显示，无人胜出则显示游戏结束
(2).实现显示历史记录并可以跳回历史记录操作，当前历史记录处高亮显示
(3).实现历史记录正序或倒叙排列切换
import React from 'react';
import Board from './Board'
import Moves from './Moves'
import '../index.css'
class Game extends React.Component {
constructor () {
super();
this.state = {
history: [{
square: Array(9).fill(null)
}],
stepNum: 0,
isXTurn: true,
orderStatus: 'ase'
}
}
handleClick (i) {
const history = this.state.history.slice(0, this.state.stepNum + 1);
const current = history[history.length - 1];
const squares = current.square.slice();
if (whoIsWinner(squares) || squares[i]) {
return;
}
squares[i] = this.state.isXTurn ? 'x' : 'o';
this.setState({
history: history.concat({
square: squares
}),
stepNum: this.state.stepNum + 1,
isXTurn: !this.state.isXTurn
})
}
jumpTo (step) {
this.setState({
history: step === 0 ? [{square: Array(9).fill(null)}] : this.state.history,
stepNum: step,
isXTurn: step % 2 === 0
})
}
orderChange () {
this.setState({
orderStatus: this.state.orderStatus === 'ase' ? 'desc' : 'ase'
})
}
render () {
const history = this.state.history;
const current = history[this.state.stepNum];
let status;
const winner = whoIsWinner(current.square) ? whoIsWinner(current.square).winner : null;
const winnerSquares = whoIsWinner(current.square) ? whoIsWinner(current.square).winnerSquares : [];
const order = this.state.orderStatus === 'ase' ? '升序排列' : '降序排列';
if (winner) {
status = 'Winner is ' + winner;
} else if (this.state.stepNum === 9) {
status = 'Game is over';
} else {
status = this.state.isXTurn ? 'Next player is x' : 'Next player is o';
}
return (
<div className='game'>
<div className='game-board'>
<Board
winnerSquares={winnerSquares}
onClick={(i) => this.handleClick(i)}
squares={current.square} />
</div>
<div className='game-info'>
<p>{status}</p>
<button onClick={() => this.orderChange()}>
{order}
</button>
<ul>
<Moves
step={this.state.stepNum}
orderStatus={this.state.orderStatus}
moves={history}
onClick={(i) => this.jumpTo(i)} />
</ul>
</div>
</div>
)
}
}
function whoIsWinner (squares) {
const winnerList = [
[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 < winnerList.length; i++) {
let [a, b, c] = winnerList[i];
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
return {
winner: squares[a],
winnerSquares: winnerList[i]
}
}
}
return null;
}
export default Game;
完整代码见：https://github.com/direwolf512/react-demo/tree/feature/game
