كيفية شحن لعبة ثلاثية الأبعاد على Vercel في نهاية هذا الأسبوع (مع مهارات الذكاء الاصطناعي)

Vibe Skills

استعرض مئات المهارات الجاهزة لـ Claude و Cursor والمزيد.

استكشف المهارات

ابدأ مجانًا الآن

إطلاق لعبة ثلاثية الأبعاد على Vercel بحلول مساء الأحد: دليل النشر لمدة 48 ساعة

يمكنك الانتقال من مساء الجمعة الفارغ إلى رابط your-game.vercel.app بحلول عشاء الأحد. المكدس هو Three.js، Cursor، مهارة ذكاء اصطناعي من Vibe Skills، والمستوى المجاني من Vercel. التكلفة الإجمالية لعطلة نهاية الأسبوع: 0 دولار. البنية التحتية الإجمالية التي عليك الاعتناء بها: صفر أيضًا.

هذا ليس "بناء نموذج أولي على جهاز الكمبيوتر الخاص بك واعتباره مكتملًا". هذا رابط عام يمكن لأي شخص في العالم فتحه في المتصفح، مع HTTPS، التخزين المؤقت للحافة (edge caching)، ودومين مخصص إذا كنت تريده. تقوم مهارة الذكاء الاصطناعي بإطلاق الهيكل الأساسي لـ Three.js وملف vercel.json يعمل. Cursor يعالج حلقة التكرار. Vercel يعالج النشر. أنت تعالج التصميم.

هذا الدليل مخصص للمطورين المستقلين، مطوري "vibe"، المشاركين في مسابقات البرمجة (hackathon)، وأي شخص سئم من علامات تبويب localhost:5173 نصف المكتملة. نحن نغطي سبب نجاح هذا المكدس، تشريح عملية النشر لمدة 48 ساعة، خمس مهارات ألعاب ثلاثية الأبعاد مبنية لسير العمل، والخطوات التفصيلية من الجمعة إلى الأحد.

Vibe Skills

استعرض مئات المهارات الجاهزة لـ Claude و Cursor والمزيد.

استكشف المهارات

ابدأ مجانًا الآن

لماذا Vercel + Three.js + مهارات الذكاء الاصطناعي هو مكدس المطور الفردي

Vercel هو أسهل هدف نشر ممكن للعبة Three.js. قم بالدفع إلى GitHub، Vercel يلاحظ، يبني المشروع، ويعيد لك رابطًا في غضون 60 ثانية. لا يوجد خادم لتوفيره، لا ملف Docker، لا تكوين NGINX، لا إعداد SSL. حزمة Three.js هي مجرد أصول HTML، JS، و WebGL ثابتة، وهو بالضبط ما تم بناء شبكة Vercel للحافة (edge network) لتقديمه.

المستوى المجاني يغطي إطلاق عطلة نهاية الأسبوع بشكل مريح:

• 100 جيجابايت من النطاق الترددي شهريًا. بناء Three.js بحجم 5 ميجابايت عند 10,000 تشغيل هو 50 جيجابايت. ستنفد عطلة نهاية الأسبوع قبل أن ينفد النطاق الترددي لديك.
• عمليات نشر ثابتة غير محدودة مع HTTPS و (subdomain) *.vercel.app.
• دعم الدومين المخصص في المستوى المجاني - أحضر name-game.com الخاص بك إذا كان لديك واحد، وإلا فإن رابط vercel.app المجاني قابل للمشاركة على كل منصات التواصل الاجتماعي.
• عمليات نشر للمعاينة لكل commit - كل دفعة تحصل على رابط خاص بها، لذا يمكنك مشاركة بناء مع صديق والاستمرار في التكرار دون كسرها.

أضف مهارة ذكاء اصطناعي من Vibe Skills واختفي الكود الأساسي أيضًا. يتم إنشاء إعداد مشهد Three.js، ووحدة تحكم اللاعب، وخط أنابيب البناء، وملف vercel.json جاهز لـ Vercel بأمر واحد. ثم يقوم Cursor بتحويل بقية عطلة نهاية الأسبوع إلى محادثة تصف فيها طريقة اللعب التي تريدها وتضبط الناتج. هذا هو المكدس الكامل: مهارة سوق للأساس، محرر ذكاء اصطناعي للتكرار، و Vercel للنشر. فردي، مجاني، وسريع.

Vibe Skills

استعرض مئات المهارات الجاهزة لـ Claude و Cursor والمزيد.

استكشف المهارات

ابدأ مجانًا الآن

تشريح الـ 48 ساعة: مفهوم الجمعة إلى نشر الأحد

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

السبب وراء نجاح هذا هو الدفعة الأولى إلى Vercel يوم الجمعة. بمجرد وجود الرابط، يتم نشر كل commit في السبت والأحد تلقائيًا. لا يوجد "ذعر النشر مساء الأحد" لأن النشر حدث بالفعل يوم الجمعة وكان يعمل تلقائيًا طوال عطلة نهاية الأسبوع.

ما يبدو عليه "Vibe Coding" للعبة ثلاثية الأبعاد على Vercel

Vibe coding يعني وصف ما تريده باللغة الإنجليزية العادية وترك محرر الذكاء الاصطناعي يكتب الكود، ثم التكرار على المخرجات. بالنسبة للعبة Three.js على Vercel، الحلقة نظيفة بشكل غير عادي: كل تغيير في Cursor يبعد pnpm dev عن التغذية الراجعة المحلية، ثم git push يبعد عن رابط معاينة مباشر، ثم يتم نشره تلقائيًا إلى الإنتاج عند main.

عطلة نهاية أسبوع للعبة مبرمجة بـ Vibe تبدو كالتالي:

1. افتح مجلد بداية المهارة في Cursor.
2. صف ميزة في الدردشة: "قفزة مزدوجة إذا تم الضغط على المسافة مرتين خلال 200 مللي ثانية".
3. يقوم Cursor بتحرير ملف وحدة التحكم. حفظ. pnpm dev يعيد التحميل. تشعر بالقفزة في المتصفح.
4. إذا كان الشعور جيدًا، git push. Vercel يبني رابط معاينة. أرسله إلى صديق.
5. ادمج في main عندما يتم تأمين الشعور. يتم تحديث رابط الإنتاج في غضون 60 ثانية.

الذكاء الاصطناعي يقوم بالكتابة. Vercel يقوم بالنشر. أنت تعالج الشعور والتصميم.

5 مهارات ألعاب ثلاثية الأبعاد بالذكاء الاصطناعي تجعل هذا ممكنًا على Vibe Skills

تم بناء هذه المهارات لسير عمل عطلة نهاية الأسبوع Vercel + Three.js + Cursor. كل منها يشحن مشروع Three.js يعتمد على Vite، وملف vercel.json يعمل، أمر pnpm build ينتج حزمة ثابتة يمكن لـ Vercel تقديمها من الحافة، ومسار نشر تم اختباره. كلها موجودة في فئة الألعاب ثلاثية الأبعاد على Vibe Skills.

1. Three.js + Vercel Game Starter

الاختيار الافتراضي. ينشئ مشهد Three.js مع وحدة تحكم لاعب، كاميرا شخص ثالث، مجموعة إضاءة، صندوق سماء، ومستوى أرضي مع تصادمات. يشحن مع vercel.json يضبط رؤوس التخزين المؤقت الصحيحة لحزم أصول Three.js. pnpm dev يعمل محليًا؛ نقرة واحدة في لوحة تحكم Vercel تربط مستودع GitHub ولديك رابط مباشر.

الأفضل لـ: أي نوع باستثناء ثنائي الأبعاد البحت. استخدم هذا إذا كنت لا تعرف حتى الآن ما الذي تبنيه.

2. First-Person Vercel Walker

وحدة تحكم شخص أول مصقولة (WASD + قفل مؤشر الماوس + جاذبية + اندفاع + قفزة) مع خطافات للخطوات، اهتزاز الرأس، و vercel.json يعالج رؤوس CSP الخاصة بقفل المؤشر بشكل صحيح. هذا يزعج الكثير من المطورين الفرديين في الإنتاج. المهارة تحلها لك.

الأفضل لـ: ألعاب المشي، نماذج أولية الرعب، الألعاب السردية، المعارض الفنية.

3. Browser Arena Shooter Kit

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

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

4. Vercel Puzzle Platformer

منصة شخص ثالث (قفزة متغيرة، وقت كويوت، اكتشاف حافة)، نقاط تفتيش، ثلاثة مستويات وهمية يمكنك تعديلها في Blender أو بالكود، وحلقة إعادة ظهور. تم تكوين vercel.json لإعادة تحميل المستويات المخزنة مؤقتًا فورًا على الحافة، لذا فإن اختبار اللعب يبدو سريعًا على الهاتف.

الأفضل لـ: ألعاب المنصات المحيرة، نماذج أولية باركور، تجارب تصميم المستويات.

5. Vercel Driving Sandbox

شعور قيادة أركيدي (منحنى تسارع، فيزياء انحراف، تأخير كاميرا، تضاريس أساسية) مع سيارة منخفضة المضلعات، قالب مسار، ونشر مضبوط لمنحنيات التضاريس الكبيرة. رؤوس HTTP معدة مسبقًا تجعل سياق WebGL يبدأ بشكل أسرع على Safari، وهو تاريخيًا أبطأ متصفح لـ Three.js.

الأفضل لـ: سباقات الأركيد، القيادة على الطرق الوعرة، عروض توضيحية لشعور السيارة للمحفظة.

تصفح جميع مهارات الألعاب ثلاثية الأبعاد على Vibe Skills →

خطوات مفصلة من الجمعة إلى الأحد

هذا هو الجدول الزمني الدقيق. قم بتعديل وقت البدء، ولكن احتفظ بالترتيب. المعلم الرئيسي هو نشر Vercel مساء الجمعة. كل شيء بعد ذلك هو تكرار.

الجمعة 6 مساءً - 8 مساءً: اختر المهارة، ادفع إلى GitHub، قم بتوصيل Vercel

الخطوة 1: اختر مهارة لعبة ثلاثية الأبعاد على Vibe Skills. تصفح فئة الألعاب ثلاثية الأبعاد، اختر واحدة تتناسب مع نوعك، وقم بتثبيت البداية في مجلد جديد. افتحه في Cursor. يجب أن ترى مشهد Three.js مع لاعب يتحرك بحلول الساعة 7 مساءً.

الخطوة 2: أنشئ مستودع GitHub وادفع. git init، git remote add، git push. استخدم اسم اللعبة اللغوي كاسم للمستودع (crystal-runner، lunar-fishing، أيًا كان). اسم المستودع غالبًا ما يصبح رابطك.

الخطوة 3: قم بتوصيل المستودع بـ Vercel. سجل الدخول إلى Vercel باستخدام GitHub (مجاني)، انقر على "Add New Project"، اختر المستودع. Vercel يكتشف Vite تلقائيًا ويقوم بتكوين البناء. انقر على Deploy. في غضون 60 ثانية لديك رابط crystal-runner.vercel.app. افتحه على هاتفك. شاركه مع صديق واحد. شريط النشر الآن صفر لبقية عطلة نهاية الأسبوع.

الجمعة 8 مساءً - 10 مساءً: اكتب وثيقة التصميم

الخطوة 4: أجب على خمسة أسئلة باللغة الإنجليزية العادية. افتح صفحة Notion أو ملف markdown داخل المستودع وأجب:

• ماذا يفعل اللاعب كل 5 ثوانٍ؟ (الحلقة الأساسية)
• ما هي شروط الفوز وشروط الخسارة؟
• كم تستغرق الجولة الواحدة أو المستوى الواحد؟
• ما هو الخطاف البصري؟ (لوحة الألوان، الإضاءة، مرجع الأسلوب)
• ما هي الميزة الوحيدة التي تجعل هذا لا يُنسى في 30 ثانية؟

الخطوة 5: قم بعمل commit لوثيقة التصميم. ادفعها إلى المستودع. Vercel سيعيد النشر. الانضباط في دفع كل تغيير ذي مغزى يبقي الرابط المباشر صادقًا.

السبت 9 صباحًا - 1 ظهرًا: بناء الآلية الأساسية

الخطوة 6: استبدل الآلية النائبة بميزتك الوحيدة. هذه هي الميزة الوحيدة التي تهم. استخدم دردشة Cursor لوصفها ("عندما يلتقط اللاعب بلورة، قم بتجميد الأعداء القريبين لمدة ثانيتين وتشغيل جرس"). كرر محليًا باستخدام pnpm dev. عندما يكون الشعور صحيحًا، قم بالدفع.

الخطوة 7: قم بتوصيل حالة الفوز/الخسارة. بناء مدته 60 ثانية مع نهاية حقيقية يشبه لعبة. بناء مدته 60 دقيقة بدون نهاية يشبه عرضًا تقنيًا. قم دائمًا بتوصيل شاشة الفوز أولاً، ثم كل شيء آخر.

السبت 1 ظهرًا - 8 مساءً: أضف مستوى واحد

الخطوة 8: ابنِ مستوى واحد مصقول. ليس ثلاثة مستويات نصف مخبوزة. استخدم مكعبات وهمية للهندسة. استخدم شخصية المهارة الأساسية. اضبط الشعور - ارتفاع القفزة، تأخير الكاميرا، كثافة الجسيمات.

الخطوة 9: أضف تراكبًا تعليميًا. جملتان "WASD للحركة، انقر للإطلاق" تظهران عند الإطلاق الأول توفر إطلاقك من اللاعبين المربكين الذين يستسلمون في 8 ثوانٍ. يمكن لـ Cursor إنشاء تراكب React (أو DOM عادي) في 30 ثانية.

الخطوة 10: ادفع كل ساعة. كل دفعة تحصل على رابط معاينة Vercel. أرسل كل واحدة إلى صديق. حلقة التغذية الراجعة هي السلاح السري لهذا المكدس.

الأحد 10 صباحًا - 4 مساءً: الصقل

الخطوة 11: أضف ثلاثة أصوات. حلقة خطوات، طبقة محيطة، نغمة فوز. حتى ثلاثة أصوات ترفع نموذجًا أوليًا لعطلة نهاية الأسبوع بشكل كبير. مصادر مجانية: freesound.org، opengameart.org.

الخطوة 12: أضف الإبهار (Juice). جسيمات عند الإصابة، اهتزاز شاشة عند الاصطدام، نوافذ منبثقة للأرقام عند النتيجة. الإبهار هو ما يجعل بناء 48 ساعة يبدو مثل بناء 6 أشهر في GIF. اطلب من Cursor إضافة "اهتزاز شاشة بشدة 0.3 لمدة 150 مللي ثانية عندما يتعرض اللاعب للضرر" - سيكتب خطاف اهتزاز الكاميرا في خمس ثوانٍ.

الخطوة 13: قم بتشغيل اختبار Lighthouse. افتح رابط Vercel على هاتف محمول وقم بتشغيل Chrome DevTools Lighthouse. حزم Three.js عادة ما تكون حوالي 400 كيلوبايت إلى 1.5 ميجابايت. إذا تجاوزت 3 ميجابايت، اطلب من Cursor تمكين تقسيم الكود للوحدات الثقيلة. ضغط Vercel (gzip و brotli) سيتولى الباقي.

الخطوة 14: مراجعة الأخطاء. العب رابطك المباشر خمس مرات متتالية. قم بإصلاح أي شيء يتعطل مرتين. تجاهل أي شيء يتعطل مرة واحدة.

الأحد 4 مساءً - 8 مساءً: الإطلاق

الخطوة 15: (اختياري) قم بتعيين دومين مخصص. إذا اشتريت name-game.com مسبقًا، فأضفه في إعدادات مشروع Vercel. SSL تلقائي. بخلاف ذلك، رابط *.vercel.app جيد - لديه HTTPS، قابل للمشاركة، ويتم تحميله في كل مكان.

الخطوة 16: سجل GIF مدته 15 ثانية لأفضل لحظة. استخدم الرابط المباشر، وليس localhost. GIF هو ما يتم النقر عليه على Twitter، Bluesky، و Reddit.

الخطوة 17: أنشئ صفحة itch.io (اختياري ولكنه عالي التأثير). العنوان، عبارة تسويقية من سطر واحد، ثلاث لقطات شاشة، GIF، عناصر التحكم، اعتمادات، وتضمين iframe الخاص بك *.vercel.app (تدعم itch.io تضمينات iframe لألعاب HTML5). الآن لديك رابطان - أحدهما للمشاركة العادية والآخر لجمهور اللاعبين.

الخطوة 18: انشر الرابط. Twitter، Bluesky، Discord مجتمع المطورين الخاص بك، r/IndieDev، r/threejs، r/WebGames. ابدأ دائمًا بالـ GIF. قم دائمًا بتضمين الرابط. إذا استخدمت مهارة Vibe Skills، فاذكرها في منشور تطوير الألعاب - سيرغب المطورون الآخرون الذين يقرؤون في نفس البداية.

كيفية تجنب ثلاثة من أكثر حالات فشل نشر Vercel شيوعًا

ثلاثة أشياء تكسر تقريبًا كل لعبة Three.js + Vercel فردية لعطلة نهاية الأسبوع. كلها إصلاحات سريعة لمدة 5 دقائق إذا اكتشفتها مساء الجمعة، وفجوات لمدة 5 ساعات إذا اكتشفتها صباح الأحد الساعة 7 مساءً.

• دليل إخراج البناء غير الصحيح. الافتراضي لـ Vite هو dist/. Vercel يكتشف Vite تلقائيًا ويستخدم dist/. إذا قمت بتخصيص الإخراج، فقم بتعيين outputDirectory في vercel.json أو إعدادات المشروع أو سيكون نشرك 404.
• مسارات الأصول التي تعمل محليًا ولكنها تعطي 404 في الإنتاج. استخدم المسارات النسبية أو مساعد Vite import.meta.env.BASE_URL لأي ملف GLB أو نسيج أو صوت يتم تحميله في وقت التشغيل. مسارات /assets/... الثابتة عادة ما تعمل، لكن المسارات المطلقة لنظام Windows المنسوخة بالتأكيد لن تعمل.
• رؤوس CSP التي تحظر قفل المؤشر أو سياق الصوت. تتطلب ألعاب الشخص الأول قفل المؤشر. يتطلب الصوت تفعيل إيماءة المستخدم. أي مهارة من فئة الألعاب ثلاثية الأبعاد تشحن مع كتلة headers الصحيحة في vercel.json للتعامل مع هذا. إذا كتبت لك خاصة بك من الصفر، انسخ التكوين من مستودع المهارة.

يعمل النشر يوم الجمعة، لذا عندما تتعطل هذه الأمور يوم الأحد، يكون ذلك دائمًا بسبب تغيير حديث. git bisect هو صديقك. أفضل من ذلك: استمر في الدفع كل 30 دقيقة حتى يكون commit المعطل صغيرًا.

أسئلة متكررة

هل سيصمد المستوى المجاني لـ Vercel حقًا إذا حصلت لعبتي على حركة مرور؟

نعم، لإطلاق عطلة نهاية الأسبوع والأسابيع الأولى. يمنحك المستوى المجاني 100 جيجابايت من النطاق الترددي شهريًا، وهو ما يعادل تقريبًا 20,000 تشغيل لبناء Three.js بحجم 5 ميجابايت. إذا وصلت إلى هذا الحد، فإن خطة Pro تبلغ 20 دولارًا شهريًا وتزيدك إلى 1 تيرابايت. لإطلاق عطلة نهاية الأسبوع، فإن المستوى المجاني أكثر من كافٍ. تشحن المهارات على Vibe Skills بتكوينات بناء تقلل من حجم الحزمة، مما يمدد المستوى المجاني بشكل أكبر.

هل يمكنني استخدام دومين مخصص على المستوى المجاني لـ Vercel؟

نعم. يدعم المستوى المجاني النطاقات المخصصة مع SSL تلقائي. اشترِ نطاقًا (Namecheap، Cloudflare Registrar، Porkbun)، قم بتوجيهه إلى Vercel، و Vercel يعتني بشهادة SSL. الإعداد يستغرق حوالي 10 دقائق. إذا لم يكن لديك نطاق، فإن رابط name-game.vercel.app قصير بما يكفي للمشاركة على أي منصة.

هل هذا المكدس مناسب لتقديم مشاركة في مسابقة برمجة (game jam)؟

نعم، وهو أحد أفضل المكدسات لمشاركات المسابقات. تقبل معظم المسابقات (Ludum Dare، GMTK، js13k، GitHub Game Off) أي رابط قابل للعب على الويب. رابط *.vercel.app يعمل تمامًا مثل رابط itch.io للحكام. العديد من الفائزين في المسابقات يشحنون إلى كليهما - itch.io لجمهور اللاعبين، و Vercel كرابط أساسي سريع.

هل أحتاج إلى معرفة Three.js قبل البدء؟

تحتاج إلى ما يكفي من JavaScript لقراءة ما يكتبه Cursor وضبط القيم. لست بحاجة إلى كتابة Three.js من الصفر. المهارات الموجودة على Vibe Skills تنشئ إعداد المحرك، الكاميرا، وحدة التحكم، وتكوين البناء. Cursor يعالج كود طريقة اللعب من أوصافك.

ماذا يحدث إذا فشل بناء Vercel الخاص بي يوم الأحد الساعة 7 مساءً؟

السبب الأكثر شيوعًا هو خطأ TypeScript أو متغير بيئة مفقود. يعرض Vercel سجل البناء مع تسليط الضوء على السطر الفاشل. نقرة واحدة في لوحة التحكم تعود إلى آخر بناء ناجح وتعززه إلى الإنتاج. نظرًا لأن كل دفعة هي نشر معاينة، فأنت لست أبعد من commit واحد عن بناء يعمل. هذا هو سبب أهمية الدفع كل 30 دقيقة في السبت والأحد.

هل يمكنني بيع أو تعديل الكود من مهارة لعبة ثلاثية الأبعاد من Vibe Skills؟

نعم. تشحن المهارات على Vibe Skills مع ترخيص صديق للتجارة يسمح لك بإصدار الكود في لعبتك الخاصة على Vercel، itch.io، Steam، أو في أي مكان آخر. يحتفظ المبدعون بملكية فكرية للمهارة، وتحتفظ أنت بملكية فكرية للعبة المبنية فوقها.

ماذا لو لم أرغب في استخدام Cursor؟

أي محرر ذكاء اصطناعي يمكنه تعديل ملفات المشروع يعمل. Claude Code، Cursor، Windsurf، GitHub Copilot Chat، Cline - أي منها يمكنه التكرار على هيكل Three.js من مهارة Vibe Skills. المهارة نفسها مستقلة عن المحرر.

قم بإطلاقه في عطلة نهاية الأسبوع هذه

السبب في أن معظم المطورين الفرديين لا يطلقون ألعابًا ثلاثية الأبعاد ليس المحرك، أو النوع، أو سقف المهارة. إنه مساء الجمعة حيث "يبحثون فقط قليلاً أكثر" ولا يبدأون أبدًا. في عطلة نهاية الأسبوع المجانية القادمة، اتبع خطة الأربع مراحل: قم بتثبيت مهارة لعبة ثلاثية الأبعاد من Vibe Skills، قم بالدفع إلى GitHub، قم بتوصيل Vercel، قم بالنشر بحلول مساء الجمعة الساعة 8 مساءً، ثم اقضِ يومي السبت والأحد في التكرار على رابط مباشر.

محفظتك المكونة من عشر ألعاب تم إطلاقها في عطلة نهاية الأسبوع على Vercel تساوي أكثر من مشروع محرك أحلامك الافتراضي لمدة ستة أشهر. ما تم إطلاقه يفوز دائمًا. رابط Vercel المجاني هو الدليل.

تصفح مهارات الألعاب ثلاثية الأبعاد على Vibe Skills →

تخطى ماراثون الكود الأساسي لـ Three.js. قم بتثبيت مهارة لعبة ثلاثية الأبعاد على Vibe Skills، ادفع إلى Vercel، واحصل على رابط مباشر بحلول مساء الأحد.