README.md

metadata

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! 🎖️