2D Tank Battle Game in JavaScript with Canvas

I want you to create a game in javascript for me, using canvas. Follow the specs below and create a fully functional game. # Rules 1. Do not write comments explaining the code. 2. Make sure the canvas resizes based on the window size. 3. Ensure it can be played with both keyboard and on a touchscreen. 4. The game should have a voxel / 8-bit style. 5. the game needs to be esthetically pleasing and polished. Use svg icons if needed. # **2D Tank Battle Game Specification** ## **1. Overview** This is a **2D top-down tank battle game** built using JavaScript and the HTML5 Canvas API. Players control a tank on a **36x36 grid-based battlefield**, where they engage in combat against AI-controlled enemy tanks. The game focuses on strategy, movement, and shooting mechanics, with destructible and non-destructible terrain influencing gameplay. ## **2. Game Mechanics** ### **2.1 Player Movement & Controls** - **Arrow Keys / Swipe Gestures** → Move the tank **(Up, Down, Left, Right)**. - **Spacebar / Tap** → Fire a projectile (Cooldown: **2 seconds**). ### **2.2 Game Objective & Scoring** - The player must destroy all enemy tanks to win. - The score is based on: - **Number of enemies defeated**. - **Time taken to eliminate all enemies**. - The highest score is stored **locally** on the device. ### **2.3 Lives & Difficulty Progression** - The player starts with **3 lives**. - Each level **increases enemy speed**, making movement and reaction times more challenging. ### **2.4 Enemy AI** - Enemies patrol the map and attempt to shoot the player. - Some enemies may have different behaviors (aggressive, defensive, or patrolling). - AI reacts to player movement and obstacles dynamically. - Enemies can **collect special projectiles** that cause larger explosions. ## **3. Battlefield & Terrain** ### **3.1 Grid-Based Map** - The battlefield is a **36x36 square grid**. - Each grid tile can contain different types of terrain. ### **3.2 Terrain Types** | Terrain Type | Description | Can Shoot Through? | Can Pass Through? | | ------------------ | -------------------------------------- | ------------------ | ------------------- | | **Solid Wall** | Indestructible barrier | ❌ | ❌ | | **Breakable Wall** | Can be destroyed by shots | ✅ | ❌ (until destroyed) | | **Water** | Bullets pass through, but tanks cannot | ✅ | ❌ | | **Mud** | Slows down movement speed | ✅ | ✅ | | **Open Ground** | No obstacles, free movement | ✅ | ✅ | ## **4. Combat System** - **Projectile-based shooting**: The player and enemies fire straight-line projectiles. - **Collision detection**: Bullets collide with terrain and tanks. - **Destructible objects**: Breakable walls are destroyed after multiple hits. - **Limited fire rate**: Players and enemies have a **2-second cooldown** between shots. - **Explosive projectiles**: Collecting special ammunition increases the **blast radius** of shots. Enemies can also pick these up. ## **5. Game Customization** - Players can select the **number of enemy tanks** before the game starts. - Different difficulty levels based on enemy count and AI behavior. - Players can **choose their tank's color**. - Enemy tanks have **different colors** to distinguish between AI behaviors. ## **6. Victory & Endgame** - The game ends when **all enemy tanks are destroyed** or the player runs out of lives. - The final score is displayed based on performance. - High scores are stored locally. This specification defines the core mechanics and interactions for the tank battle game, ensuring a strategic and engaging experience.