An open API service indexing awesome lists of open source software.

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

Dragons vs Unicorns reimagines Tic-Tac-Toe with mythical creatures. Challenge an AI opponent using minimax algorithm, or play against friends. A demo project built with HTML5, CSS3, and JavaScript to showcase game theory concepts.
https://github.com/pedropcamellon/dragons-vs-unicorns

ai css3 html5 javascript javascript-game javascript-vanilla minimax-algorithm

Last synced: about 1 month ago
JSON representation

Dragons vs Unicorns reimagines Tic-Tac-Toe with mythical creatures. Challenge an AI opponent using minimax algorithm, or play against friends. A demo project built with HTML5, CSS3, and JavaScript to showcase game theory concepts.

Awesome Lists containing this project

README

          

# 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](https://pedropcamellon.notion.site/Dragons-vs-Unicorns-Part-I-HTML-and-CSS-11854742cee9800c852bfc628fc1bea1?pvs=4)

## 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:

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

2. Navigate to the project directory:

```bash
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.