Reactjs 反应井字游戏
Reactjs 反应井字游戏,reactjs,Reactjs,我从今天开始学习react，并遵循reactjs.org上的教程。大部分是可以理解的，但我不明白赢家是如何计算的。。。我将包括下面的全部代码，但我的问题是calculatewiner函数。如果有人能解释一下背后的逻辑，我会很高兴的
功能广场（道具）{
报税表（<
按钮className=“square”
onClick={
道具
} > {
道具价值
} <
/按钮>
);
}
类板扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
正方形：数组（9）。填
我从今天开始学习react，并遵循reactjs.org上的教程。大部分是可以理解的，但我不明白赢家是如何计算的。。。我将包括下面的全部代码，但我的问题是calculatewiner函数。如果有人能解释一下背后的逻辑，我会很高兴的
功能广场（道具）{
报税表（<
按钮className=“square”
onClick={
道具
} > {
道具价值
} <
/按钮>
);
}
类板扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
正方形：数组（9）。填充（空），
下一个：是的，
};
}
handleClick（一）{
const squares=this.state.squares.slice（）；
正方形[i]=this.state.xIsNext？'X'：'O'；
这是我的国家({
正方形：正方形，
xIsNext:！this.state.xIsNext，
});
}
renderSquare（一）{
报税表（<
平方值={
本.州.广场[i]
}
onClick={
（）=>这个.把手舔（一）
}
/>
);
}
render（）{
const winner=calculateWinner（this.state.squares）；
让状态；
国际单项体育联合会（优胜者）{
状态='A győztes:'+赢家；
}否则{
status='Következőjátékos'+（this.state.xIsNext？'X'：'O'）；
}
报税表（<
div>
<
div className=“status”>{
地位
}
<
div className=“板行”>{
此.renderSquare（0）
} {
这是renderSquare（1）
} {
这是renderSquare（2）
} <
/div><
div className=“板行”>{
这是renderSquare（3）
} {
这是renderSquare（4）
} {
这个。渲染器正方形（5）
} <
/div><
div className=“板行”>{
这是renderSquare（6）
} {
这是renderSquare（7）
} {
这是renderSquare（8）
} <
/div><
/div>
);
}
}
类游戏扩展了React.Component{
render（）{
报税表（<
div className=“游戏”>
<
div className=“游戏板”>
<
董事会/>
<
/div><
div className=“游戏信息”>
<
div>{
/*状态*/}
<
ol>{
/*待办事项*/}<
/div><
/div>
);
}
}
ReactDOM.render（<
游戏/>，
document.getElementById（'root'））
);
函数计算器（平方）{
常量行=[
[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（设i=0；i
这里的诀窍是
行
变量看起来是“无序的”，但如果您在这样的表格中思考：
|--|--|--
| 0 | 1 | 2 |
|---|---|---|
| 3 | 4 | 5 |
|---|---|---|
| 6 | 7 | 8 |
|---|---|---|
优胜者组合为：0-1-2；3-4-5 ; 6-7-8 ... 等等
因此，在
calculateWinner
方法中，有一个循环来迭代每个可能的组合，并检查每个位置是否有相同的值/玩家
如果比较结果为
true
，则返回一个获胜者
检查代码（内联注释）
//迭代所有可能的组合
for（设i=0；i
我们以O或X的特定顺序获胜->0-1-2；3-4-5 ; 6-7-8等，编号（0,1,2）表示矩阵中的位置，因此，我们正在检查O或X的这种模式，如果我们在上述给定集合中发现这种重复值的模式，那么我们将通过选择索引中的任何一个来宣布胜利者，因为该集合中的所有索引都具有相同的值，因此为了简单起见，我们在重复开始的第一个单元格中返回值，即平方[a]注：更新后的方块会随着状态的变化而不断传递。线条表示要赢的8条不同线条（3条水平线、3条垂直线、2条对角线）。顶行由单元格[0,1,2]组成。所以，如果所有这些单元格都包含相同的符号，这意味着玩家一行有3个。因此，代码检查所有三个单元格是否包含相同的内容，并且它们实际上不是空的（3个空单元格不是获胜位置）单元格是否包含
X
或
O
，而不是
true