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.
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?
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.
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.
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.
Now, Let us build a Tic-Tac-Toe application using Flutter.
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
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.
style.dart consists of class Style which returns ThemeData. ThemeData provides themes for the app Widgets such as appBar, elevatedButton, text, icons.
routes.dart consists of class Routes that return routes to the initial screen of the app.
model class for route class.
Gives constant values.
model class for launchpad class
launch_pad.dart consists of class LaunchPad which extends StatesfulWidget.
Whose turn to play?
Displays turns - player or bot
Creates tic-tac-toe table
When the player taps on the cell, (X) - (Icons.cancel) icon is displayed.
Who won?
Result message is displayed
- Draw
- Win
- Lose
This method delays the bot's move by a second after the player makes his move.
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.
place method changes the icon, and icon color and also checks for the result when called.
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.
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.
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.
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.
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.
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.
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.
These mixins update text widgets by setting appropriate Boolean values for the ternary operator.
Displays the appropriate message according to the conditions set by Boolean variables.
class for mixins.
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
You can find the source code for the above on github link here.
Related:
- Tic Tac Toe game was developed using Flutter 2022 (Player 1 vs Player 2).
- Tic Tac Toe game was developed using Flutter 2022 (Player vs Bot - bot first move).
Page updated in: December 2022
Built with
Mobirise