Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
  <div id='root'></div>
</body>
</html>
 
#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;
  vertical-align: top;
}
​
​
 
​
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')
)
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers