---
title: HF Map
emoji: 💻
colorFrom: purple
colorTo: green
sdk: static
pinned: false
---

# Battlefield Simulator

Battlefield Simulator is an immersive real-time military strategy game that runs directly in your web browser, featuring autonomous Blue and Red forces battling across an interactive map.

Watch as 14 different unit types—from basic infantry and tanks to elite special forces and missile batteries—engage in dynamic combat with realistic movement patterns, health systems, and tactical AI.

The game progresses through days and hours, unlocking new unit types over time while tracking detailed battle statistics including casualties, reinforcements, territory control, and active engagements.

With its intuitive click-to-inspect interface, pause/resume controls, and visually striking battle animations, this simulation offers an engaging strategic experience where you can observe complex military scenarios unfold in real-time without requiring any downloads or installations..

## 🎮 Features

### Core Gameplay
- **Real-time Simulation**: Units move, engage, and battle autonomously in real-time
- **Interactive Map**: Built with Leaflet.js for smooth map interactions
- **Dynamic Combat**: Units engage in battles based on proximity and attack ranges
- **Unit Progression**: 14 different unit types that unlock over time
- **Day/Night Cycle**: Time progression affects unit availability and events

### Unit Types
- **Base Units** (Available from start):
  - Infantry Battalion 👤
  - Tank Division 🛡️
  - Artillery Battery 💥
  - Reconnaissance Unit 🔍
  - Air Defense Unit 🚀
  - Command Center ⭐
  - Medical Corps 🩺

- **Advanced Units** (Unlock over time):
  - Airborne Division 🪂 (Day 2)
  - Special Forces 🥷 (Day 3)
  - Mechanized Infantry 🚜 (Day 4)
  - Combat Engineers 🔧 (Day 5)
  - Naval Support ⚓ (Day 6)
  - Air Squadron ✈️ (Day 7)
  - Missile Battery 🚀 (Day 10)
  - Elite Force 👑 (Day 15)

### Battle Mechanics
- **Strength-based Combat**: Unit strength affects combat effectiveness
- **Range-based Engagement**: Different unit types have varying attack ranges
- **Health System**: Units take damage and can be eliminated
- **Reinforcements**: New units spawn periodically
- **Territory Control**: Visual representation of battlefield dominance

### Statistics & Monitoring
- **Real-time Stats**: Active units, casualties, reinforcements
- **Battle Tracking**: Monitor ongoing engagements
- **Territory Control Bar**: Visual battlefield control indicator
- **Unit Information Panel**: Detailed stats for selected units

## 🚀 Getting Started

### Prerequisites
- Modern web browser (Chrome, Firefox, Safari, Edge)
- No additional software installation required

### Installation
1. Clone or download this repository
2. Open `index.html` in your web browser
3. The simulation will start automatically

### File Structure
```
HF-Map/
├── index.html      # Main HTML structure
├── script.js       # Game logic and simulation engine
├── style.css       # Styling and animations
└── README.md       # This file
```

## 🎯 How to Play

### Basic Controls
- **Click on units**: View detailed information in the info panel
- **Pause/Resume**: Use the pause button to stop/start the simulation
- **Observe**: Watch as battles unfold automatically

### Understanding the Interface

#### Map View
- **Blue circles**: Blue faction units
- **Red circles**: Red faction units
- **Size**: Larger circles represent stronger units
- **Animations**: Battle effects appear during combat

#### Information Panel
- **Unit Information**: Click any unit to see its details
- **Battle Statistics**: Real-time combat metrics
- **Territory Control**: Visual bar showing battlefield dominance

#### Statistics Tracked
- **Active Units**: Current operational forces per faction
- **Casualties**: Units eliminated in combat
- **Reinforcements**: New units added to the battlefield
- **Active Battles**: Ongoing combat engagements
- **Territory Control**: Percentage control by each faction

## 🔧 Technical Details

### Technologies Used
- **HTML5**: Structure and layout
- **CSS3**: Styling, animations, and responsive design
- **JavaScript (ES6+)**: Game logic and simulation engine
- **Leaflet.js**: Interactive mapping library
- **OpenStreetMap**: Map tile provider

### Key Features Implementation
- **Unit AI**: Autonomous movement and target selection
- **Combat System**: Range-based engagement with damage calculations
- **Event System**: Random events and environmental effects
- **Time Management**: Day/hour progression with unlockable content
- **Visual Effects**: Battle animations and unit status indicators

### Performance Optimizations
- Efficient unit movement calculations
- Optimized battle detection algorithms
- Smooth animations with CSS transitions
- Responsive design for various screen sizes

## 🎨 Customization

### Modifying Unit Types
Edit the `unitTypes` object in `script.js` to adjust:
- Movement speed
- Attack power
- Attack range
- Unlock timing
- Visual icons

### Adjusting Game Balance
Modify these variables in `script.js`:
- Initial unit counts
- Spawn rates
- Battle mechanics
- Time progression speed

### Styling Changes
Update `style.css` to customize:
- Color schemes
- Unit appearance
- UI layout
- Animation effects

## 🐛 Known Issues
- Map interactions are disabled to prevent interference with unit selection
- Performance may decrease with very large numbers of units
- Mobile responsiveness could be improved for smaller screens

## 🔮 Future Enhancements
- Save/load game states
- Multiplayer functionality
- More detailed unit customization
- Advanced AI strategies
- Sound effects and music
- Mobile app version

## 📄 License
This project is open source and available under the MIT License.

## 🤝 Contributing
Contributions are welcome! Please feel free to submit pull requests or open issues for bugs and feature requests.

## 📧 Contact
For questions or feedback about this project, please open an issue in the repository.

---

**Enjoy the battle!** 🎖️