“CrossTheGame” Inspired by C++ and Qt




“Cross the Game” is a multiplayer game written in Qt framework 5.5.1 with C++.  It can run on Windows, Mac and Linux platforms without any issues. Most of the code base is not platform specific. The platform specific code has been nested with #if statements to make sure the program works in other platforms.


Qt Creator 3.5.1 has been used to make the GUI. Below describes the UI elements and their workload. To see the real-world application on the GUI, please refer the section 2 of this document. In this section, only technical implementation of elements has been discussed.

Figure 1 – Main Screen


Description of the elements in Figure 1:

1 – This element is a GIF which animates 5 seconds in loop. QMovie object has been created by passing the GIF image directory to the constructor. And then resized according to the QLabel created. To make it an animation, it has been assigned to the QLabel with the setMovie method.

2 – Background image has been declared as a QPixmap and then created a QPalette to assign it to the view. The window is a QWidget as it does not need to have a menu bar on top. The widget has some constraints to have a fixed size in Windows and Other platforms.

3 – All are non-dynamic QLabels which has specific style properties to change the colour to white as the background should be in contrast with the QLabel content.

4 – QLineEdit elements has been used to capture the inputs of the user. The font size has been raised over the other elements as these should get highlighted. Signal is emitting whenever the text changes, result in setting the player name in the upcoming form. The setPlayerX(QString) functions in the playpage.cpp will trigger as the slot.

5 –  QIcon has been assigned to the “Play Now” button. When the user clicks on this, it will check name input anomalies first. And then redirect to the Play Screen.

Figure 2 – Gameplay


Description of the elements in Figure 2:

6 – The player name is assigned by the setPlayerX(QString) slot.

7 – The Vegetable symbols are assigned per player number chosen in the main screen. A PNG image has been assigned as the pixmap for the QLabel. The 6thelement and the 7thelement is placed inside a QVBoxLayout.

8 – This is a QPushButton which changes its QIcon based on the user clicks. When the user clicks on an empty box, its QIcon will change by recording who clicked what on a EventHandlePlayPage object.  Based on the previous clicks, the program knows what QIcon should be displayed. E.g. If someone won, clicking a box will not impact anything. All the horizontal boxes are placed inside 3 QHBoxLayouts and all of them are placed inside a QVBoxLayout.

9 – Whenever user clicks on a box at first, the timer starts and displayed in the QLCDNumber. The timer ends if either someone win the game or become draw. To calculate the time, a QElapsedTimer object has been created and started upon the user clicks on it for the first time. And also a QTimer object has been created to make its timeout() emits as the signal for the QElapsedTimer to obtain the elapsed time and display in 1 second intervals.

10 – The status shows what is going on at the moment. If the user has not won or draw, it will display the value as “Pending…”. If player wins, it will display “[Name Of The Player] Won”. If the game becomes draw, it will display the status as “Draw”. The function responsible for displaying the relevant status is togglePlayerChance(). It runs every time whenever user clicks on a box.

11 – This shows which player has got the chance to click on a box. This will toggle based on the togglePlayerChance().


Figure 3 – After Winning


12- The New Game Button will redirect the player to the main screen where they can play a complete new game without any saved content. (same as resetting the game). In figure 1.2.3, the 12thelement (New Game With Same Players Button) appears only when someone won the game or draw. Clicking on it will redirect to the main page while preserving the player names. In here it will open the page by calling the custom made constructor in the MainPage which accepts two QString values.


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