على وكيل الذكاء الاصطناعي v0.dev بعد التسجيل بال gmail نلصق ماتم نسخه⚙️👇🏻⚙️👇🏻⚙️👇🏻أنت وكيل ذكاء اصطناعي متخصص في تطوير تطبيقات الألعاب التعليمية باستخدام تقنيات الويب (HTML, CSS, JavaScript).المطلوب منك تصميم لعبة تفاعلية تعليمية بعنوان "إشارة المرور" موجهة للأطفال من فئة متلازمة داون ضمن المرحلة العمرية لرياض الأطفال في مصر.🔹 الأهداف التربوية:تعزيز الانتباه والتركيز من خلال التفاعل البصري مع ألوان الإشارة (أحمر – أصفر – أخضر).تدريب الطفل على اتباع القواعد والتعليمات بطريقة ممتعة.تنمية مهارة الانتظار واتخاذ القرار في مواقف اللعب.🔹 الخصائص الفنية:التطوير باستخدام HTML وCSS وJavaScript فقط.واجهة بسيطة وملونة بألوان واضحة وتباين مرتفع لتناسب الإدراك البصري للأطفال ذوي متلازمة داون.استخدام مؤثرات صوتية لطيفة (مثل صوت صفارة مرور، تصفيق عند الفوز).تصميم متوافق مع شاشات الهواتف والأجهزة اللوحية.🔹 السيناريو التعليمي داخل اللعبة:اللعبة تتضمن 3 شخصيات فقط (3 أطفال):1. الطفل الأول: يمثل "المارة" الذين يجب أن يتوقفوا عند اللون الأحمر.2. الطفل الثاني: يمثل "الضوء الأصفر" الذي يُنبه للانتباه.3. الطفل الثالث: يمثل "الضوء الأخضر" الذي يسمح بالعبور.🔹 قواعد اللعبة:عند ظهور اللون الأحمر يجب أن يتوقف اللاعب فورًا.عند اللون الأصفر يستعد اللاعب للانتقال.عند اللون الأخضر يتحرك اللاعب بسرعة نحو الهدف.كل تفاعل صحيح يمنح اللاعب نقطة فوز (Win) ويُظهر مكافأة بصرية وصوتية تشجعية.فكرة اللعبة قائمة على "Win–Win" بحيث يحقق جميع الأطفال مكسبًا جماعيًا عند الالتزام بالقواعد.🔹 المخرجات المطلوبة:كود متكامل جاهز للتنفيذ في متصفح أو ضمن تطبيق جوال عبر v0.dev.واجهة واضحة ومناسبة لفئة ذوي الاحتياجات العقلية البسيطة.تعليق توضيحي داخل الأكواد يشرح دور كل عنصر لتسهيل التطوير المستقبلي.🔹 لغة المحتوى:استخدام اللغة العربية المبسطة في النصوص والتوجيهات الصوتية داخل اللعبة.تضمين التعليمات بلغة ودودة ومفهومة مثل:"قف!" – "استعد!" – "انطلق!"💡 نصيحة من خبير البرمجة التربوية:“قم الآن بإنشاء النموذج الأولي (Prototype) للعبة داخل مشروع ويب متكامل مع كود HTML وCSS وJavaScript مع إمكانية تعديل الألوان والمحتوى من خلال واجهة مرئية سهلة.”
تم إنشاء لعبة "إشارة المرور" التعليمية! 🚦✨
اللعبة تحتوي على جميع المميزات المطلوبة:
🎯 المميزات الرئيسية:
🎮 كيفية اللعب:
تم إصلاح ملف globals.css! ✅ الآن يتبع البنية الصحيحة المطلوبة مع الحفاظ على التأثيرات الحركية المخصصة للعبة التعليمية.
تم إصلاح الخطأ! ✅ أزلت السطر الذي يحتوي على outline-ring/50 غير الصالح من @layer base.
تم إزالة @layer base بالكامل لحل مشكلة outline-ring/50. اللعبة الآن يجب أن تعمل بشكل صحيح! 🎮✨