Kimi API for Vision-to-Code Generation

Erstelle eine vollständige Single-File-HTML-Seite für ein spielbares Snake-Arcade-Game, mit sämtlichem CSS und JavaScript inline und ohne externe Abhängigkeiten, CDNs, Bilder oder Fonts. Zeichne das Spielfeld auf einem Canvas in einem modernen Neon-auf-Dunkel-Farbschema, mit flüssiger Bewegung und einer weichen Leuchtspur hinter der Schlange. Unterstütze Steuerung per Pfeiltasten und WASD sowie Swipe-Gesten auf Touch-Geräten, zeige einen Live-Score und einen dauerhaft gespeicherten Highscore an und erhöhe die Spielgeschwindigkeit schrittweise, wenn der Score steigt. Löse jedes Mal, wenn Futter gefressen wird, eine kleine Partikel-Explosion aus, zeige ein animiertes Game-over-Overlay mit Restart-Button an und halte das Layout responsiv, sodass das Spielfeld sowohl auf Desktop als auch auf Mobilgeräten zentriert und gut lesbar bleibt.

Erstelle eine einzelne, vollständig in sich geschlossene HTML-Datei (sämtliches CSS und JavaScript inline, absolut keine externen Abhängigkeiten, CDNs, Bilder oder Web Fonts), die ein interaktives „lebendiges digitales Terrarium“ rendert — ein versiegeltes Glasgefäß in der Mitte des Bildschirms, das einen sich selbst erhaltenden Miniatur-Regenwald enthält, der in Echtzeit wächst. In jedem modernen Browser geöffnet, muss es sofort mit 60fps laufen, ohne Build-Schritt. Kernszene und Layout: Zentriere die Komposition symmetrisch und behandle das Glasgefäß als Hero-Bühne vor einem tiefen, vignettierte dunklen Hintergrund (radialer Verlauf von einer sanft moosbeleuchteten Mitte bis zu nahezu schwarzen Rändern), sodass der gesamte Fokus auf dem Gefäß liegt. Rendere alles auf einem vollflächigen HTML5 Canvas unter echtem Glassmorphism-DOM/CSS-Chrome: Die Gefäßwand muss überzeugende Glaseigenschaften zeigen — gekrümmte Brechungs-Highlights, einen hellen spiegelnden Rim-Light-Streifen, eine dezente milchige Unschärfe und verteilte Kondensationstropfen mit winziger Linsenwirkung — umgesetzt mit geschichteten radialen/linearen Verläufen, backdrop-filter blur, halbtransparenten weißen Konturen und weichen box-shadows. Im Inneren des Gefäßes befindet sich unten dunkler, feuchter Humusboden und ein dezenter volumetrischer Nebel, der langsam driftet. Die drei technischen Ebenen, die gestapelt werden und gleichzeitig existieren müssen (hier trennt sich ein schwaches von einem starken Model — ein schwaches Model erzeugt ein statisches Bild, ein starkes erweckt das ganze Gefäß zum Leben): 1. Rekursives L-system-Wachstum: Ranken, Farnwedel und Moose werden durch ein L-system / einen rekursiven Verzweigungsalgorithmus erzeugt und animieren ihr Entfalten über die Zeit — Stängel verlängern sich, Zweige unterteilen sich, Wedel entrollen sich, Blätter skalieren mit Easing hinein. Das Wachstum ist organisch und pro Zweig leicht randomisiert (Winkel-Jitter, Dickenverjüngung, Längenabnahme), sodass nach dem Neuladen keine zwei Pflanzen identisch aussehen. 2. Partikelsystem: Bernsteinfarbene, glühwürmchenartige Lichtpartikel (Dutzende) treiben und schweben mit weichem additivem Glow und sanfter Parallaxe durch den Nebel, dazu aufsteigende Kondensations-/Pollenkörnchen; Partikel reagieren subtil auf neu gewachsene Pflanzen. 3. Tag-Nacht-Lichtzyklus: Eine kontinuierliche Umgebungslicht-Schleife führt das von oben kommende Key Light von kühlem weißem Morgenlicht → warmem goldenem Abendlicht → tiefer indigo Nacht und zurück und färbt dabei die gesamte Szene, die Glas-Highlights, den Nebel und die Pflanzentöne entsprechend um. Pflanzen zeigen Phototropismus — Stängel biegen sich und neigen ihre Spitzen zur jeweils aktuellen Lichtrichtung, während sie sich bewegt. Primäre Interaktion: Ein Klick irgendwo auf die Glaswand oder ins Innere des Gefäßes lässt an der x-Position des Klicks einen einzelnen Samen in den Humus fallen, und dieser Samen durchläuft eine vollständige, sichtbare Lebensphase in Sequenz — der Samen fällt und setzt sich, keimt zu einem Spross, der Spross verzweigt sich rekursiv per L-system und bildet bei Reife eine kleine leuchtende Blüte — jede Phase mit Easing und klar lesbar, mit einer weichen Welle/Staubwolke beim Aufkommen. Mehrere Klicks erzeugen mehrere Pflanzen, die nebeneinander existieren und weiterwachsen und das Terrarium allmählich zu einem dichteren Dickicht füllen. Füge ein paar dezente Inline-Steuerelemente in glassmorphischen Pill-Buttons hinzu (z. B. „Terrarium zurücksetzen“ und ein Toggle „Tag/Nacht: auto ⇄ ziehen“, mit dem der Nutzer die Tageszeit scrubben kann, plus optional Pause). Zeige eine dezente Hinweiszeile („Tippe auf das Glas, um einen Samen zu pflanzen“), die nach der ersten Interaktion ausblendet. Palette und Stimmung: Waldiges Tinten-Grün und moosiges Gelbgrün für das Laub, Bernstein-/Honig-Glow für Lichtpartikel und Blüten, kühle Teal-Glas-Tönungen am Gefäß, warme Gold- und kühle Indigo-Washes im Tag-Nacht-Verlauf. Das Gesamtgefühl ist ruhig, atmend, meditativ — langsame, sanfte Bewegung, keine harten Übergänge. Technische Anforderungen: Verwende requestAnimationFrame mit Delta-Time, damit die Animation unabhängig von der Framerate ist; mache das Canvas responsiv für Größenänderungen des Fensters mit korrekter devicePixelRatio-Skalierung und halte das Gefäß zentriert; begrenze Partikel- und Zweigzahlen sinnvoll, damit alles flüssig bleibt; halte alle Zufallswerte pro Pflanze seeded, damit das Wachstum natürlich wirkt. Alles — Geometrie, Glow, Glas, Nebel, Licht, Partikel und die rekursiven Pflanzen — muss im Code gezeichnet oder berechnet werden, ohne externe Assets. Liefere ausschließlich das vollständige HTML-Dokument, bereit zum Speichern als einzelne .html-Datei und Öffnen.