Dragons vs Unicorns

Overview

Welcome to a magical world where Dragons and Unicorns bring a fresh twist to classic Tic-Tac-Toe! This project showcases a fun, interactive web-based game where mythical creatures battle for supremacy on a 3x3 grid. Players take turns placing their symbols (Dragons or Unicorns) on the board, aiming to get three in a row horizontally, vertically, or diagonally. The game features an AI opponent powered by the minimax algorithm, providing a challenging single-player experience.

This is a small demo project where I wanted to embed some AI magic into a simple game for fun. While exploring minimax algorithms and game theory, I thought it would be more engaging to replace the traditional X's and O's with magical creatures. Feel free to fork the repository and create your own version. If you have any questions, please reach out to me via email.

For more details about the development process and insights into the AI implementation, check out my blog post: Dragons vs Unicorns (Part I) - HTML and CSS

Features

• Interactive game board
• AI opponent using minimax algorithm
• Interactive game board with responsive design
• Win and draw detection
• Option to restart the game

Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, or Edge)
• Basic understanding of HTML, CSS, and JavaScript

Installation

1. Clone the repository:

   git clone https://github.com/pedropcamellon/dragons-vs-unicorns.git

2. Navigate to the project directory:

   cd dragons-vs-unicorns

3. Open the index.html file in your preferred web browser.

How to Play

1. Open the game in your web browser.
2. The game starts with the Unicorn player (human) making the first move.
3. Click on an empty cell in the board to place your creature
4. The AI (Dragon) will automatically make its move after you.
5. Continue taking turns until one player wins or the game ends in a draw.
6. Click the "Play Again" button to start a new game.

Project Structure

• index.html: The main HTML file containing the game's structure.
• styles.css: CSS file for styling the game.
• index.js: JavaScript file containing the game logic and AI implementation.

Technical Stack

• Frontend: HTML5, CSS3, JavaScript
• AI Brain: Minimax algorithm with alpha-beta pruning
• Game Engine: Pure JavaScript

AI Magic

Our AI opponent uses advanced minimax algorithm with alpha-beta pruning to make strategic decisions, ensuring an engaging and challenging experience for players of all skill levels.

Contributing

This is a small demo project for learning purposes only. While I'm not accepting pull requests, feel free to fork the repository and create your own version. If you have any questions, please reach out to me via email. Thank you!

License

This magical creation is licensed under the MIT License.