Tic Tac Toe Game with Ai opponent

This is a traditional Tic Tac Toe game. You can play this game with a simple Ai opponent

This game is created to solidify my knowledge in JavaScript concepts of Objects, Factory Functions, Closures, Private functions, IIFE (Immediately Invoked Function Expressions), HTML, CSS, User interface design, etc..

Please insert your name and click start to play the game

Technical info for Software Engineers

Tech Stack: JavaScript, HTML and CSS

Source Code available on GitHub or you can inspect the code using Firefox or Chrome Developer tools by right clicking this page and selecting "inspect"

Architecture design and coding by Amal Kariyawasam, 2024 March

Tic Tac Toe Game Architecture

Game Logic

• One Human Player and One AIBot
• 3 x 3 Grid with clickable buttons that are numbered 0,1,2,3,4,5,6,7,8
• Players, play turn by turn and game will be over after maximum of 9 turns either in a draw or in a win
• First player to get 3 of the same mark on a straight line will be the winner before the 9 turn are up according to the following conditions;

Tic Tac Toe Board Coordinates;

0	1	2
3	4	5
6	7	8

Conditions for wins

Straight Line: All three Row wins:

• 0,1,2 in any combination
• 3,4,5 in any combination
• 6,7,8 in any combination

Straight Line: All three Column wins

• 0,3,6 in any combination
• 1,4,7 in any combination
• 2,5,8 in any combination

Straight Line: All three Diagonal wins

• 0,4,8 in any combination
• 2,4,6 in any combination

Conditions for Tie/Draw

Anything that is not in the above win conditions will be a draw/Tie after all 9 grid slots have been filled

Main Coding rules

• Use Object oriented design to create the game and no global variables, store all the the variables inside factories. Main goal here is to have as little global code as possible.
• If only a single instance of something is required (e.g. the gameboard, the displayController etc.) then wrap the factory inside an IIFE (module pattern) so it cannot be reused to create additional instances.
• Decide on which Objects to store the relevant logic so code is easily maintainable
• First create a working game on the browser console. Test and after making sure the game work start work on the User interface
• Create a User interface which display game status, input player choices, reset game, add player name, show player score

User Interface design (HTML and CSS)

• Game board 3x3 Grid using buttons with HTML id's assigned to grid numbers 0,1,2,3,4,5,6,7,8
• Text Box to Enter Player Name
• Button to Submit Player Name and start a new game

Logic design (JavaScript)

Pseudo Code

1. Game Loaded, check whether game has been run before and choose from the following
2. If it is the first time;
   • Prompt for Player Name
   • When Player clicks submit button store the player name and start the game
3. If Game has been played before;
4. Set following variables to zero: "gameBoard" array
5. Check how many turn numbers have been made, Prompt the Player to make selection on the grid and store the grid location on the "gameBoard" array and player, update the turn number and update the display
6. AiBot will make a calculation and store the grid location on the "gameBoard" array, update the turn number and update the display
7. Keep checking If player or AiBot has fulfilled any of conditions for wins. If winning rules are fulfilled, declare the name of the winner if not keep playing until the end of the 9th turn

Code will be broken up into three Objects as follows for code readability and memory efficiency;

gameMemory: Used only as a memory to store the player positions, player details, player statistics, etc..

• Variables for Player: let playerName=""; let playerWins=0; let playerTurns=[];
• Variables for AiBot const aiBotName="AiBot"; let aiBotWins=0; let aiBotTurns=[];
• Variables to store other data let roundNo=0;
• Object to track whether game board grid is empty or not gameBoard:{1:"null",2:"null",3:"null",4:"null",5:"null",6:"null",7:"null",8:"null",9:"null"}
• Assign a 3x3 grid based naming convention and store it in an boardArray i.e. 0 1 2 3 4 5 6 7 8
• Get the position player has selected and store the value in "playerBoardPosition" of player1 and AiBot to see who won and "gameBoard" so game can keep track of used and free grid slots

gameLogic: Object to control Flow of the game and the logic(Check whether the game has been run before, Check winning condition by comparing values in gameBoardObject, Keep track of number of turns and after 9 turns Game will be Over, decide who will take the next turn)

• Start Game
• Check for Game win
• Check for Game Ties
• Keep track of player and computer Marker (i.e. O X)

displayController: Only function is to check player inputs, then store to the gameMemory and update the display with data stored in the gameMemory to update the HTML DOM and to received user input

• Listen for user clicks in the 9 grids and store them in the GameMemory
• Update the AiBot choices on the display
• Check and display the Game score
• Button to change Player name
• Button to Restart game