Giter VIP home page Giter VIP logo

tictactoe's Introduction

Tic Tac Toe Game

Overview

This project is part of a programming learning journey in The Odin Project JavaScript Full Stack course, focusing on building a Tic Tac Toe game to practice JavaScript and DOM manipulation. The objective is to create an interactive and dynamic game that can be played in the browser.

Project Overview

The Tic Tac Toe game is implemented using HTML, CSS, and JavaScript. The project follows the principles of modular JavaScript and emphasizes organizing code into factories and modules to achieve a clean and maintainable codebase.

Features

  • Dynamic rendering of the game board, player turns, and results using JavaScript.
  • Object-oriented approach with factories for GameBoard, Player, and Controllers.
  • Implementation of different game modes, including a computer player for single-player mode.
  • Responsive design for a seamless gaming experience on various devices.

Project Structure

The project is structured into several modules to encapsulate different functionalities:

  • GameBoard Module (GameBoard): Manages the state of the game board.
  • Player Factory (Player): Creates player objects with names and marks.
  • Game Controller Module (GameController): Controls the flow of the game and implements game logic.
  • Computer Player Module (ComputerPlayer): Implements logic for the computer player in single-player mode.
  • Display Controller Module (DisplayController): Handles the display and DOM logic for rendering the game board and interacting with players.

Technologies Used

  • HTML
  • CSS
  • JavaScript (ES6)

Running the Game

  1. Open the live demo in a web browser.
  2. Choose game mode (human vs. human or human vs. computer).
  3. Click the "Start Game" button.
  4. Players take turns clicking on the board to place their marks.
  5. The game ends when a player wins or there is a tie.
  6. Click the "Restart Game" button to play again.

Additional Notes

  • The project aims to provide a practical application of JavaScript concepts, including modules, factories, and game logic.
  • Follows a modular and organized code structure to enhance readability and maintainability.
  • Explore the different game modes, including a computer player with varying difficulty levels.

Live Demo

You can view a live demo of the project here.

Feel free to explore, play, and enhance the project further! If you have any questions or feedback, refer to the code comments and documentation for guidance. Enjoy the game!

tictactoe's People

Contributors

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