Tic Tac Toe game using Flutter
player vs bot (first move: player)

Game Programming Logic:
Assumptions:
Game Players: Human (Player - ‘X’) vs Program (Bot - ‘O’)
Difficulty Level: Medium
First Move: Player - ‘X’
Bot's Outcome: Win, Lose or Draw.

Mobirise
Mobirise

Bot Logic:

    Here bot has to perform 4 functions – Block, Random, Continue, and Win, in the order
       1. Random. (Randomly place bot's first move. Since we have chosen difficulty level medium, in other words not choosing the best (first) move based on the player’s (‘X’) first move.)
       2. Win. (Bot going for a winning move)
       3. Block. and, (Bot blocking Player (X) from winning)
       4. Continue. (Bot continuing the game since there is no Win or Block)

The task for you:
1. To find out why we are following this order?
2. To find the bot’s best first moves?

Bot – Win:

    Let us consider bot – Win:
    For bot – win we need to check conditions for all the 9 cells, for example, let us consider cell number 11. For a bot to win by placing ‘O’ here, three conditions or combinations have to be checked.
       1. - (11, 12, 13), Whether bot has already marked ‘O’ at cells 12 and 13. or
       2. - (11, 21, 31), Whether bot has already marked ‘O’ at cells 21 and 31. or
       3. - (11, 22, 33), Whether bot has already marked ‘O’ at cells 21 and 31.
    if anyone is satisfied then the bot wins. Similarly, all the cells are checked.

The task for you:
Write conditions for other cells.

Bot – Block:

    Let us consider bot – Block:
    For bot – block we need to check conditions for all 9 cells, for example, let us consider cell number 22. For the bot to block by placing ‘O’ here, four conditions or combinations have to be checked.
       1. - (12, 22, 32), Whether the player has already marked ‘X’ at cells 12 and 32. or
       2. - (21, 22, 23), Whether the player has already marked ‘X’ at cells 21 and 23. or
       3. - (11, 22, 33), Whether the player has already marked ‘X’ at cells 11 and 33. or
       4. - (13, 22, 31), Whether the player has already marked ‘X’ at cells 13 and 31.
    if anyone is satisfied then the bot blocks the player’s win. Similarly, all the cells are checked.

The task for you:
Write conditions for other cells.

Bot – Continue:

   Let us consider bot – Continue:

   For bot – Continue ‘O’ is placed next to a bot-filled cell. For example: if the bot has occupied cell 21 the next empty cell will be searched surrounding it. i.e., at 11, 12, 22, 32, or 31, and ‘O’ is placed.

The task for you:
Check possibilities for other cells in empty rows, columns, or diagonals.

Flutter:

    Now, Let us build a Tic-Tac-Toe application using Flutter.

Mobirise

File Structure for the Project.

    The project consists of the following files.
       - routes.dart
       - routes_models.dart
       - style.dart
       - constants.dart
       - mixins.dart
       - launch_pad.dart (home page)
       - launch_pad_model.dart (home page)
       - main.dart

Mobirise

main.dart

main.dart consist of main( ) method which consists of runApp( ) function, TicTacToe class extends StatelessWidget and returns MaterialApp with
- theme: to provide app theme, ThemeData is returned from class Style - style.dart.
- initialRoute: to provide the initial route, route details are returned from class Routes - routes.dart.

Mobirise

style.dart

style.dart consists of class Style which returns ThemeData. ThemeData provides themes for the app Widgets such as appBar, elevatedButton, text, icons. 

Mobirise

routes.dart

routes.dart consists of class Routes that return routes to the initial screen of the app. 

Mobirise

routes_models.dart

model class for route class.

Mobirise

constants.dart

Gives constant values.

Mobirise

launch_pad_model.dart

model class for launchpad class

Mobirise

launch_pad.dart
(home page)

launch_pad.dart consists of class LaunchPad which extends StatesfulWidget.

Mobirise

Turn Text Widget

Whose turn to play?
Displays turns - player or bot

Mobirise

Table Widget

Creates tic-tac-toe table

Mobirise

Table Cell

When the player taps on the cell, (X) - (Icons.cancel) icon is displayed.

Mobirise

Result Text Widget

Who won?
Result message is displayed
   - Draw
   - Win
   - Lose

Mobirise

Delay method

This method delays the bot's move by a second after the player makes his move.

Mobirise

Bot method

Bot Method  has to perform 4 functions – Block, Random, Continue, and Win, in the order
1. Random. (Since we have chosen difficulty level medium, in other words not choosing the best (first) move based on the player’s (‘X’) first move.)
2. Win.
3. Block. and,
4. Continue.
It also checks for game outcomes (Result) - Win, Lose and Draw.

Mobirise

Bot Place method

place method changes the icon, and icon color and also checks for the result when called. 

Mobirise

Game Reset method

Reset method - resets game by reassigning values of icons, color, count, placeValue and other Boolean variables to its initial state. Reset method is called when reset button is pressed.

Mobirise

Player Result Check mixin

Checks for player's win. Every time Crosses 'X''s or 'O''s are placed placeValue list is added with integer values 1 (for 'X''s)or 5 (for 'O''s).
placeValue[0] is mapped with cell 11,
placeValue[1] is mapped with cell 12,
placeValue[2] is mapped with cell 13,
placeValue[3] is mapped with cell 21,
placeValue[4] is mapped with cell 22,
placeValue[5] is mapped with cell 23,
placeValue[6] is mapped with cell 31,
placeValue[7] is mapped with cell 32,
placeValue[8] is mapped with cell 33 of the table respectively.
Players are declared a winner if row, column, or diagonal cells is filled with integer value 1 in corresponding places of placeValue list.


Mobirise

Draw Check mixin

Checks for a draw by adding placeValue lists integer values. Every time Crosses 'X''s or 'O''s are placed placeValue list is added with integer values 1 (for 'X''s)or 5 (for 'O''s).
placeValue[0] is mapped with cell 11,
placeValue[1] is mapped with cell 12,
placeValue[2] is mapped with cell 13,
placeValue[3] is mapped with cell 21,
placeValue[4] is mapped with cell 22,
placeValue[5] is mapped with cell 23,
placeValue[6] is mapped with cell 31,
placeValue[7] is mapped with cell 32,
placeValue[8] is mapped with cell 33 of the table respectively.
If there is one cross ('X') and two noughts ('O'), the sum will be equal to 11. 
If there are two crosses ('X') and a nought ('O'), the sum will be equal to 7.
If there are one cross ('X'), one noughts ('O') and an empty cell, the sum will be equal to 6.
Win outcome won't be possible under these circumstances drawCount variable is incremented after checking for each row, column, or diagonal.
Thus the result is calculated for Draw.

Mobirise

Bot First mixin

Bot'sFirst mixin is used to determine the bot's first move.
The first for-loop determines the cell number of the player's first move and based on this bot's first move is placed randomly in the second for loop.
Note: Second for-loop is used to make sure that the random number generated is not the same as the player's first move.

Mobirise

Bot Win mixin

Computes for bot's 'O' winning move. Every time Crosses 'X''s or 'O''s are placed placeValue list is added with integer values 1 (for 'X''s)or 5 (for 'O''s).
placeValue[0] is mapped with cell 11,
placeValue[1] is mapped with cell 12,
placeValue[2] is mapped with cell 13,
placeValue[3] is mapped with cell 21,
placeValue[4] is mapped with cell 22,
placeValue[5] is mapped with cell 23,
placeValue[6] is mapped with cell 31,
placeValue[7] is mapped with cell 32,
placeValue[8] is mapped with cell 33 of the table respectively.
If there are two noughts ('O') in a row, column, or diagonal, this method returns the placeValue of the third cell to the Bot method and the third nought ('O') is placed at this cell for a Bot win. If Bot win is not possible method returns a value of 10.

Mobirise

Bot Continue mixin

If bot-win or bot-block moves are not possible then the bot continue method is executed to proceed with the bot's 'O' next move.   For bot – Continue ‘O’ is placed next to a bot-filled cell. For example: if the bot has occupied cell 21 the next empty cell will be searched surrounding it. i.e., at 11, 12, 22, 32, or 31, and ‘O’ is placed.

Mobirise

Bot Block mixin

Computes for bot's bocking move - blocks player 'X' from winning. Every time Crosses 'X''s or 'O''s are placed placeValue list is added with integer values 1 (for 'X''s)or 5 (for 'O''s).
placeValue[0] is mapped with cell 11,
placeValue[1] is mapped with cell 12,
placeValue[2] is mapped with cell 13,
placeValue[3] is mapped with cell 21,
placeValue[4] is mapped with cell 22,
placeValue[5] is mapped with cell 23,
placeValue[6] is mapped with cell 31,
placeValue[7] is mapped with cell 32,
placeValue[8] is mapped with cell 33 of the table respectively.
If there are two crosses ('X') in a row, column, or diagonal, this method returns the placeValue of the third cell to the Bot method and thus blocks players' win by placing nought ('O') at this cell. If the block is not possible returns a value of 20.

Mobirise

Text Updating mixins

These mixins update text widgets by setting appropriate Boolean values for the ternary operator.

Mobirise

Text mixin

Displays the appropriate message according to the conditions set by Boolean variables.

Mobirise

Snippet Class

class for mixins.

Mobirise

assets and fonts

Fonts are stored in the assets folder (project folder -> assets folder) and these lines of code are added in pubspec.yaml file. 


Note:
1. The `TextTheme` API was originally based on the original material (2014) design spec, which used different text style names. In 2018 Text styles were replaced by 2021 Text styles

All weights are given below.

The 2021 - Text styles

NAME                         SIZE    
displayLarge 
           57.0        
displayMedium       45.0        
displaySmall            36.0          
headlineLarge         32.0          
headlineMedium    28.0          
headlineSmall         24.0           
titleLarge                  22.0          
titleMedium            16.0           
titleSmall                 14.0           
labelLarge               14.0           
labelMedium          12.0           
labelSmall               11.0            
bodyLarge               16.0          
bodyLarge               14.0            
bodyLarge               12.0             

The 2018 - Text styles (Now Deprecated)

NAME                       SIZE             
headline1                96.0             
headline2                60.0            
headline3                48.0           
headline4                34.0          
headline5                24.0            
headline6                20.0         
subtitle1                  16.0         
subtitle2                  14.0   
body1                      16.0           
body2                      14.0      
button                     14.0        
caption                    12.0          
overline                   10.0          


Page updated in: December 2022

Contact Details :---             
WhatsApp Number: +91 97422 63639              Telegram Number:  +91 97422 63639    
Mobile Number: +91 97422 63639              email id: contact@drdhajnana.com
Privacy Policy       Terms of Service
vtree.co.in

Built with ‌

Mobirise