# 🏰 Dota 2 Hero Hangman

A modern, interactive hangman game featuring **70+ Dota 2 heroes** with an animated Ancient Tower health system! Guess hero names before the Ancient falls to enemy attacks.

![Dota 2 Hero Hangman](https://img.shields.io/badge/Heroes-70%2B-red) ![Status](https://img.shields.io/badge/Status-Active-green) ![Language](https://img.shields.io/badge/Language-JavaScript-yellow)

## 🎮 Game Features

### 🏛️ **Animated Ancient Tower System**

- **Health Bar**: Visual HP indicator that changes from green → yellow → red as damage increases
- **Progressive Damage**: Watch cracks appear and spread across the tower with each wrong guess
- **Destruction Animation**: Epic tower collapse sequence when the Ancient falls
- **Visual Effects**: Particle explosions, fire, smoke, and screen shake effects

### 🦸 **Comprehensive Hero Pool**

- **70+ Dota 2 Heroes** from all attributes (Strength, Agility, Intelligence)
- **Hero Hints**: Get clues about abilities, roles, and lore
- **Hero Information**: View attributes, roles, and descriptions
- **Random Selection**: Each game features a randomly selected hero

### 🎯 **Game Mechanics**

- **Letter Guessing**: Guess individual letters to reveal the hero name
- **Word Guessing**: Think you know the hero? Guess the full name!
- **Progressive Difficulty**: 6 wrong guesses maximum before the Ancient falls
- **Smart Input**: Automatic uppercase conversion and letter validation

### 📊 **Stats & Progress**

- **Score Tracking**: Persistent score system with local storage
- **Win Streaks**: Track your consecutive victories
- **Game Statistics**: View letters guessed, wrong attempts, and time taken
- **Performance Analytics**: Detailed game completion stats

## 🚀 How to Play

1. **Start the Game**: A random Dota 2 hero is selected
2. **View Clues**: Check the hero's attribute (STR/AGI/INT) and roles
3. **Make Guesses**:
   - Type letters to reveal the hero name
   - Use "Guess Hero Name" for full word attempts
4. **Use Hints**: Click the hint button for ability/lore clues
5. **Watch the Tower**: Each wrong guess damages the Ancient Tower
6. **Win Condition**: Reveal the full hero name before 6 wrong guesses
7. **Lose Condition**: The Ancient Tower falls after 6 incorrect attempts

## 🎨 Visual Design

### **Modern Gaming UI**

- **Dark Theme**: Dota 2-inspired color scheme
- **Orbitron Font**: Futuristic, gaming-style typography
- **Smooth Animations**: CSS transitions and keyframe animations
- **Responsive Design**: Works on desktop and mobile devices

### **Interactive Elements**

- **Glowing Buttons**: Hover effects and visual feedback
- **Animated Cards**: Hero information with smooth transitions
- **Dynamic Health Bar**: Real-time visual damage representation
- **Particle Effects**: Explosion animations on tower destruction

## 🛠️ Technical Features

### **Built With**

- **HTML5**: Semantic markup and accessibility
- **CSS3**: Advanced animations, gradients, and flexbox/grid layouts
- **Vanilla JavaScript**: ES6+ features, classes, and modern APIs
- **Local Storage**: Persistent game statistics and progress

### **Code Structure**

```
📦 dota2-hero-hangman/
├── 📄 index.html          # Main game interface
├── 🎨 styles.css          # Complete styling and animations
├── ⚡ script.js           # Game logic and tower animations
├── 🗃️ heroes-data.js      # 70+ hero database
└── 📖 README.md           # This file
```

### **Key Classes & Functions**

- `Dota2Hangman`: Main game class with complete game logic
- `updateAncientTower()`: Handles tower damage and health bar
- `triggerTowerDestruction()`: Epic destruction sequence
- `createDestructionParticles()`: Particle explosion effects

## 🎯 Hero Database

Our game includes **70+ carefully curated Dota 2 heroes** with:

### **Hero Attributes**

- **Strength Heroes**: Tank/initiator heroes (Pudge, Axe, Sven, etc.)
- **Agility Heroes**: Carry/damage dealers (Anti-Mage, Phantom Assassin, etc.)
- **Intelligence Heroes**: Support/nukers (Invoker, Crystal Maiden, etc.)

### **Hero Information**

- **Name**: Official Dota 2 hero names
- **Icon**: Thematic emoji representation
- **Roles**: Primary gameplay roles (Carry, Support, Initiator, etc.)
- **Description**: Lore and gameplay style descriptions
- **Hints**: Ability-based clues for strategic guessing

### **Featured Heroes Include**

- **Popular Picks**: Pudge, Invoker, Anti-Mage, Crystal Maiden
- **Carry Heroes**: Phantom Assassin, Juggernaut, Faceless Void
- **Support Heroes**: Rubick, Shadow Shaman, Dazzle
- **Initiators**: Enigma, Batrider, Legion Commander
- **Unique Heroes**: Meepo, Techies, Lone Druid

## 🚀 Getting Started

### **Local Development**

1. **Clone/Download** the repository
2. **Open** `index.html` in a modern web browser
3. **Start Playing** immediately - no installation required!

### **Local Server (Recommended)**

```bash
# Using Python
python -m http.server 8000

# Using Node.js
npx http-server

# Using Live Server (VS Code extension)
# Right-click index.html → "Open with Live Server"
```

### **GitHub Pages Deployment**

1. Push to GitHub repository
2. Go to Settings → Pages
3. Select source branch (main/master)
4. Your game will be live at `https://username.github.io/repository-name`

## 🎮 Game Controls

### **Keyboard Shortcuts**

- **Enter**: Submit letter guess or word guess
- **F1**: Get hint (when available)
- **Escape**: Close modals and dialogs

### **Mouse Controls**

- **Click Letters**: Type individual letters
- **Guess Word**: Full hero name attempts
- **Hint Button**: Reveal helpful clues
- **New Game**: Restart with random hero

## 📈 Game Statistics

The game tracks various statistics:

- **Total Score**: Points earned from successful guesses
- **Games Won**: Number of completed victories
- **Current Streak**: Consecutive wins counter
- **Best Performance**: Fastest completion times

## 🔮 Future Features

### **Planned Enhancements**

- **Difficulty Levels**: Easy/Normal/Hard modes with different guess limits
- **Hero Categories**: Filter by attribute, role, or complexity
- **Multiplayer Mode**: Compete with friends online
- **Achievement System**: Unlock rewards for various milestones
- **Sound Effects**: Audio feedback and Dota 2 voice lines
- **Mobile App**: React Native version for iOS/Android

### **Community Features**

- **Leaderboards**: Global high scores and fastest times
- **Custom Hero Sets**: Create and share custom hero collections
- **Tournament Mode**: Organized competitive play

## 🤝 Contributing

We welcome contributions! Here's how you can help:

### **Adding Heroes**

1. Edit `heroes-data.js`
2. Follow the existing hero object structure
3. Include accurate names, roles, and descriptions
4. Add helpful but not obvious hints

### **Improving Animations**

1. Enhance CSS animations in `styles.css`
2. Add new visual effects for tower destruction
3. Improve mobile responsiveness

### **Bug Fixes & Features**

1. Fork the repository
2. Create a feature branch
3. Submit a pull request with clear description

## 📄 License

This project is open source and available under the [MIT License](LICENSE).

## 🙏 Acknowledgments

- **Valve Corporation**: For creating Dota 2 and its amazing heroes
- **Dota 2 Community**: For inspiration and feedback
- **Web Development Community**: For tutorials and best practices

## 📞 Contact & Support

- **Issues**: Report bugs via GitHub Issues
- **Features**: Suggest improvements via GitHub Discussions
- **Community**: Join the conversation about Dota 2 and web gaming

---

**🎯 Ready to test your Dota 2 knowledge? Start guessing and save the Ancient!**

_Made with ❤️ for the Dota 2 community_