Kimi API for Vision-to-Code Generation

Zbuduj kompletną, jednoplikową stronę HTML z grywalną arcade'ową grą Snake, z całym CSS i JavaScript osadzonym inline oraz bez żadnych zewnętrznych zależności, CDN-ów, obrazów ani fontów. Renderuj planszę na canvasie w nowoczesnej kolorystyce neon-on-dark, z płynnym ruchem i delikatną, świecącą smugą za wężem. Obsłuż sterowanie strzałkami i WASD oraz gesty przesuwania na urządzeniach dotykowych, pokazuj wynik na żywo i trwały rekord, a wraz ze wzrostem wyniku stopniowo przyspieszaj grę. Wywołuj mały wybuch cząsteczek za każdym razem, gdy jedzenie zostanie zjedzone, wyświetlaj animowaną nakładkę końca gry z przyciskiem restartu i utrzymuj responsywny układ, tak aby plansza pozostawała wyśrodkowana i czytelna zarówno na desktopie, jak i na urządzeniach mobilnych.

Utwórz pojedynczy, w pełni samowystarczalny plik HTML (cały CSS i JavaScript inline, absolutnie bez zewnętrznych zależności, CDN-ów, obrazów ani web fontów), który renderuje interaktywne „żywe cyfrowe terrarium” — szczelnie zamknięty szklany słój umieszczony na środku ekranu, zawierający samowystarczalny miniaturowy las deszczowy rosnący w czasie rzeczywistym. Po otwarciu w dowolnej nowoczesnej przeglądarce musi od razu działać w 60fps, bez etapu buildowania. Główna scena i układ: wyśrodkuj kompozycję symetrycznie, traktując szklany słój jako główną scenę na głębokim, winietowanym ciemnym tle (gradient radialny od miękkiego, mchowo podświetlonego centrum przechodzący ku niemal czarnym krawędziom), tak aby cała uwaga skupiała się na słoju. Renderuj wszystko na pełnoekranowym HTML5 Canvas, warstwowanym pod rzeczywistą glassmorphismową oprawą DOM/CSS: ścianka słoja musi pokazywać autentyczne cechy szkła — zakrzywione refleksy refrakcji, jasną smugę światła krawędziowego, delikatne matowe rozmycie oraz rozproszone krople kondensacji z drobnym efektem soczewkowania — uzyskane za pomocą warstwowych gradientów radialnych/liniowych, backdrop-filter blur, półprzezroczystych białych obrysów i miękkich box-shadow. Wewnątrz słoja na dnie znajduje się ciemna, wilgotna próchnica oraz subtelna wolumetryczna mgiełka, która powoli dryfuje. Trzy warstwy techniczne, które muszą się na siebie nakładać i współistnieć (to tutaj odróżnia się słabe modele od mocnych — słaby model stworzy statyczny obrazek, mocny ożywi cały słój): 1. Rekurencyjny wzrost L-system: pnącza, liście paproci i mchy są generowane przez algorytm L-system / rekurencyjnego rozgałęziania i animują swoje rozwijanie w czasie — łodygi się wydłużają, gałęzie dzielą, liście paproci rozwijają, a liście skalują się z easingiem. Wzrost jest organiczny i lekko losowy dla każdej gałęzi (odchylenie kąta, zwężanie grubości, zanik długości), dzięki czemu po ponownym wczytaniu żadne dwie rośliny nie wyglądają identycznie. 2. System cząsteczek: bursztynowe świetliki podobne do drobinek światła (dziesiątki) dryfują i kołyszą się w mgle z miękkim addytywnym blaskiem i delikatną paralaksą, a do tego unoszą się drobinki kondensacji/pyłku; cząsteczki subtelnie reagują na nowo wyrosłe rośliny. 3. Cykl dnia i nocy: ciągła pętla światła otoczenia przesuwa główne światło z góry od chłodnego białego świtu → ciepłego złotego zmierzchu → głębokiej indygo nocy i z powrotem, odpowiednio przebarwiając całą scenę, refleksy szkła, mgłę i odcienie roślin. Rośliny wykazują fototropizm — łodygi wyginają się i kierują czubki ku aktualnemu kierunkowi światła, gdy ten się porusza. Główna interakcja: kliknięcie w dowolnym miejscu na ściance słoja lub w jego wnętrzu upuszcza pojedyncze nasiono do próchnicy w pozycji x kliknięcia, a to nasiono odtwarza pełny, widoczny cykl życia w sekwencji — nasiono spada i osiada, kiełkuje pęd, pęd rozgałęzia się rekurencyjnie przez L-system, a po osiągnięciu dojrzałości rozkwita małym świecącym kwiatem — każdy etap z easingiem i wyraźnie czytelny, z miękką falą/obłoczkiem pyłu przy lądowaniu. Wielokrotne kliknięcia tworzą wiele roślin, które współistnieją i dalej rosną, stopniowo wypełniając terrarium gęstszymi zaroślami. Dodaj kilka subtelnych kontrolek inline w glassmorphismowych przyciskach typu pill (np. „Reset terrarium” oraz przełącznik „Day/Night: auto ⇄ drag”, w którym użytkownik może przewijać porę dnia, plus opcjonalną pauzę). Dodaj delikatną linię podpowiedzi („tap the glass to plant a seed”), która znika po pierwszej interakcji. Paleta i nastrój: leśna atramentowa zieleń oraz mchowa żółtawa zieleń liści, bursztynowo-miodowy blask drobinek światła i kwiatów, chłodne turkusowo-szklane odcienie słoja, ciepłe złoto i chłodne indygo przechodzące przez cykl dnia i nocy. Całość ma sprawiać wrażenie cichej, oddychającej, medytacyjnej sceny — powolny łagodny ruch, bez ostrych przejść. Wymagania techniczne: użyj requestAnimationFrame z delta-time, aby animacja była niezależna od liczby klatek; spraw, by canvas responsywnie reagował na zmianę rozmiaru okna z poprawnym skalowaniem devicePixelRatio i utrzymaniem słoja w centrum; rozsądnie ogranicz liczbę cząsteczek i gałęzi, aby zachować płynność; zachowaj całe losowanie seeded per-plant, żeby wzrost wyglądał naturalnie. Wszystko — geometria, blask, szkło, mgła, oświetlenie, cząsteczki i rekurencyjne rośliny — musi być rysowane lub obliczane w kodzie, bez żadnych zewnętrznych zasobów. Dostarcz wyłącznie kompletny dokument HTML, gotowy do zapisania jako jeden plik .html i otwarcia.