Claude Opus 5.5 سے تیار کردہ تین 3D ویب گیمز: مقامی تعمیر اور کھیلنے کا رہنما

پروجیکٹ کا تعارف

claude-opus-5-5-demo Claude Opus 5.5 کی کوڈ تیار کرنے کی صلاحیت کا ایک تجربہ ہے۔ ریپوزٹری میں تین ایسے 3D ویب گیمز شامل ہیں جنہیں براہِ راست کھیلا جا سکتا ہے۔ ہر پروجیکٹ صرف ایک پرامپٹ استعمال کرتے ہوئے، Claude Code کے ایک ہی سیشن میں معلومات کی تلاش، انجینئرنگ، کوڈنگ، تعمیر، ٹیسٹنگ اور تعیناتی مکمل کرتا ہے۔

ریپوزٹری کی وضاحت کے مطابق، تینوں گیمز کا سورس کوڈ ماڈل نے تیار کیا اور انسانوں نے اس میں کوئی ترمیم نہیں کی۔ پروجیکٹس 3D مناظر بنانے کے لیے Three.js استعمال کرتے ہیں، پھر esbuild کے ذریعے پروگرام کو ایک واحد HTML فائل میں پیک اور ان لائن کرتے ہیں۔ ماڈل، ٹیکسچر، اینیمیشن اور صوتی اثرات سب کوڈ کے ذریعے پروگراماتی طور پر تیار کیے جاتے ہیں اور بیرونی تصاویر، آڈیو یا تیسرے فریق کے اثاثوں پر انحصار نہیں کرتے۔

یہ روایتی گیم ڈویلپمنٹ ٹیمپلیٹ نہیں، بلکہ one-shot کوڈ جنریشن کے قابلِ عمل، قابلِ تعمیر اور قابلِ جانچ تجربات کا مجموعہ ہے۔

تین گیمز اور ان کی خصوصیات

سائیکل چلاتا پیلیکن

یہ ساحلی سڑک پر تفریحی سائیکلنگ کا گیم ہے۔ کھلاڑی ہیلمٹ، دھوپ کی عینک اور سرخ مفلر پہنے پیلیکن کو کنٹرول کرتا ہے، جو سائیکل چلاتے ہوئے مچھلیاں پکڑتا ہے۔ پروجیکٹ میں کپڑے کی طبیعیات پر مبنی مفلر، سمندر کی لہریں اور ساحل کے کنارے ٹوٹتی لہریں، دن رات کا چکر، پروگراماتی صوتی اثرات اور موسیقی، نیز فریم ریٹ کے مطابق گرافکس کا معیار خودکار طور پر ایڈجسٹ کرنے کا نظام شامل ہے۔

• W، S: رفتار بڑھانا اور کم کرنا۔
• A، D: لین تبدیل کرنا اور مچھلی کے قریب جانا۔
• اسپیس: چھلانگ لگانا۔
• T: پر پھیلانا اور اگلا پہیہ اٹھانا۔
• خودکار ڈرائیونگ: طویل وقت تک کوئی عمل نہ کرنے پر پیلیکن خودکار طور پر مچھلی کا پیچھا کرتا ہے۔

گیم میں 14 کامیابیاں، 5 کیمرہ موڈز، ٹچ اسکرین بٹن، اور پیڈل کی رفتار کے مطابق بدلنے والی براؤزر میں حقیقی وقت کی تیار کردہ موسیقی بھی موجود ہے۔

سائیکل چلاتے پیلیکن کو آن لائن آزمائیں

کراس فائر · ٹرانسپورٹ شپ

یہ پروجیکٹ 《کراس فائر》 کے کلاسک ٹرانسپورٹ شپ نقشے کو دوبارہ تخلیق کرنے کی کوشش کرتا ہے۔ تیاری کے دوران پہلے نقشے کے لے آؤٹ اور حکمتِ عملی تلاش کی گئی، پھر لمبے عرشے، دونوں سروں پر جہاز کے کیبن میں آغاز کے مقامات، درمیان میں V شکل میں رکھے گئے کنٹینرز اور دونوں جانب یک طرفہ پائپوں جیسی خصوصیات کی بنیاد پر منظر بنایا گیا۔

گیم پلے میں ہتھیاروں کی گولیوں کی سمت، پسپائی، روبوٹ AI کے مقابلے، نشانہ لگنے کا ردِعمل، ہلاکت کا اعلان، پروگراماتی بندوق کی آوازیں اور دیگر صوتی اثرات شامل ہیں، جبکہ ٹچ اسکرین کنٹرول بھی دستیاب ہیں۔

کراس فائر · ٹرانسپورٹ شپ کو آن لائن آزمائیں

QQ اسپیڈ

ریسنگ پروجیکٹ میں Shift ڈرفٹ، Ctrl نائٹرس، مختصر بوسٹ، ڈبل بوسٹ اور ری سیٹ جیسی کارروائیوں کو دوبارہ بنایا گیا ہے، اور سرکاری نقشوں کے انداز میں ڈیزائن کیے گئے چار ٹریکس فراہم کیے گئے ہیں۔

• الیون سٹی: شہر کے رات کے منظر والا ٹریک، جس میں 11 موڑ اور ہیئرپن موڑ شامل ہیں۔
• عشقِ بحیرہ ایجیئن: چڑھائی اور مسلسل موڑ اس کی نمایاں خصوصیات ہیں۔
• فرعون کا اہرام: سیدھی سڑک کے اختتام پر جمپ ریمپ موجود ہے۔
• برفانی مہم: 8 نما اوورپاس ڈھانچہ استعمال کرتا ہے۔

باقاعدہ ڈویلپمنٹ سے پہلے ٹریک کی شکل کا ٹاپ ڈاؤن منظر اسکرپٹ کے ذریعے تیار کیا گیا تاکہ موڑوں کے لے آؤٹ اور چوراہوں کی جانچ کی جا سکے۔

QQ اسپیڈ کو آن لائن آزمائیں

شروع کرنے سے پہلے تیاری

مقامی تعمیر کے لیے ایسا ماحول درکار ہے جو npm اور Node.js اسکرپٹس چلا سکے۔ ریپوزٹری میں node_modules/ اور dist/ محفوظ نہیں ہیں، اس لیے سورس کوڈ کلون یا ڈاؤن لوڈ کرنے کے بعد جس گیم کو آزمانا ہو، اس کے لیے الگ سے انحصارات انسٹال کر کے تعمیر چلانا ہوگی۔

تینوں ذیلی پروجیکٹس ایک دوسرے سے آزاد ہیں۔ آپ صرف ایک پروجیکٹ بنا سکتے ہیں یا انہیں باری باری بنا سکتے ہیں۔ ان کے اہم انحصارات میں Three.js اور esbuild شامل ہیں۔

ریپوزٹری کا ڈھانچہ

pelican-bike/
  src/
  index.template.html
  build.mjs
  package.json

cf-transport-ship/
  src/
  build.mjs
  package.json

qq-speed/
  src/
  build.mjs
  wrangler.jsonc
  package.json

pelican-bike/src/ میں 11 ماڈیولز شامل ہیں، جو پیلیکن، سائیکل، سمندر، مچھلی، آسمان، اثرات اور آڈیو جیسی خصوصیات کا احاطہ کرتے ہیں۔ cf-transport-ship/src/ میں 18 ماڈیولز ہیں، جن میں نقشہ، بندوقیں، ہتھیار، روبوٹس، کھلاڑی، طبیعیات اور فرسٹ پرسن ہتھیاروں کے ماڈلز شامل ہیں۔ qq-speed/src/ میں 15 ماڈیولز ہیں، جو گاڑی، ٹریک، لے آؤٹ، AI، نقشے اور اشیا سے متعلق ہیں۔

انسٹالیشن اور تعمیر

طریقہ اول: سائیکل چلاتے پیلیکن کی تعمیر

cd pelican-bike
npm install
node build.mjs

طریقہ دوم: کراس فائر · ٹرانسپورٹ شپ کی تعمیر

cd cf-transport-ship
npm install
node build.mjs

طریقہ سوم: QQ اسپیڈ کی تعمیر

cd qq-speed
npm install
node 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 پروجیکٹ میں بندوق، روبوٹ، کھلاڑی اور طبیعیات کے ماڈیولز دیکھیں؛ جبکہ ریسنگ پروجیکٹ میں گاڑی، ٹریک، AI اور نقشے کے لے آؤٹ کا جائزہ لیں۔

ترمیم کے بعد ہمیشہ دوبارہ تعمیر کریں

ڈویلپمنٹ کے دوران src/ میں موجود سورس فائلوں میں ترمیم کریں، dist/index.html کو بنیادی سورس نہ سمجھیں۔ ترمیم مکمل ہونے کے بعد دوبارہ یہ چلائیں:

node build.mjs

چونکہ dist/ ریپوزٹری میں شامل نہیں ہے، اس لیے ریپوزٹری دوبارہ کلون کرنے یا ورکنگ ڈائریکٹری صاف کرنے کے بعد بھی دوبارہ تعمیر کرنا ہوگی۔

طویل مدتی استحکام کی جانچ کریں

ریپوزٹری کے ریکارڈ کے مطابق، پیلیکن گیم کو 320 سیکنڈ کی تیز رفتار اسٹریس ٹیسٹ سے گزارا گیا تاکہ دن رات کے مکمل چکر کا احاطہ ہو سکے اور جیومیٹری کی تعداد، ٹیکسچر کی تعداد اور JavaScript ہیپ میموری کے مستحکم رہنے کا مشاہدہ کیا جا سکے۔ 36 کلومیٹر کے فاصلے پر ماڈیولو حد کی بھی خصوصی جانچ کی گئی۔

اگر آپ نے لامحدود سڑک، دن رات کے نظام، ذرات، سطحِ سمندر یا ٹیکسچر کی منطق میں ترمیم کی ہے، تو اسی طرح کا طریقہ اپنایا جا سکتا ہے: گیم کو طویل وقت تک چلائیں، دیکھیں کہ وسائل کی تعداد مسلسل تو نہیں بڑھ رہی، اور فاصلے، ٹائمر اور چکر دار اینیمیشن کے آخری نقاط کی جانچ کریں۔

پوسٹ پروسیسنگ پر غیر مؤثر عددی اقدار کے اثرات جانچیں

پروجیکٹ آن لائن جاری ہونے کے بعد کبھی کبھار سیاہ اسکرین کا مسئلہ سامنے آیا۔ ریکارڈ کے مطابق NaN داخل کر کے مسئلہ دوبارہ پیدا کیا گیا، اور آخرکار معلوم ہوا کہ Bloom پوسٹ پروسیسنگ غیر مؤثر پکسلز کو پھیلا کر سیاہ دھبوں میں تبدیل کر رہی تھی۔ اصلاحات میں Bloom سے پہلے صفائی کا pass شامل کرنا اور سمندر کی سطح کے Fresnel جیسے غیر مؤثر عددی ذرائع کو سنبھالنا شامل تھا۔

اس سے ظاہر ہوتا ہے کہ شیڈر، سمندر کی سطح، روشنی یا پوسٹ پروسیسنگ کے کوڈ میں ترمیم کرتے وقت صرف نحوی غلطیوں کی جانچ کافی نہیں؛ یہ بھی دیکھنا چاہیے کہ حساب کے نتائج NaN یا کسی اور غیر مؤثر قدر میں تبدیل تو نہیں ہو سکتے۔

کنٹرولز اور مکمل مقابلے کی تصدیق کریں

اصل پروجیکٹ نے صفحہ لوڈ ہونے، رن ٹائم کی غلطیوں اور نقلی بٹن دبانے کی جانچ کے لیے ہیڈ لیس براؤزر استعمال کیا، اور مکمل مقابلہ بھی چلایا۔ گیم لاجک میں توسیع کے بعد آغاز کا عمل، بٹنوں کا ردِعمل، جیت اور ہار کی شرائط، ری سیٹ کا رویہ اور طویل مدتی رن ٹائم حالت خاص طور پر جانچیں، صرف یہ تصدیق نہ کریں کہ ہوم پیج دکھائی دے رہا ہے۔

تعیناتی کے وقت واحد فائل کا فائدہ برقرار رکھیں

تعمیر شدہ نتیجہ ایک مستقل dist/index.html ہے، اس لیے اسے جامد ویب پیج ہوسٹنگ سروس پر رکھنا آسان ہے۔ ریپوزٹری کے تینوں گیمز پہلے ہی Cloudflare Pages پر تعینات ہیں؛ ان میں qq-speed/ میں wrangler.jsonc تعیناتی کی تشکیل بھی شامل ہے۔ حقیقی ریلیز سے پہلے مقامی طور پر تصدیق کریں کہ تعمیر شدہ فائل درست طور پر کھل رہی ہے، پھر پروجیکٹ بنانا، ڈومین منسلک کرنا، کیش تازہ کرنا اور سرٹیفکیٹ کی حالت جیسے امور سنبھالیں۔

پروجیکٹ کی حدود اور وضاحتیں

• تینوں گیمز Claude Opus 5.5 نے Claude Code میں تیار کیے گئے صلاحیتی ٹیسٹ پروجیکٹس ہیں۔
• ریپوزٹری کی وضاحت کے مطابق، جنریشن ماحول میں 1M کانٹیکسٹ اور xhigh استدلال کی شدت استعمال کی گئی۔
• ہر گیم کے لیے صرف ایک جملے پر مشتمل تقاضے کا پرامپٹ داخل کیا گیا اور کام ایک ہی سیشن میں مکمل ہوا۔
• 《کراس فائر》 اور 《QQ اسپیڈ》 سے متعلق پروجیکٹس خراجِ تحسین کی نوعیت کے صلاحیتی ٹیسٹ ہیں اور اصل کمپنی سے غیر متعلق ہیں۔
• ریپوزٹری میں درج جنریشن کا وقت ستمبر 2026 ہے۔

خلاصہ

claude-opus-5-5-demo ایک پرامپٹ سے مکمل 3D ویب گیم تیار کرنے کا نتیجہ دکھاتا ہے، اور قابلِ جانچ ماڈیولر سورس کوڈ اور یکساں تعمیر کا عمل بھی فراہم کرتا ہے۔ کسی بھی ذیلی پروجیکٹ کا انتخاب کریں، انحصارات انسٹال کریں اور node build.mjs چلائیں، تو براہِ راست کھولی جا سکنے والی واحد فائل HTML حاصل ہو جائے گی۔ مزید سیکھنے کے لیے پروگراماتی وسائل کی تیاری، گیم ماڈیولز کی تقسیم، طویل مدتی استحکام کی جانچ اور WebGL پوسٹ پروسیسنگ میں غیر معمولی اقدار سے تحفظ پر توجہ دی جا سکتی ہے۔