Battle Royale Dashboard - Copy this Html, Tailwind Component to your project

# Battle Royale Simulator in HTML5 Canvas Create a Battle Royale simulator using HTML5 Canvas. The simulator should include the following features: ## **General Structure** Map: Multiple maps with varied layouts (forests, deserts, cities, mountains). The map must be a closed and limited area; players cannot leave its boundaries under any circumstances. Map size should vary based on the number of players. Buildings and Resources: Randomly scatter buildings like houses, sheds, and warehouses across the map. Buildings should contain items such as weapons (various types), ammunition, medical kits, and other useful accessories (e.g., armor, helmets). Safezone: A circular area that shrinks over time, forcing players to converge. Each safezone shrink has a cooldown period before initiating the next shrink, allowing players to move. The safezone should be positioned randomly and progressively shrink until the game ends. ## **Players and AI** Players: Each player is controlled by simple AI with defined behaviors: Resource Gathering: Initially, players search for weapons and items. Combat: If armed and encountering another player, they engage in combat. Fleeing: If unarmed or at a disadvantage, they attempt to flee to a safe area. Each player has a health bar, ammunition, and a limited inventory. Dynamic Behaviors: Players must prioritize moving toward the safezone as it shrinks. When injured during combat, players may use a medical kit if available. Movement logic must account for obstacles, requiring players to find paths around buildings and other map elements. ## **Game Mechanics** Items and Equipment: Various weapon types with different characteristics (e.g., pistol, rifle, shotgun). Limited ammunition; players must manage their resources. Medical kits to restore health. Defensive equipment like armor and helmets that reduce damage. Safezone: After the cooldown period, the safezone shrinks gradually. Players outside the safezone take continuous damage until they re enter. Combat: Players in combat should shoot at opponents using logic based on range, accuracy, and weapon type. A defeated player drops their items, which can be collected by others. ## **User Interface** Initial Setup: Allow users to configure the number of players before starting the simulation. Provide an option to choose the map. Information Display: Show the number of remaining players. Indicate the current position and size of the safezone on the map. Display simplified health bars and inventories for players. ## **Extras (Optional):** Random events such as supply drops at specific map points. The simulator must be implemented using only HTML5, CSS, and JavaScript. The code should follow modular design principles and adhere to best coding practices.