Welcome to XOXO.array! This isn't just your classic Tic-Tac-Toe. It's a modern, web-based version built from the ground up with a focus on a clean user experience, advanced features, and an intelligent AI opponent.
The main goal was to create a polished and enjoyable game using vanilla JavaScript, showcasing how powerful array manipulation can be for managing game logic, state, and even AI decision-making. I started this project as a way to dive deep into front-end fundamentals and build something fun and challenging. I hope you enjoy playing it as much as I enjoyed building it!
Here are some of the cool things this project can do:
- Single Player vs. AI: Challenge a smart AI opponent that uses a Minimax algorithm to make strategic moves.
- Two-Player Mode: Play against a friend in a classic local multiplayer match.
- Dynamic Light/Dark Theme: Automatically detects your system preference and allows you to toggle between light and dark modes.
- Real-Time Game Stats: Keep track of the score, current player, total moves, and game duration with a live-updating dashboard.
- Move History & Undo: Review the history of every move made and undo the last action if you make a mistake.
- Customizable Player Names: Personalize the experience by setting custom names for Player X and Player O.
- Responsive Design: Enjoy a seamless experience on any device, from mobile phones to desktop monitors.
Getting this project up and running is as simple as it gets. No complex builds or dependencies needed!
-
Clone the repository
git clone [https://github.com/cikeyz/xoxo-array.git](https://github.com/cikeyz/xoxo-array.git) cd xoxo-array -
Open in your browser
- Simply open the
index.htmlfile in any modern web browser.
- Simply open the
And that's it! You're ready to play.
Using the game is intuitive:
- To start a new game: Click the "New Game" button at any time.
- To play against the AI: Toggle the "Single Player Mode" switch on the right panel. The game will automatically assign "AI" as Player O.
- To play with a friend: Ensure "Single Player Mode" is off. Both players can enter their names in the input fields.
- To change the theme: Use the "Dark Mode" toggle to switch between light and dark themes. Your preference will be saved for your next visit.
This project was built with a focus on fundamentals, using a few key technologies and a whole lot of coffee.
- Frontend: HTML5, CSS3, and modern JavaScript (ES6+)
- Core Logic: Array-based data structures for game state, move history, and AI logic.
- AI Algorithm: Minimax with Alpha-Beta Pruning and strategic position evaluation.
- Styling: Custom CSS variables for dynamic theming.
- Storage: Browser LocalStorage for persisting the user's theme preference.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Found a bug? Don't worry, we all create them. Just open an issue and I'll take a look!
This project is distributed under the MIT License. See LICENSE.txt for more information. It's pretty permissive, so you can do almost anything you want with it.
Carl Kristian (CK) Ortiz
- GitHub: @cikeyz
- LinkedIn: ck-ortiz
- Email: [email protected]