ثلاثة ديال ألعاب الويب ثلاثية الأبعاد مولّدين بـ Claude Opus 5.5: دليل البناء محلياً والتجربة

تقديم المشروع

claude-opus-5-5-demo هو تجربة لقدرات Claude Opus 5.5 فـ توليد الكود. المستودع فيه ثلاثة ديال ألعاب الويب ثلاثية الأبعاد اللي تقدر تلعبهم مباشرة، وكل مشروع تكمّل باستعمال غير prompt واحد، داخل جلسة وحدة مع Claude Code، من البحث على المعلومات وبناء المشروع والبرمجة والبناء والاختبار حتى للنشر.

حسب شرح المستودع، الكود المصدري ديال الألعاب الثلاثة كامل مولّد من طرف النموذج، وما تبدل فيه والو يدوياً. المشروع كيستعمل Three.js لبناء المشاهد ثلاثية الأبعاد، ومن بعد esbuild كيجمع البرنامج وكيضمّنو داخل ملف HTML واحد. النماذج والخامات والحركات والمؤثرات الصوتية كاملين مولّدين برمجياً بالكود، وما كيعتمدوش على صور أو صوتيات خارجية ولا على موارد ديال طرف ثالث.

هاد الشي ماشي قالب تقليدي لتطوير الألعاب، بل مجموعة ديال نتائج تجربة one-shot لتوليد الكود، قابلة للتشغيل والبناء والفحص.

الألعاب الثلاثة ومميزاتها

البجع كيركب البيكالة

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

• W، S: التسريع والتبطاء.
• A، D: تبديل المسار والاقتراب من الحوت.
• المسافة: القفز.
• T: بسط الجناحين ورفع العجلة القدّامية.
• السياقة الذاتية: إلا ما تحركتيش مدة طويلة، البجع غادي يتبع الحوت بوحدو.

اللعبة فيها حتى 14 إنجاز، و5 ديال أنماط الكاميرا، وأزرار للمس، وموسيقى كيتصاوب صوتها مباشرة فالمتصفح وكتتبدل مع إيقاع الدواسات.

جرّب لعبة البجع كيركب البيكالة

عبور خط النار · سفينة النقل

هاد المشروع كيحاول يعاود يبني خريطة سفينة النقل الكلاسيكية ديال «عبور خط النار». فمرحلة التوليد، تدار البحث أولاً على مخطط الخريطة والأدلة، ومن بعد تبنى المشهد اعتماداً على الخصائص ديال السطح الطويل، ونقط ظهور اللاعبين فالكابينتين فالجوج ديال الأطراف، والحاويات المائلة على شكل V فالوسط، والقنوات ذات الاتجاه الواحد على الجانبين.

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

جرّب لعبة عبور خط النار · سفينة النقل

QQ Speed

مشروع السباق كيعيد عمليات Shift للدريفت، وCtrl للنيترو، والدفع القصير، والدفع المزدوج، والرجوع للوضعية الأصلية، وكيقدم أربعة ديال الحلبات مصممين على طريقة الخرائط الرسمية.

• المدينة 11: حلبة ليلية وسط المدينة، فيها 11 منعطف ومنعطفات حادة على شكل دبوس الشعر.
• الافتتان ببحر إيجة: كتتميز بالطلوع والمنعطفات المتتالية.
• هرم الفرعون: فيها منصة للقفز فآخر الطريق المستقيم.
• مغامرة الثلج: كتستعمل بنية تقاطع على شكل 8.

قبل التطوير الرسمي، شكل الحلبة كيتولد أولاً بسكريبت باش يتراجع توزيع المنعطفات ونقط التقاطع.

جرّب لعبة QQ Speed

التحضير قبل البداية

البناء محلياً كيحتاج بيئة قادرة تشغل npm وسكريبتات Node.js. المستودع ما كيحتافظش بـ node_modules/ ولا بـ dist/، لذلك من بعد ما تنسخ أو تحمّل الكود المصدري، خاصك تثبت الاعتماديات وتدير البناء لكل لعبة باغي تجربها.

المشاريع الفرعية الثلاثة مستقلة على بعضها، وتقدر تبني غير واحد منها أو تبنيهم واحد بواحد. من بين الاعتماديات الرئيسية كاينين Three.js وesbuild.

بنية المستودع

pelican-bike/\n  src/\n  index.template.html\n  build.mjs\n  package.json\n\ncf-transport-ship/\n  src/\n  build.mjs\n  package.json\n\nqq-speed/\n  src/\n  build.mjs\n  wrangler.jsonc\n  package.json

pelican-bike/src/ فيه 11 وحدة، كيتكلفو بالبجع والبيكالة والمحيط والحوت والسماء والمؤثرات والصوت وغيرها. cf-transport-ship/src/ فيه 18 وحدة، كيغطي الخريطة والأسلحة والروبوتات واللاعب والفيزياء ونموذج السلاح بمنظور الشخص الأول. qq-speed/src/ فيه 15 وحدة، كيتعلق بالسيارة والحلبة والتخطيط والذكاء الاصطناعي والخريطة والأدوات.

التثبيت والبناء

الطريقة الأولى: بناء لعبة البجع كيركب البيكالة

cd pelican-bike\nnpm install\nnode build.mjs

الطريقة الثانية: بناء لعبة عبور خط النار · سفينة النقل

cd cf-transport-ship\nnpm install\nnode build.mjs

الطريقة الثالثة: بناء لعبة QQ Speed

cd qq-speed\nnpm install\nnode build.mjs

من بعد ما كيكمل البناء ديال كل مشروع، الملفات الناتجة كيتكتبو فـ dist/index.html داخل المجلد المعني. حسب طريقة الاستعمال اللي كيقدمها المستودع، غير حل هاد الملف فالمتصفح باش تبدا اللعب.

الحجم ديال الملفات الناتجة الثلاثة كيتراوح تقريباً بين 700 KB و840 KB. حيث إن JavaScript مجموع داخل HTML، ما كايناش حاجة باش يتحمّلو نماذج اللعبة أو الخامات أو الموارد الصوتية وقت التشغيل.

الطريقة الأساسية للاستعمال

1. اختار لعبة وحدة من بين المجلدات الفرعية الثلاثة.
2. دخل للمجلد المعني وشغّل npm install.
3. نفّذ node build.mjs.
4. تأكد بلي تخلق الملف dist/index.html.
5. حل هاد الملف فالمتصفح.
6. استعمل الكلافي أو أزرار اللمس حسب نوع اللعبة باش تبدا اللعب.

إلا كنت باغي غير تجربة سريعة وما باغيش تفحص الكود أو تعاود البناء، تقدر تفتح مباشرة الروابط المتاحة على الإنترنت، حيث المشاريع منشورة على Cloudflare Pages أو CDN.

فهم طريقة البناء فملف واحد

المقصود بـ «HTML فملف واحد» هو أن الصفحة النهائية كتضمّن JavaScript المجموع داخل HTML. مجلد src/ باقي مقسم لوحدات متعددة حسب الوظيفة، باش يسهل التطوير والصيانة؛ ومن بعد تشغيل build.mjs، كيجمع esbuild هاد الوحدات فملف قابل للتشغيل فالمتصفح.

مشروع البجع كيستعمل كذلك index.template.html كقالب للصفحة، وكيضيف أثناء البناء JavaScript المجموع وog:image. المستودع كيحط غير الملفات المصدرية، لذلك من بعد أي تعديل فالكود خاصك تعاود تشغّل سكريبت البناء باش تحصل على dist/index.html جديد.

قراءة متقدمة ونصائح للتصحيح

تحديد الوظائف حسب الوحدات

ملي كتقرا الكود، ما كايناش ضرورة تبدا من الملف الناتج الكامل. تقدر أولاً تحدد الوظيفة حسب أسماء الوحدات فالمجلد: مثلاً فمشروع البجع راجع وحدات المحيط والسماء والصوت أو المؤثرات؛ وفمشروع FPS راجع وحدات الأسلحة والروبوتات واللاعب والفيزياء؛ وفمشروع السباق راجع وحدات السيارة والحلبة والذكاء الاصطناعي وتخطيط الخريطة.

عاود البناء دائماً من بعد التعديل

فالتطوير خاصك تعدّل الملفات المصدرية فـ src/، وما تعتبرش dist/index.html هو الكود المصدري الرئيسي. من بعد ما تكمل التعديل، عاود نفّذ:

node build.mjs

حيث إن dist/ ما داخلش فالمستودع، فمن بعد إعادة نسخ المستودع أو تنظيف مجلد العمل خاصك حتى تعاود البناء.

دير فحص للاستقرار لمدة طويلة

سجلات المستودع كاتبيّن أن لعبة البجع دازت من اختبار تشغيل مستمر سريع لمدة 320 ثانية، باش يغطي دورة كاملة ديال الليل والنهار، مع مراقبة واش عدد المجسمات وعدد الخامات وذاكرة JavaScript heap باقيين مستقرين. وتدار حتى اختبار خاص بحدود حساب المسافة عند 36 كيلومتر.

إلا عدّلتي الطريق اللانهائي أو نظام الليل والنهار أو الجزيئات أو سطح البحر أو منطق الخامات، تقدر تستعمل نفس الفكرة: خلّي اللعبة خدامة مدة طويلة، وراقب واش عدد الموارد كيزيد باستمرار، واختبر الحدود الحرجة ديال المسافة والوقت والحركات الدورية.

فحص تأثير القيم غير الصالحة على المعالجة اللاحقة

من بعد نشر المشروع، بان مشكل ديال شاشة سوداء كيوقع من حين لآخر. السجلات كاتبيّن أن المشكل تعاود بإدخال NaN، وتحدد فالأخير أن المعالجة اللاحقة Bloom كانت كتنشر البيكسلات غير الصالحة وكتحوّلها لبقع كحلة. من بين طرق الإصلاح كانت إضافة pass للتنقية قبل التوهج، ومعالجة مصادر القيم غير الصالحة بحال Fresnel ديال سطح البحر.

هاد الشي كيبين أنه ملي كتعدل الشيدرات أو سطح البحر أو الإضاءة أو كود المعالجة اللاحقة، ما خاصكش تكتفي بفحص أخطاء الصياغة، بل خاصك تنتبه حتى لاحتمال أن الحسابات تنتج NaN أو قيم أخرى غير صالحة.

التحقق من التحكم ومواجهة كاملة

المشروع الأصلي كان كيستعمل متصفحاً بلا واجهة لفحص تحميل الصفحة وأخطاء التشغيل ومحاكاة ضغطات الأزرار، وكان كيشغّل مواجهة كاملة. من بعد توسيع منطق اللعبة، ركز فاختباراتك على مسار البداية، واستجابة الأزرار، وشروط الربح والخسارة، وسلوك الرجوع للوضعية الأصلية، وحالة التشغيل لمدة طويلة، وما تكتفيش غير بالتأكد أن الصفحة الرئيسية كتظهر.

حافظ على ميزة الملف الواحد وقت النشر

الملف الناتج هو dist/index.html مستقل، ومناسب للاستضافة على خدمات الصفحات الثابتة. الألعاب الثلاثة فالمستودع منشورة على Cloudflare Pages؛ وqq-speed/ فيه حتى إعداد النشر wrangler.jsonc. قبل النشر الفعلي، خاصك تتأكد محلياً أن الملف الناتج كيتحل مزيان، ومن بعد عالج إنشاء المشروع وربط النطاق وتحديث الذاكرة المؤقتة وحالة الشهادة.

حدود المشروع وملاحظات

• الألعاب الثلاثة أعمال اختبار لقدرات Claude Opus 5.5، مولّدة داخل Claude Code.
• بيئة التوليد المذكورة فالمستودع كتستعمل سياق 1M وقوة استدلال xhigh.
• كل لعبة دخلات ليها غير جملة وحدة كطلب، وتكمّلت داخل جلسة وحدة.
• المشاريع المرتبطة بـ «عبور خط النار» و«QQ Speed» أعمال اختبار مستوحاة، وما عندها حتى علاقة بالشركة الأصلية.
• الوقت المعلّم فالمستودع للتوليد هو شتنبر 2026.

الخلاصة

claude-opus-5-5-demo كيعرض نتيجة توليد لعبة ويب ثلاثية الأبعاد كاملة انطلاقاً من prompt واحد، وكيقدم كذلك كوداً مصدرية مقسماً لوحدات ومسار بناء موحد وقابل للفحص. اختار أي مشروع فرعي، ثبت الاعتماديات وشغّل node build.mjs، وغادي تحصل على HTML فملف واحد تقدر تحلو مباشرة. وللتعمق أكثر، ركز على التوليد البرمجي للموارد، وتقسيم وحدات اللعبة، واختبارات الاستقرار لمدة طويلة، وحماية المعالجة اللاحقة فـ WebGL من القيم غير الصالحة.