Uma uxhuma isilawuli, uphihliza izinkinobho, unyakazisa izinti, udonse okokuqalisa… futhi njengonjiniyela, awuboni lutho. Isiphequluli siyayithatha, impela, kodwa ngaphandle uma ufaka izinombolo kukhonsoli, ayibonakali. Lelo yikhanda elibuhlungu nge-Gamepad API. Sekuyiminyaka ikhona, futhi empeleni inamandla kakhulu. Ungafunda izinkinobho, izinti, ama-triggers, imisebenzi. Kodwa abantu abaningi abayithinti. Kungani? Ngoba akukho mpendulo. Alikho iphaneli kumathuluzi kanjiniyela. Ayikho indlela ecacile yokwazi ukuthi ngabe isilawuli siyakwenza yini lokho okucabangayo. Kuzwakala sengathi ukuphuphutheka endizayo. Lokho kungiphathe kabi ngokwanele ukwakha ithuluzi elincane: I-Gamepad Cascade Debugger. Esikhundleni sokugqolozela okukhiphayo kwekhonsoli, uthola ukubuka okubukhoma, okusebenzisanayo kwesilawuli. Cindezela okuthile bese isabela esikrinini. Futhi nge-CSS Cascade Layers, izitayela zihlala zihlelekile, ngakho-ke kuhlanzekile ukulungisa iphutha. Kulokhu okuthunyelwe, ngizokukhombisa ukuthi kungani izilawuli zokulungisa iphutha kuwubuhlungu obunjalo, ukuthi i-CSS isiza kanjani ukuyihlanza, nokuthi ungakha kanjani isilungisi sephutha esisebenziseka kabusha samaphrojekthi akho.
Ngisho noma ukwazi ukuzifaka zonke, uzogcina usunogaxekile wekhonsoli ongafundeki. Isibonelo: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Ungakwazi ukusho ukuthi iyiphi inkinobho ecindezelwe? Mhlawumbe, kodwa kuphela ngemva kokucindezela amehlo akho futhi ulahlekelwe okokufaka okumbalwa. Ngakho-ke, cha, ukulungisa iphutha akufiki kalula uma kukhulunywa ngokufakwa kokufunda. Inkinga 3: Ukuntuleka Kwesakhiwo Ngisho noma uphonsa ndawonye isibonisi esisheshayo, izitayela zingase zimosheke ngokushesha. Izimo ezizenzakalelayo, ezisebenzayo, nezisusa iphutha zingadlulana, futhi ngaphandle kwesakhiwo esicacile, i-CSS yakho iba nzima futhi kube nzima ukunweba. Izendlalelo ze-CSS Cascade zingasiza. Bahlanganisa izitayela zibe "izendlalelo" ezihlelwa ngokubalulekile, ukuze uyeke ukulwa nokucaciswa nokuqagela, "Kungani isitayela sami sokususa iphutha singabonisi?" Kunalokho, ugcina ukukhathazeka okuhlukene:
Isisekelo: Okujwayelekile kwesilawuli, ukubukeka kokuqala. Kuyasebenza: Okugqamile kwezinkinobho ezicindezelwe nezinti ezinyakazayo. Ukulungisa iphutha: Izimbondela zonjiniyela (isb., ukufundwa kwezinombolo, imihlahlandlela, nokunye).
Uma besingachaza izendlalelo ku-CSS ngokwalokhu, besizoba: /* okuphansi kuya kokubaluleke kakhulu */ @isisekelo sendlalelo, siyasebenza, lungisa iphutha;
@isendlalelo { /*... */ }
@ungqimba uyasebenza { /*... */ }
@layer ukulungisa iphutha { /*... */ }
Ngoba ungqimba ngalunye lunqwabelanisa ngokubikezela, uhlale wazi ukuthi yimiphi imithetho ephumelelayo. Lokho kubikezela kwenza ukulungisa iphutha kungabi lula nje, kodwa kulawuleke. Siyihlangabeze inkinga (okungabonakali, okokufaka okungcolile) kanye nendlela (isilungisi esibonakalayo esakhiwe nge-Cascade Layers). Manje sizohamba ngesinyathelo ngesinyathelo sokwakha isilungisi sephutha. I-Debugger Concept Indlela elula yokwenza okokufaka okufihliwe kubonakale ukuvele ukudwebe esikrinini. Yilokho okwenziwa yilo mlungisi. Izinkinobho, izingcipho, nezinduku zokudlala konke kuthola okubonakalayo.
Cindezela A: Umbuthano uyakhanyisa. Gudluza uthi: Indingilizi iyashelela. Donsela i-trigger phakathi: Ibha igcwala uhhafu.
Manje awubhekile ko-0 no-1s, kodwa empeleni ubuka isilawuli senza bukhoma. Kunjalo, uma usuqale ukunqwabelanisa ezifundeni ezifana nokuzenzakalelayo, ucindezelwe, ulwazi lokususa iphutha, mhlawumbe nemodi yokurekhoda, i-CSS iqala ukuba nkulu futhi ibe yinkimbinkimbi. Yilapho izingqimba ze-cascade zisiza khona. Nasi isibonelo sokukhishwa: @isendlalelo { .inkinobho { ingemuva: #222; I-radius yomngcele: 50%; ububanzi: 40px; ubude: 40px; } }
@ungqimba uyasebenza { .inkinobho.cindezelwe { ingemuva: #0f0; /* okuluhlaza okukhanyayo */ } }
@layer ukulungisa iphutha { .inkinobho::ngemuva { okuqukethwe: i-attr(inani ledatha); usayizi wefonti: 12px; umbala: #fff; } }
Uhlelo lwesendlalelo lubalulekile: isisekelo → esisebenzayo → ukulungisa iphutha.
isisekelo sidonsa isilawuli. izibambo ezisebenzayo izimo ezicindezelwe. ukulungisa iphutha kokuphonsa phezu kwembondela.
Ukuyihlakaza kanje kusho ukuthi awulwi nezimpi ezingaqondakali. Isendlalelo ngasinye sinendawo yaso, futhi uhlale wazi ukuthi yini ewinayo. Ukwakha It Out Ake sithole okuthile esikrinini kuqala. Akudingi ukubukeka kukuhle - kudinga nje ukuba khona ukuze sibe nokuthile esizosebenza ngakho.
I-Gamepad Cascade Debugger
Lokho kungamabhokisi nje. Ayijabulisi okwamanje, kodwa isinika izibambo ukuze sibambe kamuva nge-CSS ne-JavaScript. Kulungile, ngisebenzisa izendlalelo ze-cascade lapha ngoba igcina izinto zihlelekile uma usungeze ezinye izifunda. Nali iphasi elinzima:
/* =================================== UKUSETHWA KWEZENZA ZE-CASCADE I-oda libalulekile: isisekelo → esisebenzayo → ukulungisa iphutha ==================================== */
/* Chaza ukuhleleka kwesendlalelo ngaphambili */ @isisekelo sendlalelo, siyasebenza, lungisa iphutha;
/* Isendlalelo 1: Izitayela eziyisisekelo - ukubukeka okuzenzakalelayo */ @isendlalelo { .inkinobho { ingemuva: #333; I-radius yomngcele: 50%; ububanzi: 70px; ukuphakama: 70px; isibonisi: flex; thethelela-okuqukethwe: isikhungo; qondanisa-izinto: isikhungo; }
.phumuza { ububanzi: 20px; ukuphakama: 70px; ingemuva: #333; isibonisi: i-inline-block; } }
/* Isendlalelo sesi-2: Izimo ezisebenzayo - siphatha izinkinobho ezicindezelwe */ @ungqimba uyasebenza { .inkinobho.iyasebenza { ingemuva: #0f0; /* Okuluhlaza okukhanyayo uma ucindezelwa */ guqula: isikali(1.1); /* Yandisa kancane inkinobho */ }
.pause.iyasebenza { ingemuva: #0f0; guqula: isikaliY(1.1); /* Yelula iqonde lapho icindezelwe */ } }
/* Isendlalelo sesi-3: Imbondela yokususa iphutha - ulwazi lonjiniyela */ @layer ukulungisa iphutha { .inkinobho::ngemuva { okuqukethwe: i-attr(inani ledatha); /* Ibonisa inani lenombolo */ usayizi wefonti: 12px; umbala: #fff; } }
Ubuhle bale ndlela ukuthi ungqimba ngalunye lunenjongo ecacile. Isendlalelo sesisekelo asikwazi ukubhala ngaphezulu sisebenzayo, futhi esisebenzayo asikwazi ukubhala ngaphezulu ukulungisa iphutha, ngaphandle kokucaciswa okuthile. Lokhu kuqeda izimpi ezicacile ze-CSS ezivame ukuhlupha amathuluzi okulungisa iphutha. Manje kubukeka sengathi amaqoqo athile ahlezi kungemuva elimnyama. Eqinisweni, akukubi kakhulu.
Ukwengeza i-JavaScript Isikhathi seJavaScript. Lapha kulapho isilawuli empeleni enza okuthile. Sizokwakha lesi sinyathelo ngesinyathelo. Isinyathelo 1: Setha Ukuphathwa Kwesifunda Okokuqala, sidinga okuguquguqukayo ukulandelela isimo se-debugger: // =================================== // UKUPHATHWA KOMBUSO // ===================================
vumela ukugijima = amanga; // Ilandelela ukuthi ingabe isilungisi sephutha siyasebenza vumela i-rafId; // Igcina isicelo se-AnimationFrame ID ukuze ikhanselwe
Lezi ziguquko zilawula iluphu yokugqwayiza efunda ngokuqhubekayo okokufaka kwe-gamepad. Isinyathelo sesi-2: Thatha Izithenjwa ze-DOM Okulandelayo, sithola izinkomba kuzo zonke izici ze-HTML esizozibuyekeza: // =================================== // IZIKHOMBISI ZOKUSEBENZA KWE-DOM // ===================================
const btnA = document.getElementById("btn-a"); const btnB = document.getElementById("btn-b"); const btnX = document.getElementById("btn-x"); const pause1 = document.getElementById("pause1"); const pause2 = document.getElementById("pause2"); const status = document.getElementById("isimo");
Ukugcina lezi zithenjwa ngaphambili kusebenza kahle kakhulu kunokubuza i-DOM ngokuphindaphindiwe. Isinyathelo sesi-3: Engeza i-Fallback yekhibhodi Ukuze sihlole ngaphandle kwesilawuli esiphathekayo, sizobeka okhiye bekhibhodi kuzinkinobho: // =================================== // I-FALLBACK YEKHIBHODI (yokuhlola ngaphandle kwesilawuli) // ===================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' ukhiye ulawula yomibili imigoqo yokumisa isikhashana };
Lokhu kusivumela ukuthi sihlole i-UI ngokucindezela okhiye kukhibhodi. Isinyathelo sesi-4: Dala i-Main Update Loop Nakhu lapho umlingo wenzeka khona. Lo msebenzi usebenza ngokuqhubekayo futhi ufunda isimo se-gamepad: // =================================== // I-LOOP YE-GAMEPAD EYINHLOKO // ===================================
umsebenzi updateGamepad() { // Thola wonke ama-gamepad axhunyiwe const gamepads = navigator.getGamepads(); uma (!amaphedi egeyimu) ebuya;
// Sebenzisa i-gamepad yokuqala exhunyiwe const gp = amaphedi egeyimu[0];
uma (gp) { // Buyekeza inkinobho ithi ngokuguqula isigaba "esisebenzayo". btnA.classList.toggle("active", gp.buttons[0].cindezelwe); btnB.classList.toggle("active", gp.buttons[1].cindezelwe); btnX.classList.toggle("active", gp.buttons[2].cindezelwe);
// Bamba inkinobho yokumisa isikhashana (inkomba yenkinobho engu-9 kuzilawuli eziningi) const pauseCindezelwe = gp.buttons[9].cindezelwe; pause1.classList.toggle("sebenzayo", pauseCindezelwe); pause2.classList.toggle("sebenzayo", pauseCindezelwe);
// Yakha uhlu lwezinkinobho ezicindezelwe njengamanje ukuze ubonise isimo vumela icindezelwe = []; gp.buttons.forEach((btn, i) => { uma (btn.cindezelwe)cindezela.phusha("Inkinobho" + i); });
// Vuselela umbhalo wesimo uma kukhona izinkinobho ezicindezelwe uma (cindezelwe.ubude > 0) { status.textContent = "Cindezelwe: " + pressed.join(", "); } }
// Qhubeka neluphu uma isilungisi sephutha sisebenza uma (egijima) { rafId = requestAnimationFrame(updateGamepad); } }
Indlela ye-classList.toggle() yengeza noma isusa isigaba esisebenzayo ngokusekelwe ekutheni inkinobho icindezelwe yini, okucupha izitayela zethu zesendlalelo se-CSS. Isinyathelo sesi-5: Phatha Imicimbi Yekhibhodi Laba balaleli bomcimbi benza ukubuyela emuva kwekhibhodi kusebenze: // =================================== // IZIPHATHI ZOMCIMBI WEKHIBHHODI // ===================================
document.addEventListener("keydown", (e) => { uma (ukhiyeMap[e.key]) { // Phatha izakhi ezingashadile noma eziningi uma (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("active"); } okunye { keyMap[e.key].classList.add("active"); } status.textContent = "Ukhiye ucindezelwe: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { uma (ukhiyeMap[e.key]) { // Khipha isimo esisebenzayo lapho ukhiye ukhishwa uma (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("active"); } okunye { keyMap[e.key].classList.remove("active"); } status.textContent = "Ukhiye ukhululiwe: " + e.key.toUpperCase(); } });
Isinyathelo sesi-6: Engeza i-Start/Stop Control Okokugcina, sidinga indlela yokuvula nokuvala isilungisi-maphutha: // =================================== // VULA I-DEBUGGER // ===================================
document.getElementById("toggle").addEventListener("chofoza", () => { ukugijima = !ukugijima; // Phenya isimo sokusebenza
uma (egijima) { status.textContent = "I-debugger iyasebenza..."; updateGamepad(); // Qala iluphu yokuvuselela } okunye { status.textContent = "I-debugger ayisebenzi"; khanselaAnimationFrame(rafId); // Misa iluphu } });
Ngakho yebo, cindezela inkinobho bese iyakhazimula. Phusha induku inyakaze. Yilokho kuphela. Enye into: amanani aluhlaza. Kwesinye isikhathi ufuna ukubona izinombolo, hhayi izibani.
Kulesi sigaba, kufanele ubone:
Isilawuli esilula esisesikrinini, Izinkinobho ezisabelayo njengoba uhlanganyela nazo, futhi Ukufundwa kokuzikhethela kokususa iphutha okubonisa izinkomba zezinkinobho ezicindezelwe.
Ukuze wenze lokhu kungabonakali, nansi idemo esheshayo yesilawuli esikusikrini esisabela ngesikhathi sangempela:
Manje, ukucindezela okuthi Qala Ukuqopha kufaka yonke into uze ushaye okuthi Misa Ukuqopha. 2. Ithekelisa Idatha ku-CSV/JSON Uma sesinelogi, sizofuna ukuyigcina.
Isinyathelo 1: Dala Umsizi Wokulanda Okokuqala, sidinga umsebenzi womsizi ophatha ukulandwa kwamafayela esipheqululini: // =================================== // IFAYELA LANDA USIZI // ===================================
umsebenzi downloadFile(igama lefayela, okuqukethwe, uhlobo = "umbhalo/ithafa") { // Dala ibhuloho kusuka kokuqukethwe const blob = Ibhuloho elisha ([okuqukethwe], {uhlobo}); const url = URL.createObjectURL(blob);
// Dala isixhumanisi sokulanda sesikhashana bese usichofoza const a = document.createElement("a"); a.href = url; a.download = igama lefayela; a.chofoza();
// Hlanza i-URL yento ngemuva kokulanda setTimeout(() => URL.revokeObjectURL(url), 100); }
Lo msebenzi usebenza ngokwakha i-Blob (into enkulu kanambambili) kusuka kudatha yakho, ukukhiqiza i-URL yesikhashana yayo, futhi ngokuchofoza ngokuhlelekile isixhumanisi sokulanda. Ukuhlanza kuqinisekisa ukuthi asivuzi inkumbulo. Isinyathelo sesi-2: Phatha i-JSON Export I-JSON ilungele ukulondoloza ukwakheka kwedatha ephelele:
// =================================== // KHIPHA NJENGOBA JSON // ===================================
document.getElementById("export-json").addEventListener("chofoza", () => { // Hlola ukuthi kukhona yini ongathumela ngaphandle uma (!frames.length) { console.warn("Akukho ukurekhoda okutholakalayo okungathekeliswa."); buyela; }
// Dala umthwalo okhokhelwayo ngemethadatha namafreyimu i-const payload = { idalweNge-: new Date().toISOString(), amafreyimu };
// Landa njengefomethi ye-JSON downloadFile( "i-gamepad-log.json", JSON.stringify(payload, null, 2), "isicelo/json" ); });
Ifomethi ye-JSON igcina yonke into ihlelekile futhi ihlukaniseka kalula, iyenze ilungele ukuphinda ilayishelwe kumathuluzi e-dev noma ukwabelana nozakwethu. Isinyathelo sesi-3: Phatha Ukuthunyelwa Kwe-CSV Ngokuthunyelwa kwe-CSV, sidinga ukucaba idatha ye-hierarchical ibe imigqa namakholomu:
//=================================== // KHIPHA NJENGE-CSV // ===================================
document.getElementById("export-csv").addEventListener("chofoza", () => { // Hlola ukuthi kukhona yini ongathumela ngaphandle uma (!frames.length) { console.warn("Akukho ukurekhoda okutholakalayo okungathekeliswa."); buyela; }
// Yakha umugqa wesihloko se-CSV (amakholomu esitembu sesikhathi, zonke izinkinobho, zonke izimbazo) const headerButtons = ozimele[0].buttons.map((_, i) => btn${i}); const headerAxes = ozimele[0].axes.map((_, i) => i-eksisi${i}); const unhlokweni = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// Yakha imigqa yedatha ye-CSV const rows = frames.map(f => { const btnVals = f.buttons.map(b => b.value); buyisela [f.t, ...btnVals, ...f.axes].join(","); }).joyina("\n");
// Landa njenge-CSV downloadFile("gamepad-log.csv", unhlokweni + imigqa, "umbhalo/csv"); });
I-CSV ihlakaniphile ekuhlaziyweni kwedatha ngoba ivula ngokuqondile ku-Excel noma ku-Google AmaSpredishithi, ikuvumela ukuthi udale amashadi, uhlunge idatha, noma ubone amaphethini ngokubonakalayo. Manje njengoba izinkinobho zokuthekelisa sezingenile, uzobona izinketho ezimbili ezintsha kuphaneli: Khipha i-JSON kanye nokuthekelisa i-CSV. I-JSON yinhle uma ufuna ukujikijela ilogi eluhlaza kumathuluzi akho e-dev noma uzulazule esakhiweni. I-CSV, ngakolunye uhlangothi, ivula iqonde ku-Excel noma ku-Google AmaSpredishithi ukuze ukwazi ukushadi, ukuhlunga, noma ukuqhathanisa okokufaka. Umfanekiso olandelayo ubonisa ukuthi iphaneli libukeka kanjani ngalezo zilawuli ezengeziwe.
3. Isifinyezo System Kwesinye isikhathi awudingi ukurekhodwa okugcwele, "isithombe-skrini" esisheshayo sezifunda zokufaka. Kulapho inkinobho ethi Thatha Isifinyezo isiza khona.
Futhi iJavaScript:
// =================================== // THATHA ISIFINYEZO // ===================================
document.getElementById("snapshot").addEventListener("chofoza", () => { // Thola wonke ama-gamepad axhunyiwe const pads = navigator.getGamepads(); const activePads = [];
// Vula futhi uthwebule isimo se-gamepad ngayinye exhunyiwe okwe (const gp of pads) { uma (!gp) kuqhubeka; // Yeqa izikhala ezingenalutho
activePads.push({ id: gp.id, // Controller name/model isitembu sesikhathi: performance.now(), izinkinobho: gp.buttons.map(b => ({ icindezelwe: b.cindezelwe, inani: b.value })), izimbazo: [...] }); }
// Hlola ukuthi akhona yini amaphedi omdlalo atholakele uma (!activePads.length) { console.warn("Awekho amaphedi egeyimu axhunywe isifinyezo."); isixwayiso("Asikho isilawuli esitholiwe!"); buyela; }
// Ngena futhi wazise umsebenzisi console.log("Isifinyezo:", activePads); isixwayiso(Isifinyezo sithathiwe! Kuthathwe isilawuli(izi)${activePads.length}); });
Izifinyezo zimisa isimo esiqondile sesilawuli sakho ngesikhathi esisodwa. 4. Ghost Input Dlala kabusha Manje okujabulisayo: i-ghost input replay. Lokhu kuthatha ilogi bese kuyibuyisela emuva ngokubukeka sengathi umdlali we-phantom usebenzisa isilawuli.
I-JavaScript yokudlala futhi: // =================================== // I-GHOST REPLAY // ===================================
document.getElementById("replay").addEventListener("chofoza", () => { // Qinisekisa ukuthi sinokurekhodwa okumele sikudlale futhi uma (!frames.length) { isixwayiso("Akukho ukurekhoda okuzodlalwa futhi!"); buyela; }
console.log("Iqala ukudlala kabusha isipoki...");
// Landelela isikhathi sokudlala okuvunyelanisiwe let startTime = performance.now(); vumela i-frameIndex = 0;
// Dlala kabusha iluphu yopopayi umsebenzi step() { const manje = performance.now(); Const elapsed = manje - startTime;
// Cubungula zonke izinhlaka okufanele ngabe zenzekile manje ngenkathi (i-frameIndex < frames.length && frames[frameIndex].t <= idlulile) { const frame = ozimele[frameIndex];
// Vuselela i-UI ngenkinobho eqoshiwe ithi btnA.classList.toggle("active", frame.buttons[0].cindezelwe); btnB.classList.toggle("active", frame.buttons[1].cindezelwe); btnX.classList.toggle("active", frame.buttons[2].cindezelwe);
// Buyekeza isibonisi sesimo vumela icindezelwe = []; frame.buttons.forEach((btn, i) => { uma (btn.cindezelwe) icindezelwe.push("Inkinobho" + i); }); uma (cindezelwe.ubude > 0) { status.textContent = "Ghost:" + pressed.join(", "); }
frameIndex++; }
// Qhubeka iluphu uma kukhona amafreyimu amaningi uma (i-frameIndex < frames.length) { requestAnimationFrame(isinyathelo); } okunye { console.log("Dlala kabushakuqediwe."); status.textContent = "Ukudlala kabusha kuqedile"; } }
// Qala ukudlala kabusha isinyathelo(); });
Ukwenza ukulungisa iphutha kusebenze kancane, ngengeze ukudlala kabusha kwesipoki. Uma usuqophe iseshini, ungashaya futhi futhi ubuke i-UI ilingisa, cishe njengokungathi umdlali we-phantom egijima iphedi. Inkinobho entsha ye-Replay Ghost ivela kuphaneli yalokhu.
Shaya Rekhoda, hlukumeza isilawuli kancane, yima, bese udlala futhi. I-UI ivele inanela konke okwenzile, njengesipoki esilandela okokufaka kwakho. Kungani uzihlupha ngalokhu okungeziwe?
Ukurekhoda/ukuthekelisa kwenza kube lula kubahloli ukukhombisa lokho okwenzekile. Izifinyezo ziba yiqhwa isikhashana ngesikhathi, ziwusizo kakhulu uma ujaha izimbungulu eziyinqaba. I-Ghost replay ilungele okokufundisa, ukuhlola ukufinyeleleka, noma ukuqhathanisa ukusetha kokulawula eceleni.
Kuleli qophelo, akuseyona nje idemo ehlanzekile, kodwa into ongayisebenzisa ngempela. I-Real-World Use Cases Manje sinalesi sici sokulungisa iphutha esingenza okuningi. Ibonisa okokufaka okubukhoma, irekhoda amalogi, iwathumele kwamanye amazwe, futhi iphinde idlale izinto. Kodwa umbuzo wangempela uwukuthi: ubani ngempela obakhathalelayo? Lokhu kuwusizo kubani? Umdlalo Onjiniyela Izilawuli ziyingxenye yomsebenzi, kodwa ziyawasusa amaphutha? Ngokuvamile ubuhlungu. Cabanga ukuthi uhlola inhlanganisela yegeyimu yokulwa, njengokuthi ↓ → + punch. Esikhundleni sokuthandaza, uyicindezele kabili ngendlela efanayo, uyiqophe kanye, bese uyidlala kabusha. Kwenziwe. Noma ushintshanisa amalogi e-JSON nozakwenu ukuze uhlole ukuthi ingabe ikhodi yakho yabadlali abaningi isabela ngendlela efanayo emshinini wabo. Kukhulu lokho. Abasebenzi bokufinyelela Lokhu kuseduze kwenhliziyo yami. Akuwona wonke umuntu odlala ngesilawuli "esijwayelekile". Izilawuli eziguquguqukayo zikhipha amasignali ayinqaba ngezinye izikhathi. Ngaleli thuluzi, ungabona kahle ukuthi kwenzekani. Othisha, abacwaningi, noma ubani. Bangakwazi ukubamba izingodo, baziqhathanise, noma baphinde badlale okokufaka ngapha nangapha. Ngokungazelelwe, izinto ezingabonakali ziba sobala. Ukuhlolwa Kokuqinisekisa Ikhwalithi Abahloli bavamise ukubhala amanothi afana nokuthi “Ngiphihlize izinkinobho lapha futhi kwaphuka.” Akusizi kakhulu. Manje? Bangakwazi ukuthwebula umshini wokunyathelisa oqondile, bakhiphe ilogi, futhi bayithumele. Akukho ukuqagela. Othisha Uma wenza okokufundisa noma amavidiyo e-YouTube, ukudlala kabusha okuyisipoki kuyigolide. Ungasho ngokuqondile ukuthi, "Nakhu engikwenzile ngesilawuli," kuyilapho i-UI ibonisa ukuthi kuyenzeka. Wenza izincazelo zicace kakhudlwana. Ngaphandle Kwemidlalo Futhi yebo, lokhu akukhona nje ngemidlalo. Abantu basebenzise izilawuli kumarobhothi, amaphrojekthi wobuciko, nezindawo zokufinyeleleka. Inkinga efanayo ngaso sonke isikhathi: empeleni sibonani isiphequluli? Ngalokhu, awudingi ukuqagela. Isiphetho Ukususa iphutha kokufaka kwesilawuli bekulokhu kuzwakala njengokungaboni kahle. Ngokungafani ne-DOM noma i-CSS, asikho isihloli esakhelwe ngaphakathi samaphedi omdlalo; izinombolo ezingavuthiwe ku-console, ezilahleka kalula emsindweni. Ngemigqa engamakhulu ambalwa ye-HTML, CSS, ne-JavaScript, sakhe okuthile okuhlukile:
I-debugger ebonakalayo eyenza okokufaka okungabonakali kubonakale. Isistimu ye-CSS enengqimba egcina i-UI ihlanzekile futhi ilungiseka. Isethi yezithuthukisi (ukurekhoda, ukuthumela, izifinyezo, ukudlala kabusha kwesipoki) eziphakamisa ukusuka kudemo kuya ethuluzini lonjiniyela.
Le phrojekthi ibonisa ukuthi ungahamba ibanga elingakanani ngokuxuba amandla e-Web Platform ngobuciko obuncane ku-CSS Cascade Layers. Ithuluzi engisanda kulichaza lilonke liwumthombo ovulekile. Ungakwazi ukuhlanganisa i-repo ye-GitHub futhi uzame yona. Kodwa okubaluleke nakakhulu, ungazenza ngokwakho. Engeza izendlalelo zakho. Yakha eyakho i-logic ye-replay. Ihlanganise ne-prototype yegeyimu yakho. Noma ngiyisebenzise ngezindlela engingazicabangi. Okokufundisa, ukufinyeleleka, noma ukuhlaziywa kwedatha. Ekupheleni kosuku, lokhu akukhona nje ukulungisa iphutha le-gamepads. Imayelana nokukhanyisa okokufaka okufihliwe, kanye nokunika abathuthukisi ukuzethemba ekusebenzeni ngezingxenyekazi zekhompyutha iwebhu namanje engakazamukeli ngokugcwele. Ngakho-ke, xhuma isilawuli sakho, vula umhleli wakho, bese uqala ukuhlola. Ungase umangale ukuthi isiphequluli sakho kanye ne-CSS yakho ingakufezani ngempela.
