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, মানচিত্র ও আইটেম অন্তর্ভুক্ত।

ইনস্টলেশন ও বিল্ড

পদ্ধতি 1: সাইকেল চালানো পেলিক্যান বিল্ড করা

cd pelican-bike
npm install
node build.mjs

পদ্ধতি 2: ক্রসফায়ার · ট্রান্সপোর্ট শিপ বিল্ড করা

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

পদ্ধতি 3: 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 ও মানচিত্রের লেআউট পরীক্ষা করুন।

পরিবর্তনের পর সবসময় পুনরায় বিল্ড করুন

ডেভেলপমেন্টের সময় dist/index.html-কে মূল সোর্স হিসেবে ব্যবহার না করে src/-এর সোর্স ফাইল পরিবর্তন করা উচিত। পরিবর্তন শেষ হলে আবার চালান:

node build.mjs

dist/ রিপোজিটরিতে জমা থাকে না। তাই রিপোজিটরি আবার ক্লোন করলে বা কাজের ডিরেক্টরি পরিষ্কার করার পরও পুনরায় বিল্ড করতে হবে।

দীর্ঘমেয়াদি স্থিতিশীলতা পরীক্ষা করুন

রিপোজিটরির রেকর্ড অনুযায়ী, পেলিক্যান গেমে 320 সেকেন্ডের ফাস্ট-ফরোয়ার্ড soak test চালানো হয়েছিল, যাতে সম্পূর্ণ দিন-রাতের চক্র কভার করা যায় এবং জ্যামিতির সংখ্যা, টেক্সচারের সংখ্যা ও JavaScript heap memory স্থিতিশীল থাকে কি না দেখা যায়। 36 কিলোমিটারের দূরত্বে মডুলো সীমারেখাও আলাদাভাবে পরীক্ষা করা হয়েছিল।

আপনি যদি অসীম রাস্তা, দিন-রাত ব্যবস্থা, পার্টিকল, সমুদ্রপৃষ্ঠ বা টেক্সচারের লজিক পরিবর্তন করেন, একই ধরনের পদ্ধতি নিতে পারেন: দীর্ঘ সময় গেম চালিয়ে সম্পদের সংখ্যা ক্রমাগত বাড়ছে কি না দেখুন এবং দূরত্ব, টাইমার ও লুপিং অ্যানিমেশনের সীমাবিন্দু পরীক্ষা করুন।

অকার্যকর মান পোস্ট-প্রসেসিংয়ে কী প্রভাব ফেলে তা পরীক্ষা করুন

প্রকল্পটি চালু হওয়ার পর মাঝে মাঝে কালো পর্দার সমস্যা দেখা দিয়েছিল। রেকর্ড অনুযায়ী, NaN ইনজেক্ট করে সমস্যাটি পুনরুৎপাদন করা হয় এবং শেষ পর্যন্ত দেখা যায় যে Bloom পোস্ট-প্রসেসিং অকার্যকর পিক্সেল ছড়িয়ে কালো ব্লক তৈরি করছে। সমাধানের মধ্যে ছিল Bloom-এর আগে একটি পরিষ্কার করার pass যোগ করা এবং সমুদ্রপৃষ্ঠের Fresnel-এর মতো অকার্যকর মানের উৎসগুলো সামলানো।

এতে বোঝা যায়, শেডার, সমুদ্রপৃষ্ঠ, আলো বা পোস্ট-প্রসেসিং কোড পরিবর্তনের সময় শুধু সিনট্যাক্স ত্রুটি পরীক্ষা করলেই হবে না; গণনার ফল NaN বা অন্য কোনো অকার্যকর মান তৈরি করতে পারে কি না, সেদিকেও নজর দিতে হবে।

নিয়ন্ত্রণ ও সম্পূর্ণ ম্যাচ যাচাই করুন

মূল প্রকল্পে পৃষ্ঠা লোড, রানটাইম ত্রুটি ও সিমুলেটেড কী-প্রেস পরীক্ষা করতে হেডলেস ব্রাউজার ব্যবহার করা হয়েছিল এবং সম্পূর্ণ ম্যাচও চালানো হয়েছিল। গেমের লজিক বাড়ানোর পর শুধু হোমপেজ দেখা যাচ্ছে কি না যাচাই না করে স্টার্টআপ প্রক্রিয়া, কী-র প্রতিক্রিয়া, জয়-পরাজয়ের শর্ত, রিসেট আচরণ ও দীর্ঘক্ষণ চালানোর অবস্থা পরীক্ষা করা উচিত।

ডিপ্লয়মেন্টে একক-ফাইলের সুবিধা বজায় রাখুন

বিল্ড আউটপুট একটি স্বতন্ত্র dist/index.html, তাই এটি স্ট্যাটিক পৃষ্ঠা হোস্টিং সেবায় রাখা সুবিধাজনক। রিপোজিটরির তিনটি গেমই Cloudflare Pages-এ ডিপ্লয় করা হয়েছে। এর মধ্যে qq-speed/-এ wrangler.jsonc ডিপ্লয়মেন্ট কনফিগারেশনও রয়েছে। বাস্তবে প্রকাশের আগে স্থানীয়ভাবে বিল্ড আউটপুট ঠিকমতো খুলছে কি না নিশ্চিত করুন। এরপর প্রকল্প তৈরি, ডোমেইন সংযোগ, ক্যাশ রিফ্রেশ ও সার্টিফিকেটের অবস্থা সামলান।

প্রকল্পের সীমা ও বিবরণ

• তিনটি গেমই Claude Code-এ Claude Opus 5.5 দিয়ে তৈরি সক্ষমতা পরীক্ষার প্রকল্প।
• রিপোজিটরির বিবরণ অনুযায়ী, তৈরির পরিবেশে 1M কনটেক্সট ও xhigh reasoning strength ব্যবহার করা হয়েছে।
• প্রতিটি গেমে মাত্র একটি প্রয়োজনীয়তার প্রম্পট দেওয়া হয়েছিল এবং একটি সেশনেই কাজ সম্পন্ন হয়েছিল।
• 《ক্রসফায়ার》 ও 《QQ স্পিড》-সংক্রান্ত প্রকল্পগুলো শ্রদ্ধাঞ্জলি-ধর্মী সক্ষমতা পরীক্ষা এবং মূল নির্মাতাদের সঙ্গে সম্পর্কিত নয়।
• রিপোজিটরিতে উল্লেখিত তৈরির সময় 2026 সালের 9月।

সারাংশ

claude-opus-5-5-demo একটি মাত্র প্রম্পট থেকে সম্পূর্ণ 3D ওয়েব গেম তৈরির ফলাফল দেখায় এবং পরীক্ষা করা যায় এমন মডিউলার সোর্স কোড ও অভিন্ন বিল্ড প্রক্রিয়াও সরবরাহ করে। যেকোনো একটি সাবপ্রকল্প বেছে নিয়ে নির্ভরতা ইনস্টল করে node build.mjs চালালেই সরাসরি খোলা যায় এমন একক-ফাইল HTML পাওয়া যাবে। আরও শিখতে চাইলে প্রোগ্রামেটিক রিসোর্স তৈরি, গেম মডিউল বিভাজন, দীর্ঘমেয়াদি স্থিতিশীলতা পরীক্ষা এবং WebGL পোস্ট-প্রসেসিংয়ে অস্বাভাবিক মান প্রতিরোধের ওপর গুরুত্ব দিতে পারেন।