个人中心
gpt4 book ai didi

javascript - React 中的按钮改变对齐方式

转载 作者：太空宇宙 更新时间：2023-11-04 08:50:42 24 4
gpt4 key购买 nike

这是改编自 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/

24 4 0
文章推荐： python - 用 Python 进行 rot13 编码的文件是什么？文件名是什么？
文章推荐： java - 客户端 HTTP Post 到外部站点
文章推荐： python - Python 中的定时器
文章推荐： java - 使用 Wicket 从 super /抽象类调用方法时焊接注入(inject)失败
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com