KANA: Pixelhase mit Bogen

Prompt

Zum Kopieren anmelden

Erstelle eine einzelne eigenständige HTML-Datei, die mit reinem JavaScript und Canvas 2D einen animierten Pixel-Art-Hasenbogenschützen darstellt. Verwende die beigefügte KANA-Hasenfigur als visuelle Vorlage: weißes Fell; große aufrechte Ohren mit cyan-/blau leuchtenden Innendetails; ein normales blaues Auge und ein rotes kybernetisches mechanisches Auge; gelber Hoodie mit „KANA“; dunkelblaue Handschuhe und Hose; gelb-blaue futuristische mechanische Beinpanzerung; niedliche Chibi-Proportionen; futuristischer Bogen mit Pfeil; kleiner Köcher auf dem Rücken. Keine externen Assets, Bibliotheken, Bilder, Schriftarten oder Netzwerkanfragen. Zeichne alles prozedural mit Code. DARSTELLUNG - Zuerst alles auf einer Offscreen-Canvas mit fester logischer Auflösung von 160x120 rendern. - Auf eine bildschirmfüllende Anzeige-Canvas mit dem größten ganzzahligen Skalierungsfaktor vergrößern, der ins Browserfenster passt; Canvas zentrieren. - imageSmoothingEnabled = false und CSS image-rendering: pixelated setzen. - Alle Koordinaten auf ganze Zahlen einrasten lassen. Keine Verläufe, Unschärfe, Kantenglättung, shadowBlur oder Subpixel-Darstellung. - Feste Palette mit ungefähr 28 Farben: dunkles Marineblau für den Hintergrund, Weiß/Grau fürs Fell, Gelbtöne für den Hoodie, Blautöne für die Kleidung, Rot fürs Cyberauge, Cyan fürs Ohrenlicht und Gelb/Orange für Bogen- und Pfeileffekte. FIGUR Den Hasen prozedural aus Pixelrechtecken, polygonähnlichen Pixelreihen, durch Pixel angenäherten Kreisen und einfachen Blockformen aufbauen. Ungefähr 28–34 Pixel breit und 40–48 Pixel hoch. Die Silhouette muss eindeutig erkennbar bleiben: große Hasenohren, runder flauschiger Kopf, kleiner Körper, rotes Cyberauge, gelber Hoodie, mechanische Beine, Bogen, Pfeil und Köcher. Ohren, Kopf, Arme, Beine, Hoodie, Bogen, Pfeil und Körper getrennt animieren. Posen quantisieren, sodass die Hauptschleife mit 60 fps rendert, die Bewegung aber wie ausgefeilte Sprite-Animation mit 8–12 fps wirkt. AKTIONEN Eine sich wiederholende Präsentation mit diesen acht Aktionen erstellen: 1. IDLE — Bereitschaft - Der Hase steht bereit; der Körper wippt leicht, die Ohren bewegen sich dezent, Hoodie und Köcher schwingen. - Das Cyberauge pulsiert sanft; der Bogen wird entspannt seitlich gehalten. 2. RUN — Laufen - Schnelles Vorwärtslaufen mit kräftig abwechselnder Beinbewegung; die Arme gleichen die Bewegung aus. - Bogen in einer Hand, hüpfender Köcher, leicht nach hinten wehende Ohren und kleine Staubpixel unter den Füßen. 3. AIM — Zielen - Füße fest aufsetzen, Bogen heben, Pfeil aus dem Köcher nehmen, auflegen und Sehne zurückziehen. - Ein Auge fokussiert das Ziel; das Cyberauge wird heller; der Körper neigt sich leicht in Schussrichtung. 4. SHOOT — Schießen - Sehne loslassen; der Pfeil fliegt schnell über den Bildschirm. Der Bogen federt leicht zurück; der Arm führt die Bewegung zu Ende. - Leuchtend gelbe Energiespur hinter dem Pfeil, kurzes Bildschirmzittern um 1–2 Pixel, rotes Aufblitzen des Cyberauges und ein kurzer mündungsfeuerähnlicher Lichtblitz am Bogen. 5. JUMP — Springen - Der Hase geht in die Hocke, springt nach oben und zieht die Beine unter den Körper. - Die Ohren reagieren verzögert; der Bogen bleibt nah am Körper. Beim Absprung ein kleiner Staubstoß. - Leichtes Stauchen und Strecken mit pixelsicheren ganzzahligen Transformationen. 6. DODGE / ROLL — Ausweichen / Rollen - Schnell ducken und seitlich rollen; Bogen nah am Körper, Ohren nach hinten angelegt. - Kleine Staubpartikel und Bewegungspixel; Abschluss in einer tiefen kampfbereiten Pose. 7. HURT / HIT — Treffer - Der Hase wird leicht zurückgestoßen; der Kopf schnellt zurück, die Ohren reagieren stark und das Cyberauge flackert. - Kleine Pixelsterne oder Aufprallfunken; der Bogen sinkt ab oder fällt beinahe herunter. Nach kurzer Verzögerung erholt sich die Figur. 8. VICTORY — Sieg - Bogen über den Kopf heben, fröhlicher Ausdruck, ein Ohr spielerisch geneigt und hell leuchtendes Cyberauge. - Kleine gelbe Jubelpartikel und ein kurzer Siegeshüpfer. Die Endpose wirkt niedlich und heldenhaft. ZUSTANDSMASCHINE Schleife: IDLE → RUN → AIM → SHOOT → JUMP → DODGE → HURT → VICTORY → IDLE. Jede Aktion dauert lange genug, um visuell klar erkennbar zu sein. Easing-Funktionen für Posenwechsel und kurze Übergangsanimationen zwischen Zuständen verwenden, damit die Schleife fließend statt abrupt wirkt. BOGEN UND PFEIL - Futuristischer gebogener Bogen mit weißem/dunkelblauem Körper, gelb leuchtenden mechanischen Gelenken und dünner heller Sehne. - Leuchtend gelbe Pfeilspitze; die Pfeilspur bei SHOOT bleibt kurz sichtbar. Mehrere Pfeile müssen im Köcher sichtbar sein. PARTIKEL Ein Partikelsystem mit Objektpool ohne Allokationen in der Schleife implementieren. Alle Partikel vor der Animationsschleife vorab anlegen. Typen: Fußstaub, Pfeilspur, Bogen-Energiefunken, Cyberaugenfunken, Treffersterne und Siegespartikel. Jeder Partikel wechselt mit zunehmendem Alter die Palettenfarbe. In der Hauptschleife keine neuen Objekte anlegen. SZENE Eine minimale Pixel-Art-Umgebung: dunkler Nachthimmel, einige 1-Pixel-Sterne, großer Mond, einfache Stein- oder futuristische Plattform und sehr dezente entfernte Silhouetten. Den Hintergrund einfach halten, damit die Hasensilhouette immer lesbar bleibt. Während AIM und SHOOT dezentes cyan-/rotes Randlicht vom Cyberauge und gelbes Randlicht vom Bogen hinzufügen. TECHNISCHE ANFORDERUNGEN Eine HTML-Datei; ausschließlich reines JavaScript und Canvas 2D; keine Bibliotheken, SVGs, externen Bilder, Assets oder Netzwerkanfragen. Fester 60-Hz-Zeitschritt; requestAnimationFrame zum Rendern; keinerlei Objektallokation in der Hauptanimationsschleife; stabile 60 fps; responsive Vollbildskalierung; scharfe, ganzzahlig skalierte Pixel. QUALITÄTSANSPRUCH Das Ergebnis soll wie die ausgefeilte Sprite-Animation einer Hauptfigur aus einem 16-Bit-Actionspiel aussehen. Den Eindruck einfacher geometrischer Formen vermeiden. Der Hase wirkt ausdrucksstark, niedlich, schnell und kampffähig. Alle acht Aktionen benötigen klar unterschiedliche Silhouetten. Das Figurendesign bleibt in jedem Animationszustand konsistent. Das Endergebnis sollte für ein echtes Pixel-Art-Actionspiel geeignet sein.