1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
| import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Square(props) {
return (<button className='square' style={{ color: props.highlight ? 'red' : '' }} onClick={props.onClick}>{props.value}</button>)
}
class Board extends React.Component {
constructor(props) {
super(props);
this.state = { squares: Array(9).fill(null), xIsNext: true, line: null }
}
renderSquare(i) {
return <Square highlight={this.props.line?.includes(i)} key={i} value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />;
}
render() {
let index = 0
return (
<div>
{[1, 2, 3].map(i => (
<div key={i} className='board-row'>
{Array(3).fill(null).map(() => this.renderSquare(index++))}
</div>
))}
</div>);
}
}
class Game extends React.Component {
constructor(props) {
super(props);
this.state = {
history: [{ squares: Array(9).fill(null), index: null }],
stepNumber: 0,
xIsNext: true,
historyIsDesc: false
}
}
handleClick(i) {
const history = this.state.history.slice(0, this.state.stepNumber + 1);
const current = history[history.length - 1]
const squares = current.squares.slice()
if (calculateWinner(squares).winner || squares[i]) {
return
}
squares[i] = this.state.xIsNext ? 'X' : 'O'
let row = i + 1;
let cell = 1;
while (row > 3) {
row -= 3;
cell++;
}
this.setState({
history: history.concat([{ squares, index: { row, cell } }]),
stepNumber: history.length,
xIsNext: !this.state.xIsNext
})
}
changeHistoryOrderBy() {
this.setState({ ...this.state, historyIsDesc: !this.state.historyIsDesc })
}
jumpTo(stepNumber) {
this.setState({
stepNumber, xIsNext: (stepNumber % 2) === 0
})
}
render() {
const history = this.state.history;
const current = history[this.state.stepNumber];
const { winner, line } = calculateWinner(current.squares);
let historyIsDesc = this.state.historyIsDesc;
const moves = history.map((step, move) => {
const desc = move ? `Go to move #${move} (${step.index.row},${step.index.cell})` : 'Go to game start';
return (
<li key={move}>
{/* 2.在历史记录列表中加粗显示当前选择的项目。 */}
<button style={{ fontWeight: this.state.stepNumber == move ? 'bold' : '' }} onClick={() => this.jumpTo(move)}>{desc}</button>
</li>
)
})
let status;
if (winner) {
status = 'Winner: ' + winner;
} else {
if (this.state.stepNumber < 9) {
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
} else {
status = 'Draw!';
}
}
return (
<div className="game">
<div className="game-board">
<Board line={line} squares={current.squares} onClick={(i) => this.handleClick(i)} />
</div>
<div className="game-info">
<div>{status}</div>
{/* 4.添加一个可以升序或降序显示历史记录的按钮。 */}
<button onClick={() => this.changeHistoryOrderBy()}>{`切换为${historyIsDesc ? '升' : '降'}序显示历史记录`}</button>
<ol>{historyIsDesc ? moves.reverse() : moves}</ol>
</div>
</div>
);
}
}
ReactDOM.render(
<Game />,
document.getElementById('root')
);
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 { winner: squares[a], line: [a, b, c] };
}
}
return {};
}
|