Tic Tac Toe: Game Coding

This article will tell how the TicTacToe be made; You will know what are the components using to build the TicTacToe and how they work together;
TicTacToe Component

Overview of the components

In the game, there are several main components and helper classes:
The main components are:
  • Chess (O, X) : An object represent the “O” and “X”
  • Board Logic : A module to determine who is winning the game
  • Game Board: A board holding the chess
  • UI Layer : The main UI object of the game, almost contain everythings
Support Classes:
  • TTTStyle : Defining the colour, font size used by the Game
  • TTTType : Defining the common type used by the Game
  • TTTMainScene : This is the main container used in Cocos2d-x engine

Behaviour of the main components


Class Name: TTTChess
Chess is a simple object represent the “O” and “X”; It is a subclass of Sprite;
It is used to show “O” and “X” on the GameBoard;

Board Logic

Class Name: TTTBoardLogic 
Board Logic is the module to tell the following information:
  • The current status: Is the game ended or need to continue?
  • The winner: Who is the winner

In order to calculate the above result, the Board Logic need to provide the following operations:

  • Reset Board: Reset the data representing the chess
  • Place chess: Add a chess information to the internal data
  • Check: Tell the status of the game now;


Class Name: TTTBoard
This is the main object for the TicTacToe game; The user interaction and TicTacToe game display are handled by it;
Here are the main responsibilities:
  • Capture user touch to place the chess
  • Display the chess in a right position
  • Work with BoardLogic to tell the new state of the game
  • Notify the Owner (the Main UI) the next state of the game
Here are the State will be sent out to the Main UI
  • State::Player1: It is the Player1 turn
  • State::Player2: It is the Player2 turn
  • State::Player1Win: Player1 won the game
  • State::Player2Win: Player2 won the game
  • State::DrawGame: Draw game
The TTTBoard will talk with The UI Logic so the UI can tell which player Win or reset a game;

Game UI

Class Name: TTTUILayer
This is the UI object, it is a subclass of Layer; It controls the flow of the game;
The UI object will handle the following operations:
  • UI Setup
  • Handle “Game Start” button
  • Handle different game state change
  • Handle game end logic
  • Handle Game Sound and Music
These are behaviours should be done when the UI receive different states:
  • State::Player1: Show it is “Player 1” turn
  • State::Player2: Show it is “Player 1” turn
  • State::Player1Win: Play the Win music; Enable the “Play” button again; Say “Player 1 Win”;
  • State::Player2Win: Play the Win music; Enable the “Play” button again; Say “Player 2 Win”;
  • State::DrawGame: Play the Draw music; Enable the “Play” button again; Say “Draw game”;

Bridge Between Game UI and Game Board

In order to glue between Game UI and Game Board, I used std::function to help Game Board callback to the GameUI;
Here is the implementation:
In GameBoard (TTTBoard), I defined in the Class definition
  • typedef std::function<void(Ref*, TTTBoard::State)> TTTBoardCallback; // the type of the function
  • void setBoardListener(const TTTBoardCallback &callback);  // use
and when the GameBoard detected State change, will call “mGameEndListener(this, returnState);” to tell the object which is listening to;
In Game UI (TTTUILayer), it need to do two things:
1. Set the BoardListener, the code will like this:
auto parent = this;
board->setBoardListener([parent](Ref *, TTTBoard::State state) {
2. Define handleBoardState to handle different game state told by GameBoard
void TTTUILayer::handleBoardState(TTTBoard::State state)
     switch (state) {
          // Handling of ending case
          case TTTBoard::State::DrawGame:


 When making this TicTacToe Game, I learnt that need to breakdown the game into the following aspect:
  • What are the components to be created
  • What are the behaviours of these components
  • How they interact with other components or the system components such as TouchListener, Sound, …

One thought on “Tic Tac Toe: Game Coding

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s