The project's goal is to create a Tic Tac Toe game using JavaScript, following the principles of the Factory Function pattern and Immediately Invoked Functional Expressions (IIFE) for modular design. This approach encapsulates functionality and minimizes global variables.
- Modular Design: Uses IIFE and factory functions to keep code organized and avoid global variable pollution.
- Interactive Gameplay: Users can play Tic Tac Toe against another player.
- Responsive UI:: The game interface adjusts to different screen sizes.
- Live Score Updates: Keeps track of player scores across games.
-
Gameboard
Manages the state and functionality of Tic Tac Toe board.getBoard()
: Returns the current state of the game board as an array ofCell
objects.insertToken(idx, playerToken)
: Inserts the player's token at the specified index on the board.printBoard()
: Prints the current state of the game board to the console, helpful for debugging.stepsLeft
: Checks if there are any empty cells left on the board, returningtrue
if so, andfalse
otherwise.
-
Cell
Represents a single cell on the game board.addToken(player)
: Assigns the player's token to the cell.getValue()
: Retrieves the current value of the cell, which can be a player's token or an empty state.
-
Gamecontroller
Controls the flow of the game, including player turns and win conditions.setUp()
: Initializes the game setup, including player name input and starting the game.- Other Methods: Contains internal methods for managing player input, checking win conditions, and handling game continuation or reset.
-
displayController
: Handles the user interface and announcements.updateButtons(boardObj)
: Updates the button elements on the UI to reflect the current game board state.announceTurn(playerName)
: Displays whose turn it is on the UI.setScoreNames(players)
: Updates the UI with the names of the players.updateScore(players)
: Updates the score display on the UI.announceResults(message)
: Announce the result of the game, such as a win or a tie, on the UI.
- A modern web browser that supports JavaScript.
- Basic understanding of HTML, CSS, and JavaScript.
- Clone the repository:
git clone https://github.com/MclPio/Tic-Tac-Toe-JS
- Navigate to the project directory:
cd Tic-Tac-Toe-JS
- Open
index.html
in your browser to start the game.
- Enter the names of the two players in the provided input fields.
- Click "Start" to begin the game.
- Player 1 (X) and Player 2 (O) take turns clicking on the cells of the grid to place their tokens.
- The game will automatically check for a winner or a tie after each move and update the display accordingly.
- The score is updated after each game, and players can click the "Reset" button to start a new game.
Contributions are welcome! To contribute:
- Fork the repository.
- Create a new branch for your feature or bugfix:
git checkout -b feature-name
- Commit your changes:
git commit -m 'Describe your feature or fix'
- Push to your branch:
git push origin feature-name
- Create a pull request explaining your changes.