Claude Opus 5.5 yordamida yaratilgan uchta 3D veb-o‘yin: mahalliy qurish va sinab ko‘rish qo‘llanmasi

Loyiha haqida

claude-opus-5-5-demo Claude Opus 5.5 kod yaratish imkoniyatini sinovdan o‘tkazuvchi tajribadir. Repozitoriyda to‘g‘ridan-to‘g‘ri o‘ynash mumkin bo‘lgan uchta 3D veb-o‘yin mavjud. Har bir loyiha bitta taklif asosida, bitta Claude Code sessiyasida ma’lumot izlash, muhandislik ishlari, kod yozish, qurish, testdan o‘tkazish va joylashtirish bosqichlarini bajargan.

Repozitoriy ma’lumotlariga ko‘ra, uchala o‘yinning manba kodi ham model tomonidan yaratilgan va kodga inson tomonidan o‘zgartirish kiritilmagan. Loyihalarda 3D sahnalarni yaratish uchun Three.js, dasturni yig‘ib bitta HTML fayliga ichki joylashtirish uchun esa esbuild ishlatiladi. Modellar, teksturalar, animatsiyalar va tovush effektlarining barchasi kod orqali dasturiy ravishda yaratiladi; tashqi rasmlar, audio yoki uchinchi tomon materiallariga tayanilmaydi.

Bu an’anaviy o‘yin ishlab chiqish shabloni emas, balki ishlaydigan, quriladigan va tekshiriladigan one-shot kod yaratish tajribalari to‘plamidir.

Uchta o‘yin va ularning xususiyatlari

Pelikan velosiped minadi

Bu sohil yo‘lidagi hordiq chiqarish uchun velosiped haydash o‘yini. O‘yinchi dubulg‘a va quyosh ko‘zoynagi taqqan, qizil sharf bog‘lagan pelikanni boshqarib, baliq tutadi. Loyihada mato fizikasi asosidagi sharf, dengiz to‘lqinlari va qirg‘oqdagi mayda to‘lqinlar, kun-tun almashinuvi, dasturiy yaratiladigan tovush va musiqa, shuningdek kadrlar tezligiga qarab tasvir sifatini avtomatik sozlash mexanizmi mavjud.

• W, S: tezlashish va sekinlashish.
• A, D: yo‘lakni almashtirish va baliqqa yaqinlashish.
• Bo‘sh joy: sakrash.
• T: qanotlarni yozish va old g‘ildirakni ko‘tarish.
• Avtopilot: uzoq vaqt boshqarilmasa, pelikan baliqni avtomatik quvadi.

O‘yinda shuningdek 14 ta yutuq, 5 ta kamera rejimi, sensorli ekran tugmalari va pedal aylanish tezligiga mos ravishda brauzerda real vaqtda sintez qilinadigan musiqa mavjud.

Pelikan velosiped minishini onlayn sinab ko‘rish

CrossFire · Transport kemasi

Ushbu loyiha 《穿越火线》 o‘yinidagi klassik Transport kemasi xaritasini qayta yaratishga urinadi. Yaratish jarayonida avval xarita tuzilishi va qo‘llanmalar o‘rganilgan, so‘ngra uzun paluba, kemaning ikki uchidagi tug‘ilish nuqtalari, markazdagi V shaklida qiya joylashtirilgan konteynerlar hamda ikki tomondagi bir yo‘nalishli quvurlar kabi xususiyatlar asosida sahna qurilgan.

O‘yinda qurol ballistikasi, tepki, robotlar bilan jang qiluvchi AI, zarba qaytari, o‘ldirish xabarlari, dasturiy yaratiladigan o‘q ovozlari va boshqa tovush effektlari mavjud. Sensorli boshqaruv ham qo‘llab-quvvatlanadi.

CrossFire · Transport kemasini onlayn sinab ko‘rish

QQ Speed

Poyga loyihasida Shift bilan drift, Ctrl bilan nitro, kichik tezlanish, qo‘shaloq tezlanish va tiklash kabi boshqaruvlar qayta yaratilgan. Shuningdek, rasmiy xaritalar uslubida ishlab chiqilgan to‘rtta trassa taqdim etiladi.

• O‘n birinchi shahar: shahar tungi manzarasidagi trassa, 11 ta burilish va soch to‘g‘nag‘ichi burilishini o‘z ichiga oladi.
• Maftunkor Egey dengizi: ko‘tarilishlar va ketma-ket burilishlar bilan ajralib turadi.
• Fir’avn piramidasi: to‘g‘ri yo‘l oxirida sakrash rampasi mavjud.
• Qorli sarguzasht: 8 shaklidagi kesishuvchi yo‘l tuzilmasidan foydalanadi.

Rasmiy ishlab chiqishdan oldin burilishlar joylashuvi va kesishish nuqtalarini tekshirish uchun trassa shakli skript yordamida yuqoridan ko‘rinadigan tasvirga aylantirilgan.

QQ Speed’ni onlayn sinab ko‘rish

Boshlashdan oldingi tayyorgarlik

Mahalliy qurish uchun npm va Node.js skriptlarini ishga tushira oladigan muhit kerak. Repozitoriyda node_modules/ va dist/ saqlanmaydi, shuning uchun manba kodini klonlagach yoki yuklab olgach, sinab ko‘rmoqchi bo‘lgan har bir o‘yin uchun alohida bog‘liqliklarni o‘rnatish va qurish jarayonini bajarish kerak.

Uchta quyi loyiha bir-biridan mustaqil. Ularning faqat bittasini yoki barchasini navbatma-navbat qurish mumkin. Asosiy bog‘liqliklar Three.js va esbuild’ni o‘z ichiga oladi.

Repozitoriy tuzilishi

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/ pelikan, velosiped, okean, baliq, osmon, effektlar va audio kabi funksiyalarga oid 11 ta modulni o‘z ichiga oladi. cf-transport-ship/src/ xarita, qurol, qurol-aslaha, robotlar, o‘yinchi, fizika va birinchi shaxs quroli modelini qamrab oluvchi 18 ta moduldan iborat. qq-speed/src/ esa transport vositasi, trassa, joylashuv, AI, xarita va buyumlarga oid 15 ta modulni o‘z ichiga oladi.

O‘rnatish va qurish

1-usul: Pelikan velosiped minadi o‘yinini qurish

cd pelican-bike
npm install
node build.mjs

2-usul: CrossFire · Transport kemasini qurish

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

3-usul: QQ Speed’ni qurish

cd qq-speed
npm install
node build.mjs

Har bir loyiha qurilgach, natija tegishli katalogdagi dist/index.html fayliga yoziladi. Repozitoriydagi foydalanish tartibiga ko‘ra, o‘ynash uchun bu faylni brauzerda to‘g‘ridan-to‘g‘ri ochish kifoya.

Uchta qurilgan faylning hajmi taxminan 700 KB dan 840 KB gacha. JavaScript HTML ichiga yig‘ilgani sababli ishga tushirish vaqtida o‘yin modellari, teksturalari yoki audio resurslarini qayta yuklash shart emas.

Asosiy foydalanish jarayoni

1. Uchta quyi katalogdan birini tanlang.
2. Tegishli katalogga o‘ting va npm install buyrug‘ini ishga tushiring.
3. node build.mjs buyrug‘ini bajaring.
4. dist/index.html yaratilganini tasdiqlang.
5. Faylni brauzerda oching.
6. O‘yin turiga qarab klaviatura yoki sensorli boshqaruvlardan foydalanib o‘ynashni boshlang.

Agar faqat tezda sinab ko‘rmoqchi bo‘lsangiz va manba kodini tekshirish yoki qayta qurish niyatingiz bo‘lmasa, loyihaning Cloudflare Pages yoki CDN’ga joylashtirilgan onlayn manzilini ochishingiz mumkin.

Bitta faylli qurish usulini tushunish

Bu yerda “bitta faylli HTML” deganda yakuniy sahifaga yig‘ilgan JavaScript ichki joylashtirilgan HTML nazarda tutiladi. src/ ishlab chiqish va texnik xizmat ko‘rsatishni qulaylashtirish uchun hanuz bir nechta funksional modullarga bo‘lingan; build.mjs bajarilgach, esbuild ushbu modullarni brauzerda ishlaydigan natijaga birlashtiradi.

Pelikan loyihasi qurish vaqtida yig‘ilgan JavaScript va og:image ni kiritish uchun index.template.html sahifa shablonidan ham foydalanadi. Repozitoriyda faqat manba fayllari saqlanadi, shuning uchun manba kodini o‘zgartirgach yangi dist/index.html olish uchun qurish skriptini qayta ishga tushirish kerak.

Qo‘shimcha o‘rganish va nosozliklarni tuzatish bo‘yicha tavsiyalar

Funksiyalarni modullar bo‘yicha topish

Kodni o‘rganayotganda to‘liq qurilgan fayldan boshlash shart emas. Funksiyani katalogdagi modul nomlari orqali topish mumkin: masalan, pelikan loyihasida okean, osmon, audio yoki effektlar modullarini; FPS loyihasida qurol, robotlar, o‘yinchi va fizika modullarini; poyga loyihasida esa transport vositasi, trassa, AI va xarita joylashuvi modullarini tekshiring.

O‘zgartirishdan keyin har doim qayta quring

Ishlab chiqish vaqtida dist/index.html ni asosiy manba kodi sifatida emas, src/ dagi manba fayllarni o‘zgartirish kerak. O‘zgartirishni tugatgach, quyidagini yana bajaring:

node build.mjs

dist/ versiya nazoratiga kiritilmagani uchun repozitoriy qayta klonlanganda yoki ish katalogi tozalanganda ham qayta qurish kerak bo‘ladi.

Uzoq vaqtli barqarorlikni tekshirish

Repozitoriy yozuvlariga ko‘ra, pelikan o‘yini to‘liq kun-tun almashinuvini qamrab olish uchun 320 soniyalik tezlashtirilgan stress-testdan o‘tkazilgan. Geometriyalar soni, teksturalar soni va JavaScript stek xotirasi barqarorligi kuzatilgan. Shuningdek, 36 kilometr masofa bo‘yicha modul chegarasi ham maxsus sinovdan o‘tkazilgan.

Agar cheksiz yo‘l, kun-tun tizimi, zarrachalar, dengiz yuzasi yoki tekstura logikasini o‘zgartirsangiz, shunga o‘xshash yondashuvdan foydalanishingiz mumkin: o‘yinni uzoq vaqt ishga tushirib, resurslar soni doimiy ravishda oshib ketmayotganini kuzating hamda masofa, vaqt hisoblagichi va siklli animatsiyalarning chegaraviy nuqtalarini sinang.

Yaroqsiz qiymatlarning post-processing’ga ta’sirini tekshirish

Loyiha ishga tushirilgandan keyin vaqti-vaqti bilan qora ekran muammosi yuzaga kelgan. Yozuvlarga ko‘ra, muammo NaN kiritish orqali qayta hosil qilingan va oxir-oqibat Bloom post-processing yaroqsiz piksellarni qora bloklarga yoyishi aniqlandi. Tuzatish usullariga yorug‘lik tarqalishidan oldin tozalash pass’ini qo‘shish hamda dengiz yuzasidagi Fresnel kabi yaroqsiz qiymat manbalarini qayta ishlash kiradi.

Bu shuni anglatadiki, shader, dengiz yuzasi, yoritish yoki post-processing kodini o‘zgartirganda nafaqat sintaksis xatolarini tekshirish, balki hisoblash natijasida NaN yoki boshqa yaroqsiz qiymatlar paydo bo‘lishi mumkinligiga ham e’tibor berish kerak.

Boshqaruv va to‘liq o‘yinni tekshirish

Asl loyihada sahifa yuklanishi, ishga tushirish xatolari va simulyatsiya qilingan tugmalar bosilishini tekshirish uchun headless brauzerdan foydalanilgan, shuningdek to‘liq o‘yin jarayoni ishga tushirilgan. O‘yin mantig‘i kengaytirilganda faqat bosh sahifa ko‘rsatilishini tasdiqlash bilan cheklanmay, ishga tushish jarayoni, tugmalar javobi, g‘alaba va mag‘lubiyat shartlari, tiklash xatti-harakati hamda uzoq vaqt ishlash holatini tekshirish kerak.

Joylashtirishda bitta fayl afzalligini saqlash

Qurish natijasi mustaqil dist/index.html fayli bo‘lib, statik sahifa hosting xizmatlariga joylashtirish uchun qulay. Repozitoriydagi uchta o‘yin Cloudflare Pages’ga joylashtirilgan; ulardan qq-speed/ katalogida wrangler.jsonc joylashtirish konfiguratsiyasi ham mavjud. Amalda nashr qilishdan oldin qurilgan fayl mahalliy muhitda to‘g‘ri ochilishini tasdiqlang, so‘ng loyiha yaratish, domenni bog‘lash, keshni yangilash va sertifikat holatini sozlang.

Loyiha chegaralari va izohlar

• Uchta o‘yin Claude Opus 5.5 tomonidan Claude Code’da yaratilgan imkoniyat sinovi asarlaridir.
• Repozitoriyda ko‘rsatilgan yaratish muhiti 1M kontekst va xhigh mulohaza yuritish darajasidan foydalanadi.
• Har bir o‘yinga faqat bitta talab taklifi kiritilgan va u bitta sessiyada yakunlangan.
• 《穿越火线》 va 《QQ 飞车》 bilan bog‘liq loyihalar hurmat yuzasidan yaratilgan imkoniyat sinovlari bo‘lib, asl ishlab chiqaruvchilar bilan bog‘liq emas.
• Repozitoriyda ko‘rsatilgan yaratish vaqti 2026-yil sentyabridir.

Xulosa

claude-opus-5-5-demo bitta taklifdan to‘liq 3D veb-o‘yin yaratish natijasini namoyish etadi, shuningdek tekshiriladigan modulli manba kodi va yagona qurish jarayonini taqdim etadi. Istalgan quyi loyihani tanlab, bog‘liqliklarni o‘rnating va node build.mjs buyrug‘ini ishga tushiring; natijada to‘g‘ridan-to‘g‘ri ochish mumkin bo‘lgan bitta faylli HTML hosil bo‘ladi. Keyingi o‘rganishda dasturiy resurs yaratish, o‘yin modullarini ajratish, uzoq vaqtli barqarorlik sinovlari hamda WebGL post-processing’da yaroqsiz qiymatlardan himoyalanishga alohida e’tibor qaratish mumkin.