这是改编自 React tutorial 的 Tic Tac Toe 游戏, 加上 一个人的选择。出于某种原因，按钮对齐一旦出现就会掉线 是附加值；按钮下降约 50px，直到该行的其余部分包含值， 然后他们都像以前一样回到董事会。我不明白为什么会这样 并感谢任何帮助使按钮保持一致。
电脑选择一个游戏逻辑也有不一致的表现
对 Angular 线选项；很容易将计算机定位为必须选择 0
或 2 然后计算机必须依靠随机选择功能来占据那些
广场。我的理解是程序应该(“应该...”)认识到需要
根据这种逻辑选择那些方 block ；
else if (squares[b] === 'X' && squares[b] === squares[c] && squares[a] === null){
console.log("need O in ", a);
return a;
我在程序中留下了 console.log 语句来显示我的状态和位置
麻烦解决这个问题。任何见解将不胜感激。谢谢你
你的时间。
对齐问题可以在JS Bin上看到
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Tic Tac Toe</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id='root'></div>
<script type='text/babel' >
var numberXs = 0;
var 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],
];
function Square(props){
return(
<button className="square" onClick={() => props.onClick()}>{props.value}</button>
);
}
class Board extends React.Component{
renderSquare(i){
return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />
}
render(){
return(
<div className="board" key={this.props.key}>
<div className="row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
class Game extends React.Component{
defaultState = {
onePlayerGame: true,
squares: Array(9).fill(null),
xIsNext: true
};
constructor(props){
super(props);
this.onePlayer = this.onePlayer.bind(this);
this.twoPlayer = this.twoPlayer.bind(this);
this.handleMove = this.handleMove.bind(this);
this.gameOver = this.gameOver.bind(this);
this.state = this.defaultState;
}
onePlayer(){
this.setState({onePlayerGame: true});
return(
document.getElementById('onePlayer').style.color = "red",
document.getElementById('twoPlayer').style.color = "black"
);
}
twoPlayer(){
this.setState({ onePlayerGame: false});
return(
document.getElementById('onePlayer').style.color= "black",
document.getElementById('twoPlayer').style.color = "red"
);
}
handleMove(i){
var HALturn = true,
HALmove;
const squares = this.state.squares.slice();
if (checkWinner(squares) || squares[i]){
return;
}
if (this.state.onePlayerGame){
squares[i] = 'X';
numberXs += 1;
this.setState({squares:squares});
if (numberXs >= 5){
return;
}
if (HALbest(squares)){
HALmove = HALbest(squares);
squares[HALmove] = 'O';
this.setState({squares: squares});
return;
} else {
while (HALturn) {
HALmove = Math.floor(Math.random() * squares.length);
if (squares[HALmove] === null){
squares[HALmove] = 'O';
this.setState({
squares: squares
});
return;
HALturn = false;
} else {
console.log("Additional random selection");
}
}
}
}
else {
squares[i] = this.state.xIsNext ? 'X':'O';
this.setState({
squares: squares,
xIsNext: !this.state.xIsNext
});
}
}
gameOver(){
this.setState({...this.defaultState});
numberXs = 0;
}
render(){
var winner = checkWinner(this.state.squares);
let status, endGame;
if (winner) {
status = "Winner is " + winner;
} else if (!winner && numberXs === 5){
status = "No Winner. Reset to play again.";
} else {
status = "Next Move: " + (this.state.xIsNext ? 'X': 'O');
}
return(
<div id="main">
<div>
<button className="gameSelect" id="onePlayer" value={this.state.onePlayerGame} onClick={() => this.onePlayer()} >One Player</button>
<button className="gameSelect" id="twoPlayer"value={this.state.onePlayerGame} onClick={() => this.twoPlayer()} >Two Players</button>
</div>
<Board
squares={this.state.squares}
onClick={(i) => this.handleMove(i)} />
<div id="status">{status}</div>
<button className="gameSelect" id="resetButton" onClick={() => this.gameOver()}>Reset Game</button>
</div>
);
}
}
function checkWinner(squares){
for (var 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;
}
function HALbest(squares){
for (var i = 0; i < lines.length; i++){
const [a, b, c] = lines[i];
if (squares[a] === 'X' && squares[a] === squares[c] && squares[b] === null){
console.log("need O in ", b);
return b;
} else if (squares[b] === 'X' && squares[b] === squares[c] && squares[a] === null){
console.log("need O in ", a);
return a;
} else if ( squares[a] === 'X' && squares[a] === squares[b] && squares[c] === null ){
console.log("need O in ", c);
return c;
}
}
return null;
}
ReactDOM.render(
<Game />,
document.getElementById('root')
)
</script>
</body>
</html>
有了这个 CSS；
#main {
width: 80%;
margin: auto;
color: blue;
text-align: center;
}
.gameSelect {
width: 30%;
text-align: center;
background-color: white;
border: 1px solid transparent;
margin: 5px 0 5px 0;
}
.board {
display: inline;
}
#onePlayer {
color: red;
}
#status {
margin: 25px 0 5px 0;
}
.row {
margin: auto;
height: 100px;
}
.square {
width: 100px;
height: 100px;
background-color: white;
font-size: 20px;
margin: 0;
display: inline;
}
再次感谢您的帮助。
最佳答案
这个对齐问题很奇怪，但在 .square 中添加顶部的垂直对齐似乎可以解决这个问题(至少在 Chrome 和 FireFox 中是这样)。 https://jsbin.com/mogemogame/1/edit?html,css,output
.square {
...
vertical-align: top;
}
逻辑问题是因为您的 javascript 说只有在最佳着法为真时才做出“最佳着法”。如果返回 0，则表示不要采取最佳行动。
if (HALbest(squares)){
HALmove = HALbest(squares);
squares[HALmove] = 'O';
this.setState({squares: squares});
return;
}
应该是
if (HALbest(squares) !== null){
HALmove = HALbest(squares);
squares[HALmove] = 'O';
this.setState({squares: squares});
return;
}
关于javascript - React 中的按钮改变对齐方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43462064/