2D-Panzerkampf-Spiel in JavaScript mit Canvas

Erstelle ein Spiel in JavaScript für mich, unter Verwendung von Canvas. Befolge die folgenden Spezifikationen und erstelle ein voll funktionsfähiges Spiel. # Regeln 1. Schreibe keine Kommentare, die den Code erklären. 2. Stelle sicher, dass die Canvas-Größe basierend auf der Fenstergröße angepasst wird. 3. Stelle sicher, dass es sowohl mit Tastatur als auch auf einem Touchscreen gespielt werden kann. 4. Das Spiel sollte einen Voxel-/8-Bit-Stil haben. 5. Das Spiel muss ästhetisch ansprechend und poliert sein. Verwende bei Bedarf SVG-Icons. # **2D Panzer-Schlacht-Spiel Spezifikation** ## **1. Überblick** Dies ist ein **2D-Top-Down-Panzer-Schlacht-Spiel**, das mit JavaScript und der HTML5-Canvas-API erstellt wurde. Spieler steuern einen Panzer auf einem **36x36-Raster-Schlachtfeld**, auf dem sie gegen KI-gesteuerte feindliche Panzer kämpfen. Das Spiel konzentriert sich auf Strategie, Bewegung und Schießmechaniken, wobei zerstörbares und nicht zerstörbares Gelände das Gameplay beeinflusst. ## **2. Spielmechanik** ### **2.1 Spielerbewegung & Steuerung** - **Pfeiltasten / Wischgesten** → Bewegen den Panzer **(Hoch, Runter, Links, Rechts)**. - **Leertaste / Tippen** → Feuert ein Projektil (Abklingzeit: **2 Sekunden**). ### **2.2 Spielziel & Punktevergabe** - Der Spieler muss alle feindlichen Panzer zerstören, um zu gewinnen. - Die Punktzahl basiert auf: - **Anzahl der besiegten Feinde**. - **Zeit, die benötigt wird, um alle Feinde zu eliminieren**. - Die höchste Punktzahl wird **lokal** auf dem Gerät gespeichert. ### **2.3 Leben & Schwierigkeitsgrad-Progression** - Der Spieler startet mit **3 Leben**. - Jedes Level **erhöht die Geschwindigkeit der Feinde**, was Bewegung und Reaktionszeiten herausfordernder macht. ### **2.4 Feind-KI** - Feinde patrouillieren auf der Karte und versuchen, den Spieler zu erschießen. - Einige Feinde können unterschiedliche Verhaltensweisen haben (aggressiv, defensiv oder patrouillierend). - Die KI reagiert dynamisch auf Spielerbewegungen und Hindernisse. - Feinde können **spezielle Projektile sammeln**, die größere Explosionen verursachen. ## **3. Schlachtfeld & Gelände** ### **3.1 Rasterbasierte Karte** - Das Schlachtfeld ist ein **36x36-Quadratraster**. - Jedes Rasterfeld kann verschiedene Arten von Gelände enthalten. ### **3.2 Geländetypen** | Geländetyp | Beschreibung | Kann hindurchschießen? | Kann hindurchgehen? | | ------------------ | --------------------------------------- | ---------------------- | --------------------- | | **Feste Wand** | Unzerstörbare Barriere | ❌ | ❌ | | **Zerstörbare Wand** | Kann durch Schüsse zerstört werden | ✅ | ❌ (bis zerstört) | | **Wasser** | Kugeln gehen durch, Panzer können nicht | ✅ | ❌ | | **Schlamm** | Verlangsamt die Bewegungsgeschwindigkeit | ✅ | ✅ | | **Offenes Gelände** | Keine Hindernisse, freie Bewegung | ✅ | ✅ | ## **4. Kampfsystem** - **Projektilbasiertes Schießen**: Der Spieler und Feinde feuern Projektile in gerader Linie. - **Kollisionserkennung**: Kugeln kollidieren mit Gelände und Panzern. - **Zerstörbare Objekte**: Zerstörbare Wände werden nach mehreren Treffern zerstört. - **Begrenzte Feuerrate**: Spieler und Feinde haben eine **2-Sekunden-Abklingzeit** zwischen Schüssen. - **Explosive Projektile**: Das Sammeln von spezieller Munition erhöht den **Explosionsradius** von Schüssen. Feinde können diese ebenfalls aufnehmen. ## **5. Spielanpassung** - Spieler können die **Anzahl der feindlichen Panzer** vor Spielbeginn auswählen. - Verschiedene Schwierigkeitsgrade basierend auf der Anzahl der Feinde und dem KI-Verhalten. - Spieler können **die Farbe ihres Panzers wählen**. - Feindliche Panzer haben **verschiedene Farben**, um zwischen KI-Verhaltensweisen zu unterscheiden. ## **6. Sieg & Endspiel** - Das Spiel endet, wenn **alle feindlichen Panzer zerstört sind** oder dem Spieler die Leben ausgehen. - Die endgültige Punktzahl wird basierend auf der Leistung angezeigt. - Hohe Punktzahlen werden lokal gespeichert. Diese Spezifikation definiert die Kernmechaniken und Interaktionen für das Panzer-Schlacht-Spiel und gewährleistet ein strategisches und fesselndes Erlebnis.