Creating a Tic-Tac-Toe Game Using Only UI in Unity

SF Games
December 26, 2022

Creating a Tic-Tac-Toe Game Using Only UI in Unity

To create a Tic-Tac-Toe game using only UI elements in Unity, you will need to do the following:

  1. Create a new Unity project and set up the basic UI layout. This will include a canvas, a panel for the game board, and nine buttons for the game squares.

  2. Set up the game logic. You will need to create variables to track the state of the game, such as which player's turn it is and whether or not the game has been won. You will also need to create a function that checks for a win condition after each move.

  3. Write the code for the button click events. Each time a button is clicked, you will need to update the game state and check for a win condition. You can also display a message to the player indicating whether they have won or not.

  4. Add any additional features you want, such as the ability to reset the game or track the score.

Here is some example code that you could use to implement the basic game logic:

public class TicTacToe : MonoBehaviour
{
    public Button[] buttons; // array of buttons representing the game board
    public Text messageText; // text element to display messages to the player
   
    private string playerSide; // current player's side (X or O)
    private int movesMade; // number of moves made in the current game

    void Start()
    {
        playerSide = "X"; // X goes first
        movesMade = 0; // no moves have been made yet
       
        // reset the game board
        SetBoardInteractable(true);
        SetMessage("");
        for (int i = 0; i < buttons.Length; i++)
        {
            buttons[i].GetComponentInChildren<Text>().text = "";
        }
    }

    public void ButtonClick(int buttonIndex)
    {
        // update the game state
        movesMade++;
        buttons[buttonIndex].GetComponentInChildren<Text>().text = playerSide;
        buttons[buttonIndex].interactable = false;

        // check for a win
        if (CheckWin())
        {
            SetBoardInteractable(false);
            SetMessage(playerSide + " wins!");
        }
        // check for a draw
        else if (movesMade == buttons.Length)
        {
            SetMessage("It's a draw!");
        }
        // switch players
        else
        {
            playerSide = (playerSide == "X") ? "O" : "X";
            SetMessage("It's " + playerSide + "'s turn.");
        }
    }

    private bool CheckWin()
    {
        // check rows
        if (buttons[0].GetComponentInChildren<Text>().text == playerSide &&
            buttons[1].GetComponentInChildren<Text>().text == playerSide &&
            buttons[2].GetComponentInChildren<Text>().text == playerSide)
            return true;
        if (buttons[3].GetComponentInChildren<Text>().text == playerSide &&
            buttons[4].GetComponentInChildren<Text>().text == playerSide &&
            buttons[5].GetComponentInChildren<Text>().text == playerSide)
            return true;
        if (buttons[0].GetComponentInChildren<Text>().text == playerSide &&
            buttons[1].GetComponentInChildren<Text>().text == playerSide &&
            buttons[2].GetComponentInChildren<Text>().text == playerSide)
            return true;
    }
}