Michezo mitatu ya wavuti ya 3D iliyoundwa kwa Claude Opus 5.5: Mwongozo wa kujenga na kucheza ndani ya kifaa

Utangulizi wa mradi

claude-opus-5-5-demo ni jaribio la uwezo wa Claude Opus 5.5 wa kutengeneza msimbo. Hazina hii ina michezo mitatu ya wavuti ya 3D inayoweza kuchezwa moja kwa moja. Kila mradi ulitumia kidokezo kimoja tu, huku utafutaji wa taarifa, ujenzi wa mradi, uandishi wa msimbo, ujenzi, majaribio na uwekaji ukikamilishwa katika kikao kimoja cha Claude Code.

Kulingana na maelezo ya hazina, msimbo wa michezo yote mitatu ulitengenezwa na modeli bila marekebisho ya kibinadamu. Miradi hutumia Three.js kujenga mandhari za 3D, kisha esbuild kufunga programu na kuiingiza ndani ya faili moja la HTML. Modeli, maumbo, animasheni na sauti zote hutengenezwa kimchakato na msimbo, bila kutegemea picha, sauti au nyenzo za wahusika wengine.

Hii si templeti ya kawaida ya ukuzaji wa michezo, bali ni mkusanyiko wa matokeo ya majaribio ya kutengeneza msimbo kwa kidokezo kimoja, yanayoweza kuendeshwa, kujengwa na kukaguliwa.

Michezo mitatu na vipengele vyake

Pelican Riding a Bicycle

Huu ni mchezo wa burudani wa kuendesha baiskeli kwenye barabara ya pwani. Mchezaji humdhibiti pelican aliyevaa kofia na miwani, pamoja na skafu nyekundu, akiendesha baiskeli na kukamata samaki. Mradi una fizikia ya kitambaa kwa skafu, mawimbi ya bahari na povu la ufukweni, mzunguko wa mchana na usiku, sauti na muziki unaotengenezwa kimchakato, pamoja na mfumo wa kurekebisha kiotomatiki ubora kulingana na kasi ya fremu.

• W, S: Kuongeza na kupunguza kasi.
• A, D: Kubadilisha njia na kuwasogelea samaki.
• Space: Kuruka.
• T: Kunyoosha mabawa na kuinua gurudumu la mbele.
• Uendeshaji otomatiki: Baada ya muda mrefu bila kuingiza amri, pelican huwafuatilia samaki kiotomatiki.

Mchezo pia una mafanikio 14, aina 5 za kamera, vitufe vya skrini ya kugusa, pamoja na muziki unaotengenezwa moja kwa moja na kivinjari na kubadilika kulingana na mzunguko wa kukanyaga.

Cheza Pelican Riding a Bicycle mtandaoni

CrossFire · Transport Ship

Mradi huu unajaribu kuunda upya ramani ya kawaida ya Transport Ship kutoka CrossFire. Wakati wa utengenezaji, mpangilio wa ramani na miongozo ya uchezaji vilitafutwa kwanza, kisha mandhari ikajengwa kwa kuzingatia sifa kama sitaha ndefu, maeneo ya kuanzia kwenye vyumba vya meli katika ncha zote mbili, kontena zilizowekwa kwa mteremko wa umbo la V katikati, na mabomba ya mwelekeo mmoja pande zote mbili.

Uchezaji unajumuisha mwelekeo wa risasi, msukumo wa silaha, mapambano dhidi ya AI ya roboti, mrejesho wa kugonga shabaha, taarifa za mauaji, milio ya bunduki na sauti nyingine zinazotengenezwa kimchakato, pamoja na usaidizi wa udhibiti wa skrini ya kugusa.

Cheza CrossFire · Transport Ship mtandaoni

QQ Speed

Mchezo huu wa mashindano unaiga vitendo vya Shift drift, Ctrl nitro, boost ndogo, boost mbili na kurejesha gari, pamoja na nyimbo nne zilizoundwa kwa mtindo wa ramani rasmi.

• Eleven City: Wimbo wa mandhari ya jiji usiku, wenye mikunjo 11 na mikunjo ya hairpin.
• Aegean Romance: Unajulikana kwa kupanda na mfululizo wa mikunjo.
• Pharaoh Pyramid: Una njia ya kurukia mwishoni mwa sehemu iliyonyooka.
• Snow Adventure: Unatumia muundo wa makutano ya juu wenye umbo la 8.

Kabla ya kuanza uundaji rasmi, umbo la kila wimbo lilitengenezwa kwa hati ili kutoa mwonekano wa juu, kwa lengo la kukagua mpangilio wa mikunjo na sehemu za makutano.

Cheza QQ Speed mtandaoni

Maandalizi kabla ya kuanza

Ujenzi wa ndani ya kifaa unahitaji mazingira yanayoweza kuendesha npm na hati za Node.js. Hazina haihifadhi node_modules/ wala dist/, hivyo baada ya kuiga au kupakua msimbo wa chanzo, unahitaji kusakinisha utegemezi na kuendesha ujenzi kwa kila mchezo unaotaka kujaribu.

Miradi midogo yote mitatu inajitegemea. Unaweza kujenga mmoja tu au kuijenga yote mmoja baada ya mwingine. Utegemezi wake mkuu ni Three.js na esbuild.

Muundo wa hazina

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/ ina moduli 11 zinazohusu pelican, baiskeli, bahari, samaki, anga, athari na sauti. cf-transport-ship/src/ ina moduli 18 zinazohusu ramani, bunduki, silaha, roboti, mchezaji, fizikia na modeli ya silaha ya mtazamo wa mtu wa kwanza. qq-speed/src/ ina moduli 15 zinazohusu magari, nyimbo, mpangilio, AI, ramani na vitu vya mchezo.

Kusakinisha na kujenga

Njia ya kwanza: Kujenga Pelican Riding a Bicycle

cd pelican-bike
npm install
node build.mjs

Njia ya pili: Kujenga CrossFire · Transport Ship

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

Njia ya tatu: Kujenga QQ Speed

cd qq-speed
npm install
node build.mjs

Baada ya ujenzi wa kila mradi kukamilika, matokeo yataandikwa kwenye dist/index.html ndani ya saraka husika. Kulingana na matumizi yaliyotolewa na hazina, fungua faili hili moja kwa moja kwa kivinjari ili kucheza.

Ukubwa wa mafaili matatu ya ujenzi ni takribani KB 700 hadi KB 840. Kwa kuwa JavaScript imefungwa ndani ya HTML, wakati wa kuendesha hakuna haja ya kupakia tena modeli, maumbo au rasilimali za sauti za mchezo.

Mchakato wa msingi wa matumizi

1. Chagua mchezo mmoja kutoka kwenye saraka ndogo tatu.
2. Ingia kwenye saraka husika na uendeshe npm install.
3. Tekeleza node build.mjs.
4. Thibitisha kuwa dist/index.html imetengenezwa.
5. Fungua faili hilo kwa kivinjari.
6. Tumia kibodi au vidhibiti vya skrini ya kugusa kuanza kucheza, kulingana na aina ya mchezo.

Ikiwa unataka kujaribu haraka bila kukagua msimbo wa chanzo au kujenga upya, unaweza kufungua moja kwa moja anwani za mtandaoni ambazo miradi tayari imechapishwa kupitia Cloudflare Pages au CDN.

Kuelewa ujenzi wa faili moja

“HTML ya faili moja” hapa inamaanisha kuwa ukurasa wa mwisho una JavaScript iliyofungwa ikiingizwa ndani ya HTML. src/ bado imegawanywa katika moduli kadhaa kulingana na kazi ili kurahisisha uundaji na matengenezo. Baada ya kuendesha build.mjs, esbuild huunganisha moduli hizo kuwa matokeo yanayoweza kuendeshwa na kivinjari.

Mradi wa pelican pia hutumia index.template.html kama templeti ya ukurasa, ambapo JavaScript iliyofungwa na og:image huingizwa wakati wa ujenzi. Kwa kuwa hazina huhifadhi faili za chanzo pekee, unahitaji kuendesha tena hati ya ujenzi baada ya kurekebisha msimbo ili kupata dist/index.html mpya.

Mapendekezo ya usomaji wa kina na utatuzi

Kutafuta kazi kwa moduli

Wakati wa kusoma msimbo, si lazima kuanza na matokeo kamili ya ujenzi. Unaweza kwanza kutafuta kazi kwa majina ya moduli katika saraka. Kwa mfano, katika mradi wa pelican kagua moduli za bahari, anga, sauti au athari; katika mradi wa FPS kagua moduli za bunduki, roboti, mchezaji na fizikia; katika mradi wa mashindano kagua moduli za gari, wimbo, AI na mpangilio wa ramani.

Jenga upya kila mara baada ya kufanya marekebisho

Wakati wa uundaji, rekebisha faili za chanzo ndani ya src/, badala ya kuichukulia dist/index.html kama msimbo mkuu wa chanzo. Baada ya kumaliza marekebisho, tekeleza tena:

node build.mjs

Kwa kuwa dist/ haihifadhiwi kwenye hazina, utahitaji kujenga tena baada ya kuiga hazina upya au kusafisha saraka ya kazi.

Kufanya ukaguzi wa uthabiti wa muda mrefu

Rekodi za hazina zinaonyesha kuwa mchezo wa pelican ulifanyiwa jaribio la kuendeshwa kwa kasi kwa sekunde 320, likilenga kufunika mzunguko kamili wa mchana na usiku na kuchunguza kama idadi ya jiometri, idadi ya maumbo na kumbukumbu ya heap ya JavaScript vilibaki thabiti. Pia mpaka wa modulo wa umbali wa kilomita 36 ulijaribiwa mahsusi.

Ukirekebisha mantiki ya barabara isiyo na mwisho, mfumo wa mchana na usiku, chembe, uso wa bahari au maumbo, unaweza kutumia mbinu kama hiyo: endesha mchezo kwa muda mrefu, angalia kama idadi ya rasilimali inaendelea kuongezeka, na ujaribu mipaka ya umbali, muda na animasheni zinazojirudia.

Kukagua athari za thamani batili kwenye uchakataji wa baadae

Baada ya mradi kuchapishwa, skrini nyeusi ilitokea mara kwa mara. Rekodi zinaonyesha kuwa tatizo lilizalishwa upya kwa kuingiza NaN, na hatimaye likabainika kuwa uchakataji wa baadae wa Bloom ulieneza pikseli batili na kutengeneza vitalu vyeusi. Marekebisho yalijumuisha kuongeza pass ya kusafisha kabla ya mwangaza na kushughulikia vyanzo vya thamani batili kama Fresnel ya uso wa bahari.

Hii inaonyesha kuwa unaporekebisha shader, uso wa bahari, mwangaza au msimbo wa uchakataji wa baadae, si lazima ukague makosa ya sintaksia pekee; unapaswa pia kuangalia kama matokeo ya hesabu yanaweza kutoa NaN au thamani nyingine batili.

Kuthibitisha vidhibiti na mechi kamili

Mradi wa awali ulitumia kivinjari kisicho na kiolesura kukagua upakiaji wa ukurasa, makosa ya uendeshaji na mibofyo ya kuigwa, kisha ukaendesha mechi kamili. Baada ya kupanua mantiki ya mchezo, thibitisha hasa mchakato wa kuanza, mwitikio wa vitufe, masharti ya kushinda na kushindwa, tabia ya kurejesha hali na hali ya uendeshaji wa muda mrefu, badala ya kuthibitisha tu kuwa ukurasa wa mwanzo unaonekana.

Kuhifadhi faida ya faili moja wakati wa kuchapisha

Matokeo ya ujenzi ni dist/index.html inayojitegemea, inayofaa kuwekwa kwenye huduma ya kuhifadhi kurasa tuli. Michezo yote mitatu katika hazina tayari imechapishwa kupitia Cloudflare Pages; kati yake, qq-speed/ pia ina usanidi wa uchapishaji wa wrangler.jsonc. Kabla ya kuchapisha, thibitisha kwanza ndani ya kifaa kuwa matokeo ya ujenzi yanafunguka kwa usahihi, kisha shughulikia uundaji wa mradi, kuunganisha kikoa, kusasisha akiba na hali ya cheti.

Mipaka na maelezo ya mradi

• Michezo yote mitatu ni kazi za majaribio ya uwezo zilizotengenezwa na Claude Opus 5.5 ndani ya Claude Code.
• Mazingira ya utengenezaji yaliyoelezwa na hazina yalitumia muktadha wa 1M na nguvu ya推理 ya xhigh.
• Kila mchezo ulipokea kidokezo kimoja tu cha mahitaji na kukamilishwa katika kikao kimoja.
• Miradi inayohusiana na CrossFire na QQ Speed ni majaribio ya uwezo ya heshima na haihusiani na watengenezaji asili.
• Muda wa utengenezaji uliowekwa kwenye hazina ni Septemba 2026.

Muhtasari

claude-opus-5-5-demo inaonyesha matokeo ya kutengeneza mchezo kamili wa wavuti wa 3D kutoka kwa kidokezo kimoja, pamoja na msimbo wa chanzo wa moduli unaoweza kukaguliwa na mchakato wa ujenzi unaofanana. Chagua mradi wowote mdogo, sakinisha utegemezi na uendeshe node build.mjs ili kupata HTML ya faili moja inayoweza kufunguliwa moja kwa moja. Kwa kujifunza zaidi, zingatia uzalishaji wa rasilimali kwa njia ya kimchakato, mgawanyo wa moduli za mchezo, majaribio ya uthabiti wa muda mrefu na ulinzi dhidi ya thamani zisizo halali katika uchakataji wa baadae wa WebGL.