Step 2: Adding constructor and drawing methods

To add the constructor and the drawing methods to the project, do the following:

1. Replace the already existing constructor in tictactoe.cpp with the following code:

   TicTacToe::TicTacToe(QWidget *parent) : QWidget(parent) { clearBoard(); winner = Nobody; turnNumber = 0; setWindowTitle(tr("Tic-Tac-Toe")); }

   Select All

   The Select All button is included with all code blocks to help you move the code into your project.

2. The method paintEvent calls the drawing methods. In this example, the drawing methods draw the game board and either crosses or noughts after each move. Replace the method paintEvent in tictactoe.cpp with the following code:

   void TicTacToe::paintEvent(QPaintEvent* /* event */) { drawTable(); drawCrossesAndNoughts(); }

   Select All

3. The method drawTable draws the game board. Replace the method drawTable in tictactoe.cpp with the following code:

   void TicTacToe::drawTable() { QPainter painter(this); // Set color and width to the painter painter.setPen(QPen(Qt::red, 3.0)); painter.drawLine(cellWidth(), 0, cellWidth(), height()); painter.drawLine(2 * cellWidth(), 0, 2 * cellWidth(), height()); painter.drawLine(0, cellHeight(), width(), cellHeight()); painter.drawLine(0, 2 * cellHeight(), width(), 2 * cellHeight()); }

   Select All

4. The drawCrossesAndNoughts and cellRect methods add crosses and noughts to the board. Replace the drawCrossesAndNoughts and cellRect methods in tictactoe.cpp with the following code:

   void TicTacToe::drawCrossesAndNoughts() { QPainter painter(this); // Set color and width to the painter painter.setPen(QPen(Qt::blue, 4.0)); for (int row = 0; row < 3; ++row) { for (int column = 0; column < 3; ++column) { QRect r = cellRect(row, column); if (board[row][column] == Cross) { // Draw Cross painter.drawLine(r.topLeft(), r.bottomRight()); painter.drawLine(r.topRight(), r.bottomLeft()); } else if (board[row][column] == Nought) { // Draw Nought painter.drawEllipse(r); } } } }

   Select All
   QRect TicTacToe::cellRect(int row, int column) const { const int HMargin = width() / 20; const int VMargin = height() / 20; return QRect(column * cellWidth() + HMargin, row * cellHeight() + VMargin, cellWidth() - 2 * HMargin, cellHeight() - 2 * VMargin); }

   Select All

5. Compile the project by selecting Build > Build Project "TicTacToe". If there are no errors, you can run the program by selecting Build > Run. An empty tic-tac-toe board will appear.

   
   

If the application is not working properly, download and use this tictactoe.cpp file; all of the methods used in this section can be found there.