Tic-Tac-Toe Game Using ReactJS

Introduction

 

Tic-Tac-Toe (also called Noughts and Crosses) is a very simple game in which two players alternately put Xs and Os in compartments of a figure formed by two vertical lines crossing two horizontal lines. Each player tries to get a row of three Xs or three Os before the opponent does. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row is the winner.

• Players: 2
• Skill(s) required: Strategy, tactics, observation
• Genres: Paper-and-pencil game, Board game, Strategy game

For the Design Board

The design is based on 3 X 3 Grid design for the game. We need to first create the board design with a 3 X 3 block. The footer counting section is designed to determine how many times the player or the computer wins the game, as well as the count of tie games between the computer and player.

 

 

render() {
  return (
    <div className="App">
      <div className="game">
        <div className="board">
          <div onClick={() => this.handleClick(1)} className="square top left" ><div ref="block1"></div></div>
          <div onClick={() => this.handleClick(2)} className="square top" ><div ref="block2"></div></div>
          <div onClick={() => this.handleClick(3)} className="square top right" ><div ref="block3"></div></div>
          <div onClick={() => this.handleClick(4)} className="square left" ><div ref="block4"></div></div>
          <div onClick={() => this.handleClick(5)} className="square" ><div ref="block5"></div></div>
          <div onClick={() => this.handleClick(6)} className="square right" ><div ref="block6"></div></div>
          <div onClick={() => this.handleClick(7)} className="square bottom left" ><div ref="block7"></div></div>
          <div onClick={() => this.handleClick(8)} className="square bottom" ><div ref="block8"></div></div>
          <div onClick={() => this.handleClick(9)} className="square bottom right" ><div ref="block9"></div></div>
        </div>
      </div>
      <div class="scores p1">
        <p class="player1"><span class="p1">Player</span><span class="p2">Player 1</span> (<span class="x"></span>)<span class="score">{this.state.playerWin}</span></p>
        <p class="ties">Tie<span class="score">{this.state.tieGames}</span></p>
        <p class="player2"><span class="p1">Computer</span><span class="p2">Player 2</span> (<span class="o"></span>)<span class="score">{this.state.computerWin}</span></p>
      </div>
    </div>
  );
}

Default Configurations

 

Consider the player step as 'X' and the computer step as 'O' in the game. As everything is developed in React JS, we need to maintain the state of each required thing via the state in React Js. We need to take care of the state of the following things for built-up game logic.

• Winner Status
• Total Player Clicks
• Total Computer Clicks
• Block is Clickable or not(This status is for automatically perform by computer, We need to hold player interaction to be performing for next move until computer move occurs)
• Counting of tied games, the computer wins and the player wins

Developed Logic For Game 

 

When the user starts the game or the page is loaded, the player's turn will be the next step up. Each block, we have to perform the following conditions or operations while clicked by the player or automatically clicked by a computer player.

STEP 1 - Block Click Event

 

We need to check whether a block that is clicked has been already occupied earlier or not. If yes, then there's no need to perform any further process.     

handleClick = (index) => {
  if (!this.state.isClickable) {
    return;
  }

  if (this.refs["block" + index].className.length > 0) {
    return;
  }

  if (this.state.isWinner) {
    return;
  }

  this.refs["block" + index].className = "x";
  this.refs["block" + index].classList.add('x');
  this.checkForWinner();
  this.setState({
    userClick: parseInt(this.state.userClick) + 1,
    isClickable: false
  }, () => {
    this.computerTurn(index);
  });
}

STEP 2

 

In the case that the block is not occupied, then we need to check it as 'X'. Now we need to check the verification of the winning condition.

 

 

STEP 3 - Winning Condition

 

combination collection = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [1, 4, 7], [2, 5, 8], [3, 6, 9], [1, 5, 9], [3, 5, 7]];

 

Here, the combination collection is the possible combinations that could be possible ways to verify the winner after clicked by a player. We need to verify if the player wins or not. If a player wins, then the game automatically resets after 3 seconds. Otherwise, it will move to a further process. We need to add one more count of the player who wins here. 

checkForWinner = () => {
  const combinationCollection = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [1, 4, 7], [2, 5, 8], [3, 6, 9], [1, 5, 9], [3, 5, 7]];
  combinationCollection.map((data) => {
    if ((this.refs["block" + data[0]].className && this.refs["block" + data[1]].className && this.refs["block" + data[2]].className)
      && (this.refs["block" + data[0]].className.toLowerCase() === this.refs["block" + data[1]].className.toLowerCase() && this.refs["block" + data[1]].className.toLowerCase() === this.refs["block" + data[2]].className.toLowerCase() && this.refs["block" + data[2]].className.toLowerCase() === this.refs["block" + data[0]].className.toLowerCase())) {
      {
        this.setState({
          isWinner: true,
          isUserWinnder: (this.refs["block" + data[0]].className === "x"),
          playerWin: (this.refs["block" + data[0]].className === "x") ? (parseInt(this.state.playerWin) + 1) : this.state.playerWin,
          computerWin: (this.refs["block" + data[0]].className === "o") ? (parseInt(this.state.computerWin) + 1) : this.state.computerWin
        }, () => {
          this.refs["block" + data[0]].classList.add('blink');
          this.refs["block" + data[1]].classList.add('blink');
          this.refs["block" + data[2]].classList.add('blink');
          setTimeout(() => {
            this.resetGame();
          }, 2000);
        });
      }
    }
  });
}

Reset Game Function

resetGame = () => {
  for (let i = 1; i <= 9; i++) {
    this.refs["block" + i].classList = "";
  }

  this.setState({
    userClick: 0,
    computerClick: 0,
    isWinner: false,
    isClickable: true
  });
}

STEP 4

 

Now it's the computer's turn, so we need to make the step automated.

 

For that, we need to check "How many blocks remain occupied. We need to automatically select a random place and make it select it automatically". After this, we need to verify the winner again. If the computer wins, then the game automatically resets after 3 seconds. Otherwise, it will move to a further process. We need to add one more count of the computer wins here.

computerTurn = () => {
  if (this.state.isWinner) {
    return;
  }

  let notBlueOrRed = [];
  let isAvailable = false;
  for (let i = 1; i <= 9; i++) {
    if (this.refs["block" + i].className.length === 0) {
      notBlueOrRed.push(i);
      isAvailable = true;
    }
  }

  if (isAvailable) {
    setTimeout(() => {
      var randomItem = notBlueOrRed[Math.floor(Math.random() * notBlueOrRed.length)];
      this.refs["block" + randomItem].className = "o";
      this.refs["block" + randomItem].classList.add('o');
      this.checkForWinner();
      this.setState({
        computerClick: parseInt(this.state.computerClick) + 1,
        isClickable: true
      });
    }, 1000);
  } else {
    if (!this.state.isWinner) {
      this.setState({
        tieGames: parseInt(this.state.tieGames) + 1
      }, () => {
        setTimeout(() => {
          this.resetGame();
        }, 2000);
      });
    }
  }
}

STEP 5

 

If the last block is available and the player clicks on it, we need to again verify the winner. If the player wins, then we need to reset the game and add one more count to the player wins. Otherwise, add one more count to tie game counting.

The above steps are the logical flow of the game, which must need to be implemented for the game.

• GitHub Repository
• Temporary Published URL

That's all. I hope you all enjoy it.