Part 1: Making a tic-tac-toe game in React JS.

This post was originally a part of my blog.
So, in the last few months, I started learning React, a JavaScript Library for making web applications. My goal was to learn the basics and make some fun projects with it. Here is my journey making a tic-tac-toe in React JS (TypeScript).

Note: This part focuses on UI and making a simple 2-player game. Still developing the version in which you can play with a bot. This is not a stepwise guide, instead, it is an over-the-top idea about how I made the game.

Get the code here and don’t forget to follow me. → Github

The UI: The User Interface is made in Tailwind CSS which is a remarkable CSS library.

Components React uses components to give flexibility and ease of use, you don’t have to write a piece of code repeatedly. Here each tic-tac block uses a separate component as a button.

<button
      title="t1"
      onClick={() => {
        Click();
      }}
      className="text-center w-28 h-28 border-8 border-black box-border p-3"
    >
      {props.value == 1 ? (
        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M0 14.545 1.455 16 8 9.455 14.545 16 16 14.545 9.455 8 16 1.455 14.545 0 8 6.545 1.455 0 0 1.455 6.545 8z"
            fill-rule="evenodd"
            className="cross"
          />
        </svg>
      ) : null}
      {props.value == 2 ? (
        <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
          <circle cx="24" cy="24" r="21.5" className="circle" />
        </svg>
      ) : null}
    </button>

The Mechanics The Game treats the board as a 2D array. Player 1 places a 1 and Player 2 places a 2 in the array. The player will only allowed to click if there is a 0 (empty) on that place.

  var initTable: number[][] = [
    [0, 0, 0],
    [0, 0, 0],
    [0, 0, 0],
  ];

**Inputs **The click () function is called when a button is pressed. The function calls another function outside the component that changes the Array and places a tick/circle.

function Click() {
    if (props.value == 0 && props.gamerunning == true) {
      props.onfunctionClick(props.row, props.col);
    }
  }

Checking After every turn the game checks if the board is solved if yes then it makes the player from the last turn the “winner” else the game continues. It’s that simple…. uhm not that much, to check you have if else which check for diagonals, rows, and columns.

function checkArray(arr: number[][]) {
    if (
      (arr[0][0] == 1 && arr[1][1] == 1 && arr[2][2] == 1) ||
      (arr[0][0] == 2 && arr[1][1] == 2 && arr[2][2] == 2)
    ) {
      return false;
      setwinner(turn);
    }

    for (let i = 0; i < 3; i++) {
      if (
        (arr[i][0] == 1 && arr[i][1] == 1 && arr[i][2] == 1) ||
        (arr[i][0] == 2 && arr[i][1] == 2 && arr[i][2] == 2)
      ) {
        return false;
        setwinner(turn);
      } else if (
        (arr[0][i] == 1 && arr[1][i] == 1 && arr[2][i] == 1) ||
        (arr[0][i] == 2 && arr[1][i] == 2 && arr[2][i] == 2)
      ) {
        return false;
        setwinner(turn);
      }
    }
    if (
      (arr[0][2] == 1 && arr[1][1] == 1 && arr[2][0] == 1) ||
      (arr[0][2] == 2 && arr[1][1] == 2 && arr[2][0] == 2)
    ) {
      return false;
      setwinner(turn);
    } else {
      return true;
    }
  }

What if it is a draw? So, it’s not straightforward how to check if it's a draw or not, but we can calculate the number of turns if they are equal to 9 and there is no winner so that means it’s a draw.

What’s next? This is a simple fun project that I made to test my skills. It’s not perfect, but I will add some features like playing with a bot, etc.

That’s it for now, See you later. Be sure to follow me on Medium and Twitter.