Kimi API for Vision-to-Code Generation

Crée une page HTML complète dans un seul fichier pour un jeu d’arcade Snake jouable, avec tout le CSS et le JavaScript intégrés, et aucune dépendance externe, CDN, image ni police. Affiche le plateau sur un canvas avec une palette moderne néon sur fond sombre, des déplacements fluides et une douce traînée lumineuse derrière le serpent. Prends en charge les flèches directionnelles et les contrôles WASD, ainsi que les gestes de balayage sur les appareils tactiles, affiche le score en direct et un meilleur score persistant, puis augmente progressivement la vitesse du jeu à mesure que le score grimpe. Déclenche une petite explosion de particules chaque fois que la nourriture est mangée, affiche une superposition animée de fin de partie avec un bouton de redémarrage, et conserve une mise en page responsive afin que le plateau reste centré et lisible sur ordinateur comme sur mobile.

Crée un fichier HTML unique et entièrement autonome (tout le CSS et le JavaScript intégrés, absolument aucune dépendance externe, CDN, image ni police web) qui affiche un « terrarium numérique vivant » interactif — un bocal en verre scellé placé au centre de l’écran, contenant une forêt tropicale miniature autosuffisante qui pousse en temps réel. Ouvert dans n’importe quel navigateur moderne, il doit s’exécuter immédiatement à 60fps, sans étape de build. Scène principale et mise en page : centre la composition de façon symétrique, en traitant le bocal en verre comme la scène principale sur un arrière-plan sombre profond avec vignettage (dégradé radial partant d’un centre doucement éclairé façon mousse et s’estompant vers des bords presque noirs), afin que toute l’attention se porte sur le bocal. Dessine l’ensemble sur un HTML5 Canvas plein écran, placé sous une véritable interface DOM/CSS glassmorphism : la paroi du bocal doit présenter de vraies qualités de verre — reflets de réfraction courbes, traînée brillante de rim-light spéculaire, léger flou givré et gouttelettes de condensation dispersées avec un minuscule effet de lentille — obtenues avec des dégradés radiaux/linéaires superposés, backdrop-filter blur, traits blancs semi-transparents et ombres portées douces. À l’intérieur du bocal se trouvent, au fond, un loam sombre et humide, ainsi qu’une légère brume volumétrique qui dérive lentement. Les trois couches techniques qui doivent s’empiler et coexister (c’est là que les modèles faibles se distinguent des modèles forts : un modèle faible produira une image statique, un modèle fort rendra tout le bocal vivant) : 1. Croissance récursive par L-system : les lianes, frondes de fougères et mousses sont générées par un L-system / algorithme de ramification récursive et animent leur déploiement au fil du temps — les tiges s’allongent, les branches se subdivisent, les frondes se déroulent, les feuilles apparaissent en changeant d’échelle avec easing. La croissance est organique et légèrement aléatoire pour chaque branche (variation d’angle, affinement de l’épaisseur, décroissance de la longueur), afin qu’aucune plante ne soit identique après un rechargement. 2. Système de particules : des lueurs ambrées façon lucioles (plusieurs dizaines) dérivent et ondulent dans la brume avec un doux éclat additif et une légère parallaxe, accompagnées de particules ascendantes de condensation/pollen ; les particules réagissent subtilement aux nouvelles plantes qui poussent. 3. Cycle d’éclairage jour-nuit : une boucle continue de lumière ambiante fait évoluer la lumière principale zénithale de l’aube blanc froid → crépuscule doré chaud → nuit indigo profonde, puis revient en arrière, en recolorant toute la scène, les reflets du verre, la brume et les teintes des plantes en conséquence. Les plantes manifestent un phototropisme : les tiges se courbent et orientent leurs pointes vers la direction actuelle de la lumière à mesure qu’elle se déplace. Interaction principale : cliquer n’importe où sur la paroi ou à l’intérieur du bocal fait tomber une graine unique dans le loam à la position x du clic, et cette graine joue une séquence complète et visible de cycle de vie — la graine tombe et se pose, germe en pousse, la pousse se ramifie récursivement via le L-system, puis fleurit en une petite fleur lumineuse à maturité — chaque étape étant animée avec easing et clairement lisible, avec une douce ondulation / bouffée de poussière à l’atterrissage. Plusieurs clics génèrent plusieurs plantes qui coexistent et continuent de pousser, remplissant progressivement le terrarium jusqu’à former un fourré plus dense. Ajoute quelques contrôles intégrés subtils sous forme de boutons pilules glassmorphic (par exemple « Réinitialiser le terrarium » et un interrupteur « Jour/Nuit : auto ⇄ glisser » permettant à l’utilisateur de faire défiler l’heure de la journée, ainsi qu’une pause optionnelle). Prévois une ligne d’indice discrète (« touchez le verre pour planter une graine ») qui s’estompe après la première interaction. Palette et ambiance : feuillages vert encre forestier et vert-jaune moussu, lueur ambre/miel pour les particules lumineuses et les fleurs, teintes froides de verre bleu-vert sur le bocal, lavis d’or chaud et d’indigo froid au fil du cycle jour-nuit. L’impression générale doit être calme, respirante, méditative — des mouvements lents et doux, sans transitions brutales. Exigences techniques : utilise requestAnimationFrame avec delta-time afin que l’animation soit indépendante du frame-rate ; rends le canvas responsive au redimensionnement de la fenêtre avec une mise à l’échelle correcte selon devicePixelRatio et garde le bocal centré ; limite raisonnablement le nombre de particules et de branches pour préserver la fluidité ; garde tout l’aléatoire seedé par plante afin que la croissance paraisse naturelle. Tout — géométrie, éclat, verre, brume, éclairage, particules et plantes récursives — doit être dessiné ou calculé en code, sans aucun asset externe. Fournis uniquement le document HTML complet, prêt à être enregistré comme un fichier .html unique et ouvert.