Cerito Cruz Vue 3 🎮
December 8, 2024 · View on GitHub
A modern, elegant, and feature-rich Tic Tac Toe game built with Vue 3 + TypeScript
✨ Features
🎯 Core Gameplay
- Modern Interface: Sleek, responsive design with smooth animations
- Multiple Game Modes: Play against AI or challenge a friend locally
- AI Difficulty Levels: Test your skills against different AI strategies
- Theme System: Unlock beautiful themes as you play
- Internationalization: Support for 7 languages
- Statistics & Achievements: Track your progress and earn rewards
- Sound Effects: Immersive audio feedback
- Persistent Progress: Auto-save your achievements and stats
- Easter Eggs: Discover hidden features and themes
🤖 AI Intelligence
🌟 Minimax Algorithm: The Strategic Mastermind
How It Works
- 🔍 Explores ALL possible game outcomes
- 🏁 Predicts moves 3-9 steps ahead
- ⚖️ Calculates best move by minimizing potential losses
- 🛡️ Defends while seeking victory
🚦 Difficulty Levels: Intelligent Adaptation
| Difficulty | Depth | Strategy | Challenge |
|---|---|---|---|
🍃 Easy | 2-3 moves | Exploratory | Beginner-friendly |
⚡ Medium | 4-5 moves | Balanced | Moderate challenge |
🔥 Hard | Up to 9 moves | Near-perfect | Expert level |
🧩 Strategic Scoring System
Key Evaluation Factors
- 🎯 Center control (+15 points)
- 🔺 Corner dominance (+10 points)
- 🛡️ Blocking opponent's lines (+20 points)
- 🏆 Potential winning moves (+25 points)
🎨 Theme Collection
| Theme | Unlock Condition | Description |
|---|---|---|
| 🎨 Default | Available | Classic look |
| 💫 Neon | Win 3 games as X | Vibrant neon aesthetics |
| 🤖 Cyberpunk | Win 3 games as O | Futuristic design |
| 🌌 Galaxy | Play 15 games | Space-inspired visuals |
| 🍭 Candy | Win 5 with each player | Sweet color palette |
| 🌅 Sunset | Play 10 games | Warm, gradient colors |
| 🌿 Nature | Get 3 draws | Organic, earthy tones |
| 🎮 Konami | Secret code | Retro gaming style |
| 🦃 Thanksgiving | Win 5 vs AI | Autumn festival theme |
| 🎃 Halloween | Win 10 vs AI | Spooky aesthetics |
| 🎄 Christmas | Win 15 vs AI | Holiday celebration |
| 🌴 Tropical | Win 7 in Easy | Paradise vibes |
| ⚔️ Medieval | Win 7 in Medium | Classic kingdom style |
| 🚀 Space | Win 7 in Hard | Cosmic adventure |
🌍 Supported Languages
- 🇺🇸 English
- 🇪🇸 Spanish
- 🇫🇷 French
- 🇮🇹 Italian
- 🇩🇪 German
- 🇵🇹 Portuguese
- 🏛️ Latin
🏆 Achievement System
Unlock achievements as you play:
- 🎯 Game Mastery
- X Master: Win 3 games as X
- O Master: Win 3 games as O
- Peacemaker: Achieve 3 draws
- 👑 Experience
- Veteran: Play 10 games
- Expert: Play 15 games
- Balanced: Win 5 with each symbol
- 🤖 AI Challenges
- AI Shooter: Win 5 vs AI
- AI Killer: Win 10 vs AI
- AI Master: Win 15 vs AI
- 🎮 Difficulty Conquests
- Easy Peasy: Win 7 in Easy mode
- Medium Breezy: Win 7 in Medium mode
- Hard as Hell: Win 7 in Hard mode
🛠️ Tech Stack
Frontend
- ⚡ Vue 3 with Composition API
- 📝 TypeScript
- 🎨 Tailwind CSS
- 🔄 Pinia for state management
- 💾 pinia-plugin-persistedstate
- ✨ GSAP for animations
- 🔊 Howler.js for sound system
- 🌐 Vue I18n for internationalization
- 🎭 HeadlessUI for accessible components
- 🎯 VueUse for composition utilities
Development
- ⚡ Vite for blazing fast development
- 📦 NPM for package management
- 🎨 PostCSS for CSS processing
- 📱 Mobile-first responsive design
🚀 Getting Started
Prerequisites
- Node.js 16.0 or higher
- NPM 7.0 or higher
Installation
# Clone the repository
git clone https://github.com/yourusername/tic-tac-toe-vue
# Navigate to project directory
cd tic-tac-toe-vue
# Install dependencies
npm install
# Start development server
npm run dev
Production Build
# Build for production
npm run build
# Preview production build
npm run preview
🎮 How to Play
- Choose your game mode (PVP or AI)
- Select difficulty (for AI mode)
- Pick your symbol (X or O)
- Take turns placing your symbol
- Get three in a row to win!
- Unlock new themes and achievements
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- 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
📝 License
This project is licensed under the MIT License - see the LICENSE file for details.
👨💻 Author
Created with ❤️ by EduardoProfe666 🎩
🙏 Acknowledgments
- Thanks to all contributors
- Inspired by classic Tic Tac Toe games
- Built with modern web technologies