demo來源：react教程 - 三子棋游戲
目錄結(jié)構(gòu)
Quick start
npx create-react-app game
Let's do it
刪除 src/ 下所有文件
在 src/ 下創(chuàng)建一個(gè) index.js + index.css
在 src/ 下創(chuàng)建一個(gè) components 文件夾用來放需要用到的三個(gè)組件：Square Board Game Moves
在 /src/components 下創(chuàng)建 Square.js 寫第一個(gè)組件 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 下創(chuàng)建 Board.js 寫第二個(gè)組件 Board ，同時(shí)進(jìn)行狀態(tài)提升
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 下創(chuàng)建 Moves.js 寫第三個(gè)組件 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 下創(chuàng)建 Game.js 寫第四個(gè)組件 Game ，同時(shí)再次進(jìn)行狀態(tài)提升，實(shí)現(xiàn)以下功能：
(1).進(jìn)行勝利判斷：有人勝出則顯示勝利者并結(jié)束游戲，滿足勝利條件的棋子高亮顯示，無人勝出則顯示游戲結(jié)束
(2).實(shí)現(xiàn)顯示歷史記錄并可以跳回歷史記錄操作，當(dāng)前歷史記錄處高亮顯示
(3).實(shí)現(xiàn)歷史記錄正序或倒敘排列切換
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
