Kimi API for Vision-to-Code Generation

أنشئ صفحة HTML كاملة في ملف واحد للعبة Snake أركيد قابلة للعب، مع تضمين كل CSS وJavaScript داخل الملف ومن دون أي تبعيات خارجية أو CDNs أو صور أو خطوط. ارسم اللوحة على canvas بنظام ألوان حديث نيون على خلفية داكنة، مع حركة سلسة ومسار توهج ناعم خلف الأفعى. ادعم التحكم بمفاتيح الأسهم وWASD بالإضافة إلى إيماءات السحب على أجهزة اللمس، واعرض النتيجة مباشرةً وأعلى نتيجة محفوظة، وزد سرعة اللعبة تدريجيًا كلما ارتفعت النتيجة. شغّل انفجارًا صغيرًا من الجسيمات كلما أُكل الطعام، واعرض طبقة نهاية لعبة متحركة مع زر إعادة التشغيل، واجعل التخطيط متجاوبًا بحيث تبقى اللوحة في المنتصف وواضحة على سطح المكتب والجوال.

أنشئ ملف HTML واحدًا ومكتفيًا بذاته بالكامل (كل CSS وJavaScript مضمّنان داخله، ومن دون أي تبعيات خارجية أو CDNs أو صور أو خطوط ويب إطلاقًا) يعرض "تراريومًا رقميًا حيًا" تفاعليًا — جرة زجاجية محكمة في وسط الشاشة تحتوي على غابة مطيرة مصغّرة مكتفية ذاتيًا تنمو في الوقت الحقيقي. عند فتحه في أي متصفح حديث يجب أن يعمل فورًا بمعدل 60fps من دون خطوة بناء. المشهد الأساسي والتخطيط: وسّط التكوين بشكل متناظر، واجعل الجرة الزجاجية المسرح الرئيسي فوق خلفية داكنة عميقة ذات تظليل حواف (تدرج شعاعي يبدأ من مركز مضاء بلون طحلبي ناعم ويتلاشى إلى حواف شبه سوداء) حتى ينصب كل التركيز على الجرة. ارسم كل شيء على HTML5 Canvas بحجم النافذة الكاملة أسفل واجهة DOM/CSS حقيقية بأسلوب glassmorphism: يجب أن يُظهر جدار الجرة خصائص زجاجية حقيقية — لمعات انكسار منحنية، وشريط ضوء حافة لامع شديد الانعكاس، وطمسًا خفيفًا يشبه الزجاج المصنفر، وقطرات تكاثف متناثرة ذات تأثير عدسي صغير — وذلك عبر طبقات من التدرجات الشعاعية/الخطية، وbackdrop-filter blur، وحدود بيضاء شبه شفافة، وظلال صندوقية ناعمة. داخل الجرة توجد تربة دُبالية داكنة رطبة في الأسفل وضباب حجمي خافت ينساب ببطء. الطبقات التقنية الثلاث التي يجب أن تتراكب وتتعايش (هنا يظهر الفرق بين النماذج الضعيفة والقوية — النموذج الضعيف سينتج صورة ثابتة، أما القوي فيجعل الجرة كلها نابضة بالحياة): 1. نمو L-system تكراري: تُولَّد الكروم وسعف السرخس والطحالب بواسطة L-system / خوارزمية تفرع تكرارية، وتتحرك أثناء تفتحها مع مرور الوقت — تستطيل السيقان، وتنقسم الفروع، وتنفك السعفات، وتكبر الأوراق بتدرج easing. يجب أن يكون النمو عضويًا وعشوائيًا قليلًا لكل فرع (اهتزاز الزاوية، وتدرج السماكة، وتناقص الطول) حتى لا تبدو أي نبتتين متطابقتين عند إعادة التحميل. 2. نظام جسيمات: جسيمات ضوء كهرمانية شبيهة باليراعات (بالعشرات) تنجرف وتتأرجح داخل الضباب بتوهج إضافي ناعم ومنظور parallax لطيف، إضافة إلى ذرات تكاثف/لقاح صاعدة؛ وتتفاعل الجسيمات بمهارة مع النباتات حديثة النمو. 3. دورة إضاءة ليل ونهار: حلقة إضاءة محيطية مستمرة تحرّك الضوء الرئيسي من الأعلى من فجر أبيض بارد → غسق ذهبي دافئ → ليل نيلي عميق ثم تعود، مع إعادة تلوين المشهد كله، ولمعات الزجاج، والضباب، ودرجات النباتات وفقًا لذلك. تُظهر النباتات انتحاءً ضوئيًا — تنحني السيقان وتميل أطرافها نحو اتجاه الضوء الحالي أثناء حركته. التفاعل الأساسي: يؤدي النقر في أي مكان على جدار الجرة أو داخلها إلى إسقاط بذرة واحدة في التربة عند موضع x للنقرة، وتعرض تلك البذرة دورة حياة كاملة ومرئية بالتسلسل — تسقط البذرة وتستقر، ثم تنبت برعمًا، ويتفرع البرعم تكراريًا عبر L-system، ثم يزهر زهرة صغيرة متوهجة عند النضج — مع easing في كل مرحلة وبوضوح بصري، إضافة إلى تموج ناعم/نفخة غبار عند الهبوط. تؤدي النقرات المتعددة إلى إنشاء نباتات متعددة تتعايش وتواصل النمو، لتملأ التراريوم تدريجيًا بأجمة أكثر كثافة. أضف زوجًا من عناصر التحكم المضمنة والهادئة كأزرار كبسولية بأسلوب glassmorphism (مثل "إعادة ضبط التراريوم" ومفتاح تبديل "النهار/الليل: تلقائي ⇄ سحب" حيث يستطيع المستخدم تمرير وقت اليوم، مع خيار إيقاف مؤقت اختياري). اعرض سطر تلميح خافتًا ("انقر على الزجاج لزرع بذرة") يتلاشى بعد أول تفاعل. لوحة الألوان والمزاج: أخضر حِبري غابي ودرجات أخضر مصفر طحلبية للأوراق، وتوهج كهرماني/عسلي لجسيمات الضوء والأزهار، ودرجات زجاجية باردة مائلة إلى التركواز على الجرة، وغسلات ذهبية دافئة ونيلية باردة عبر انتقال الليل والنهار. الإحساس العام هادئ، نابض كأنه يتنفس، وتأملي — حركة لطيفة بطيئة ومن دون انتقالات حادة. المتطلبات التقنية: استخدم requestAnimationFrame مع delta-time حتى تكون الحركة مستقلة عن معدل الإطارات؛ اجعل canvas متجاوبًا مع تغيير حجم النافذة مع تحجيم صحيح وفق devicePixelRatio وحافظ على تمركز الجرة؛ ضع حدًا معقولًا لأعداد الجسيمات/الفروع حتى يبقى الأداء سلسًا؛ واجعل كل العشوائية seeded لكل نبات حتى يبدو النمو طبيعيًا. يجب أن يُرسم أو يُحسب كل شيء — الهندسة، والتوهج، والزجاج، والضباب، والإضاءة، والجسيمات، والنباتات التكرارية — بالكود، ومن دون أي أصول خارجية. سلّم مستند HTML الكامل فقط، جاهزًا للحفظ كملف .html واحد وفتحه.