Creating Tic-Tac-Toe Game on a 3.5" TFT LCD Display with Arduino (Part 6 of 6)

These lines include the libraries necessary to drive the display, touchscreen as well as the constants.h file. The process to install and use these libraries was shown in the first and second parts of this series.

These lines include the creation of the tft and ts objects, which are used to drive the display and touchscreen respectively on the ILI9486 LCD Shield. These lines also include the declaration of the following variables -

The constants NONE, CROSS and NAUGHT are declared in the constants.hfile and are simply aliases for integer values.

The setup function initializes the Serial and tft objects and fills the display black to clear it. It then calls the drawMenu andupdateMenu functions to draw the menu and wait for the user to select a piece. Once the selection is made, the updateMenu function returns and the screen is cleared again. Finally, the grid is draw using the drawGrid function. There is a short delay added between clearing the screen and drawing the grid to reduce abruptness.

The loop function starts by checking whose turn it is (the user or the Arduino). The variable turn stores the piece that should move in the current iteration while the variable player stores the piece that the player controls. player is assigned a value at the start of the game when the user makes a selection, while turn is toggled after every iteration of the loop, with an initial value of CROSS. If the two match, then it is the player's turn, otherwise it is the Arduino's.

When it is the Arduino's turn, an empty cell is randomly selected and the piece is placed on it. When it is the player's turn, the function waits for a touch input to be made on an empty cell of the grid, which will be used to place the piece.

After the piece is placed (and the display updated), the winning condition is checked using the getWinner function, which also returns the winning player. If this condition is met, then thedrawWinner function is used to declare the winning piece and player on the display, and the program is halted using an infinite loop.

If the winning condition is not met, then the getTie function is used to check if the grid is completely filled. If this is true then the drawTie function is called to declare the tie on the display, and an infinite loop is used to halt the program.

If neither condition is met, then the value of turn is toggled using the expression turn = NAUGHT + CROSS - turn. This line works because it subtracts the current value of turn (either CROSS or NAUGHT) from the value NAUGHT + CROSS. This achieves the net effect of switching the value of turn. Recall that NAUGHT and CROSS are integer constants declared in the constants.h file.

The in_range function accepts three arguments and checks if the first value (called value) lies between the next two (called lo and hi).

The above lines include helper functions to drive the touchscreen. The valid_touch function returns true if a touch is occurring. The get_touch function reads the touch coordinates and stores them in the variables given to it. The convert function converts the coordinates from touchscreen coordinates to pixel values. Finally, the to_display_mode function resets the pins shared by the display and touchscreen back to outputs after the touchscreen is used.

The detailed explanations for these functions was given in the second part of this series. The functions require the touchscreen to be calibrated, which was also explained in the second part of this series.

These lines include functions to draw shapes such as thick horizontal and vertical lines, thick slanted lines and the O and X shapes.

The thick horizontal and vertical lines (drawn with thedrawThickHLine and drawThickVLine functions) are used while drawing the grid lines as well as highlighting a complete row or column. They are drawn as filled rectangles with filled circles at each end to round off the edge.

The thick diagonal lines (drawn with are used to highlight a complete diagonal). They are drawn as multiple regular lines with filled circles at each end to round off the edge.

The O is drawn using two concentric circles. A large filled circle is first drawn and a smaller black circle is drawn inside it to create a thick ring.

The X is drawn using using a rounded rectangle and 4 triangles. A large filled rounded rectangle is drawn and 4 filled triangles are drawn inside it, with their base aligned with the edges and the top pointing towards the center. The triangles are colored black and result in a thick X being drawn.

These lines include functions to draw the various widgets used in the program. The drawMenu and drawMenuItem functions are used to draw the piece selection menu and the options respectively. Each option is drawn as a rectangle with text inside it.

The drawGrid function draws the grid using 4 lines (2 vertical lines to make 3 columns, and 2 horizontal lines to make 3 rows).

The drawWinner and drawTie functions are used to draw the winner and draw screens respectively.

These lines include the updateMenu function, which is responsible for handling the selection of the piece by the user. It contains a single loop, which starts with getting the location of the touch. If the location of the touch lies within one of the options, the variable player is assigned the value of the option and the program breaks out of the loop. If not, the loop continues until the break condition is met.

These lines include the getWinner and getTie functions, which are used to check if a player has won or the game has ended in a draw. The getTie function is the simpler of the two and simply returns true if the number of moves is equal to 9, and false otherwise. This condition is sufficient to determine if the game has ended in a draw, because it is guaranteed that an empty cell becomes occupied after each move, and that after 9 moves all empty cells are occupied. If neither player wins before this, then the game has indeed ended in a draw.

The getWinner function is a little longer, and checks each row, column and diagonal for the winning condition. First, a loop runs over the columns (vertical groups). In each iteration, if the first cell is not empty, and the values of the three cells are the same, then the function returns the value of the top cell of the current row (which can be either CROSS or NAUGHT). This process repeats for the rows (horizontal groups) as well. Finally, the two diagonals are checked in a similar fashion, and if no condition is met then the function returns NONE, to indicate that neither player has won the game yet.