AntDX316
commited on
Commit
ยท
fc30dd6
1
Parent(s):
a143487
updated
Browse files
README.md
CHANGED
@@ -6,3 +6,174 @@ colorTo: green
|
|
6 |
sdk: static
|
7 |
pinned: false
|
8 |
---
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
6 |
sdk: static
|
7 |
pinned: false
|
8 |
---
|
9 |
+
|
10 |
+
# Battlefield Simulator
|
11 |
+
|
12 |
+
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.
|
13 |
+
|
14 |
+
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.
|
15 |
+
|
16 |
+
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.
|
17 |
+
|
18 |
+
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..
|
19 |
+
|
20 |
+
## ๐ฎ Features
|
21 |
+
|
22 |
+
### Core Gameplay
|
23 |
+
- **Real-time Simulation**: Units move, engage, and battle autonomously in real-time
|
24 |
+
- **Interactive Map**: Built with Leaflet.js for smooth map interactions
|
25 |
+
- **Dynamic Combat**: Units engage in battles based on proximity and attack ranges
|
26 |
+
- **Unit Progression**: 14 different unit types that unlock over time
|
27 |
+
- **Day/Night Cycle**: Time progression affects unit availability and events
|
28 |
+
|
29 |
+
### Unit Types
|
30 |
+
- **Base Units** (Available from start):
|
31 |
+
- Infantry Battalion ๐ค
|
32 |
+
- Tank Division ๐ก๏ธ
|
33 |
+
- Artillery Battery ๐ฅ
|
34 |
+
- Reconnaissance Unit ๐
|
35 |
+
- Air Defense Unit ๐
|
36 |
+
- Command Center โญ
|
37 |
+
- Medical Corps ๐ฉบ
|
38 |
+
|
39 |
+
- **Advanced Units** (Unlock over time):
|
40 |
+
- Airborne Division ๐ช (Day 2)
|
41 |
+
- Special Forces ๐ฅท (Day 3)
|
42 |
+
- Mechanized Infantry ๐ (Day 4)
|
43 |
+
- Combat Engineers ๐ง (Day 5)
|
44 |
+
- Naval Support โ (Day 6)
|
45 |
+
- Air Squadron โ๏ธ (Day 7)
|
46 |
+
- Missile Battery ๐ (Day 10)
|
47 |
+
- Elite Force ๐ (Day 15)
|
48 |
+
|
49 |
+
### Battle Mechanics
|
50 |
+
- **Strength-based Combat**: Unit strength affects combat effectiveness
|
51 |
+
- **Range-based Engagement**: Different unit types have varying attack ranges
|
52 |
+
- **Health System**: Units take damage and can be eliminated
|
53 |
+
- **Reinforcements**: New units spawn periodically
|
54 |
+
- **Territory Control**: Visual representation of battlefield dominance
|
55 |
+
|
56 |
+
### Statistics & Monitoring
|
57 |
+
- **Real-time Stats**: Active units, casualties, reinforcements
|
58 |
+
- **Battle Tracking**: Monitor ongoing engagements
|
59 |
+
- **Territory Control Bar**: Visual battlefield control indicator
|
60 |
+
- **Unit Information Panel**: Detailed stats for selected units
|
61 |
+
|
62 |
+
## ๐ Getting Started
|
63 |
+
|
64 |
+
### Prerequisites
|
65 |
+
- Modern web browser (Chrome, Firefox, Safari, Edge)
|
66 |
+
- No additional software installation required
|
67 |
+
|
68 |
+
### Installation
|
69 |
+
1. Clone or download this repository
|
70 |
+
2. Open `index.html` in your web browser
|
71 |
+
3. The simulation will start automatically
|
72 |
+
|
73 |
+
### File Structure
|
74 |
+
```
|
75 |
+
HF-Map/
|
76 |
+
โโโ index.html # Main HTML structure
|
77 |
+
โโโ script.js # Game logic and simulation engine
|
78 |
+
โโโ style.css # Styling and animations
|
79 |
+
โโโ README.md # This file
|
80 |
+
```
|
81 |
+
|
82 |
+
## ๐ฏ How to Play
|
83 |
+
|
84 |
+
### Basic Controls
|
85 |
+
- **Click on units**: View detailed information in the info panel
|
86 |
+
- **Pause/Resume**: Use the pause button to stop/start the simulation
|
87 |
+
- **Observe**: Watch as battles unfold automatically
|
88 |
+
|
89 |
+
### Understanding the Interface
|
90 |
+
|
91 |
+
#### Map View
|
92 |
+
- **Blue circles**: Blue faction units
|
93 |
+
- **Red circles**: Red faction units
|
94 |
+
- **Size**: Larger circles represent stronger units
|
95 |
+
- **Animations**: Battle effects appear during combat
|
96 |
+
|
97 |
+
#### Information Panel
|
98 |
+
- **Unit Information**: Click any unit to see its details
|
99 |
+
- **Battle Statistics**: Real-time combat metrics
|
100 |
+
- **Territory Control**: Visual bar showing battlefield dominance
|
101 |
+
|
102 |
+
#### Statistics Tracked
|
103 |
+
- **Active Units**: Current operational forces per faction
|
104 |
+
- **Casualties**: Units eliminated in combat
|
105 |
+
- **Reinforcements**: New units added to the battlefield
|
106 |
+
- **Active Battles**: Ongoing combat engagements
|
107 |
+
- **Territory Control**: Percentage control by each faction
|
108 |
+
|
109 |
+
## ๐ง Technical Details
|
110 |
+
|
111 |
+
### Technologies Used
|
112 |
+
- **HTML5**: Structure and layout
|
113 |
+
- **CSS3**: Styling, animations, and responsive design
|
114 |
+
- **JavaScript (ES6+)**: Game logic and simulation engine
|
115 |
+
- **Leaflet.js**: Interactive mapping library
|
116 |
+
- **OpenStreetMap**: Map tile provider
|
117 |
+
|
118 |
+
### Key Features Implementation
|
119 |
+
- **Unit AI**: Autonomous movement and target selection
|
120 |
+
- **Combat System**: Range-based engagement with damage calculations
|
121 |
+
- **Event System**: Random events and environmental effects
|
122 |
+
- **Time Management**: Day/hour progression with unlockable content
|
123 |
+
- **Visual Effects**: Battle animations and unit status indicators
|
124 |
+
|
125 |
+
### Performance Optimizations
|
126 |
+
- Efficient unit movement calculations
|
127 |
+
- Optimized battle detection algorithms
|
128 |
+
- Smooth animations with CSS transitions
|
129 |
+
- Responsive design for various screen sizes
|
130 |
+
|
131 |
+
## ๐จ Customization
|
132 |
+
|
133 |
+
### Modifying Unit Types
|
134 |
+
Edit the `unitTypes` object in `script.js` to adjust:
|
135 |
+
- Movement speed
|
136 |
+
- Attack power
|
137 |
+
- Attack range
|
138 |
+
- Unlock timing
|
139 |
+
- Visual icons
|
140 |
+
|
141 |
+
### Adjusting Game Balance
|
142 |
+
Modify these variables in `script.js`:
|
143 |
+
- Initial unit counts
|
144 |
+
- Spawn rates
|
145 |
+
- Battle mechanics
|
146 |
+
- Time progression speed
|
147 |
+
|
148 |
+
### Styling Changes
|
149 |
+
Update `style.css` to customize:
|
150 |
+
- Color schemes
|
151 |
+
- Unit appearance
|
152 |
+
- UI layout
|
153 |
+
- Animation effects
|
154 |
+
|
155 |
+
## ๐ Known Issues
|
156 |
+
- Map interactions are disabled to prevent interference with unit selection
|
157 |
+
- Performance may decrease with very large numbers of units
|
158 |
+
- Mobile responsiveness could be improved for smaller screens
|
159 |
+
|
160 |
+
## ๐ฎ Future Enhancements
|
161 |
+
- Save/load game states
|
162 |
+
- Multiplayer functionality
|
163 |
+
- More detailed unit customization
|
164 |
+
- Advanced AI strategies
|
165 |
+
- Sound effects and music
|
166 |
+
- Mobile app version
|
167 |
+
|
168 |
+
## ๐ License
|
169 |
+
This project is open source and available under the MIT License.
|
170 |
+
|
171 |
+
## ๐ค Contributing
|
172 |
+
Contributions are welcome! Please feel free to submit pull requests or open issues for bugs and feature requests.
|
173 |
+
|
174 |
+
## ๐ง Contact
|
175 |
+
For questions or feedback about this project, please open an issue in the repository.
|
176 |
+
|
177 |
+
---
|
178 |
+
|
179 |
+
**Enjoy the battle!** ๐๏ธ
|