AI Games Studio
درس تطبيقي من عدنان بن عبد العالي

طلب. وكود.
ونتيجة مرئية.

أضف دليل How to play إلى Harvest Tunisia. يستغرق نحو 10–15 دقيقة بعد تثبيت Git وNode. يكفي Codex ومتصفح، ويسهّل VS Code مراجعة التعديلات. لا يحتاج الدرس إلى Blender أو Cocos أو MCP.

1. لاحظ الفرق

لا تحتوي النسخة الأولى على نافذة تعليمات. تضيف النسخة المكتملة زرًا قرب Sound off يشرح القاعدة المحفوظة والعروض التجريبية.

1. لاحظ الفرق

2. ابدأ من النسخة نفسها

يتضمن main النتيجة المكتملة. استخدم نسخة جديدة والفرع التالي لإعادة التمرين دون استبدال عملك الموجود.

git clone https://github.com/Adnen-Ben-Abdelaali/ai-games-studio.git ai-games-studio-tutorial
cd ai-games-studio-tutorial
git switch -c tutorial/how-to-play 42db00fc7c36f1de88c0d59d2bf965ee9056e31b
npm ci
npm run demo
npm test

افتح المجلد في Codex. شغّل المثال في طرفية أخرى وافتح http://127.0.0.1:8080. استخدم npm.cmd وnpx.cmd في PowerShell عند الحاجة.

npx --yes http-server@14.1.1 examples/html5 -a 127.0.0.1 -p 8080 -c-1

3. صغ طلبًا يمكن التحقق منه

أضف زرًا قابلًا للاستخدام باسم How to play بجوار Sound off في Harvest Tunisia. افتح نافذة حوار HTML أصلية بعنوان وثلاث تعليمات وتنبيه إلى عدم وجود مدفوعات وأن العروض تجريبية، مع أزرار إغلاق مسماة وزر Got it. اقرأ القاعدة والعدد من project.template. حافظ على الإغلاق بواسطة Escape وعودة التركيز وملاءمة عرض 390 بكسل. لا تغيّر قواعد اللعبة أو المكافآت أو السلوكيات أو وقت تشغيل Cocos. عدّل المصادر في tools/ وأضف npm run export:demo لإعادة توليد examples/html5 من المثال الموجود دون استبدال تعديلاته. أعد التوليد وشغّل الاختبارات واعرض فرق الكود.

4. راجع الكود وأعد التوليد

تشمل التعديلات tools/harvest.html وtools/harvest-player.js وtools/harvest.css وأمر التصدير. تستخدم النافذة showModal() ويتبع نصها kind وmatchCount. تبقى قواعد توليد الجولات وتقييمها كما هي.

اعرض الالتزام وفرق الكود الفعلي ↗
npm run export:demo
npm test
git diff

5. اختبر التفاعل

  • يفتح الزر النافذة، ويغلقها Escape مع إعادة التركيز.
  • يعيد Enter فتحها، ويغلقها Got it.
  • تظهر قاعدة النموذج دون تثبيت ثلاثة رموز لكل الألعاب.
  • عند 390×844 لا تتجاوز النافذة العرض أفقيًا.
  • يعمل مثال الفوز الموجّه وتنجح الاختبارات الستة الموجودة.

أُجريت هذه الفحوص على المثال المكتمل. العرض الضيق في المتصفح ليس اختبارًا على هاتف فعلي ولا تدقيقًا شاملًا لإمكانية الوصول. إذا كانت الملفات مخزّنة مؤقتًا فأعد تحميلها قبل تعديل الكود مجددًا.

5. اختبر التفاعل

وماذا عن المخططات؟

يعدّل هذا الدرس ملفات HTML5 المصدرية، ولا ينشئ عقد UML تلقائيًا. تُطبّق تغييرات نموذج السلوك عبر MCP أو المحررات المدعومة، مع تطبيق صريح والتحقق من القيم.

اقرأ الدرس العربي الكامل على GitHub ↗