TicTacToe: A Qt quick approach to the classic game

Finally something interesting on (mostly) Boring Talk :P. In this blog post I am going to write about a new application that I developed. Its TicTacToe, the classic board game of Xs and Os , one that doesn’t involve a lot of strategy or time but is fun to play nonetheless. I developed it using Qt Quick which is basically QML integrated with Qt code.  The reason why I chose TicTacToe was simple. Although I know Qt Quick, I haven’t done any serious app development using it , so I was looking for something which would be simple to develop but would involve some complex interactions among the User Interface and the code

TicTacToe allows one to play TicTacToe with the computer where the decision of who moves first is made randomly. Its so because I feel like the player going first has a distinct advantage.. TicTacToe has an undo feature where the user can undo his/her last move and hence the corresponding CPU move is reverted as well. One thing I would admit is that it is a little difficult to beat the CPU at present 😉

Some screenshots of the game:

Default Game Canvas

CPU winning

Human Winning!

Help Image

If someone wants to check it out , its available at http://sourceforge.net/projects/qtquickxo .

Now, I am moving on to how I developed TicTacToe and how it works , in brief (Non Geeks are forewarned)

As we all know designing UIs using QML is a piece of cake. Using QML fluid and intuitive UIs can be developed with very less effort. It didn’t take me long to design the basic interface of the game. But once it was done, I was faced with the task of writing the game logic i.e. how the game would react to the user interactions. I decided to write an AI class which would handle all the tasks of calculating which position to mark on the board. It models the board using a 3×3 matrix denoting vacant positions by -1, computer played positions by 0 and human played positions by 1. It has several methods at its disposal which helps it to calculate an optimum return move. Initially I thought of going through some generic algorithms for TicTacToe and implement them in my AI class methods but as it was only a 3×3 board , and as I was focusing on the human computer interactions, I decided to go with the brute force approach. The AI logic primarily goes through the following steps in order to calculate the optimum move.

1. It checks whether it can win in the current move.

2. If not , it checks whether the other player can win in his next move, if so it blocks the move

3. If none of the above are found then it checks whether the other player is trying to create a ‘fork’ i.e. whether the player is creating such a position on the board, where he can win by using two possible moves, thereby ensuring he will win the round.

4. If none of the above are true, the computer picks an empty place on the board and moves there.

The above conditions are checked using simple pattern matching between sets of three positions.

After writing the class, I tested it out by writing some sample code where I could test whether the AI logic is working using console input output.

When the class was finally ready , I set out to integrate the Qt code with QML (Qt Quick in essence). I integrated some JavaScript functions with the QML code to handle the various events that occurred on the canvas. There are events on setting  a particular position to X or O as per the play, code to decide when the board is full and hence the game is a draw, calling the AI class methods etc.  Integrating both the parts , finally TicTacToe was ready.

It took me aruond four days which included classes, interruptions from friends and delays due to the unstable internet connection at my hostel. Considering the above , I think, my first Qt Quick app got written in pretty good time :).

There are still some things missing in TicTacToe. The first and foremost thing is lack of proper documentation. I plan to add it very soon. I would also like to add a clock which would show how long the current round has been going on.

I have plans to add a LAN multiplayer feature too but thats for later on.

That’s all for today (rather tonight ) folks


4 thoughts on “TicTacToe: A Qt quick approach to the classic game

  1. Nice one; it looks like you did a good job with this. One small point, though: TicTacToe (Naughts and Crosses here in the UK) is a “solved” game, which means that every possible combination of moves has been mapped, and it’s possible to code a perfect AI that simply looks up the “correct” move for a given board state. This rather takes away the fun, though, because if neither player makes any mistakes, this game will always result in a draw 😦

    • Ya, it is sometimes the case, but it is possible to beat the AI here. It might be a little tough, but possible. I plan to introduce a difficulty setting in the game which would allow the user to choose the difficulty setting. The code for the AI class would be modified a bit too to incorporate this feature

  2. Generally I don’t learn article on blogs, but I would like to say that this write-up very pressured me to take a look at and do it! Your writing taste has been surprised me. Thank you, very great article.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s