Git Product home page Git Product logo

tic-tac-toe-js's Introduction

Tic-Tac-Toe-JS

Table of Contents

  1. About
  2. Features
  3. Main Functions and Methods
  4. Gettings Started
  5. How to Play
  6. Contributing

About

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.

Features

  • 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.

Main Functions and Methods

  1. Gameboard Manages the state and functionality of Tic Tac Toe board.

    • getBoard(): Returns the current state of the game board as an array of Cell 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, returning true if so, and false otherwise.
  2. 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.
  3. 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.
  4. 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.

Getting Started

Prerequisites

  • A modern web browser that supports JavaScript.
  • Basic understanding of HTML, CSS, and JavaScript.

Installation

  1. Clone the repository:
    git clone https://github.com/MclPio/Tic-Tac-Toe-JS
    
  2. Navigate to the project directory:
    cd Tic-Tac-Toe-JS
    
  3. Open index.html in your browser to start the game.

How to Play

  1. Enter the names of the two players in the provided input fields.
  2. Click "Start" to begin the game.
  3. Player 1 (X) and Player 2 (O) take turns clicking on the cells of the grid to place their tokens.
  4. The game will automatically check for a winner or a tie after each move and update the display accordingly.
  5. The score is updated after each game, and players can click the "Reset" button to start a new game.

Contributing

Contributions are welcome! To contribute:

  1. Fork the repository.
  2. Create a new branch for your feature or bugfix:
    git checkout -b feature-name
    
  3. Commit your changes:
    git commit -m 'Describe your feature or fix'
    
  4. Push to your branch:
    git push origin feature-name
    
  5. Create a pull request explaining your changes.

tic-tac-toe-js's People

Contributors

mclpio avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.