Mukalumikiza chowongolera, mumaphwanya mabatani, kusuntha ndodo, kukoka zoyambitsa… ndipo monga wopanga, simukuwona chilichonse. Msakatuli akutola, zedi, koma pokhapokha mutadula manambala mu console, ndi yosaoneka. Ndiwo mutu ndi Gamepad API. Zakhala zikuchitika kwa zaka zambiri, ndipo ndi zamphamvu kwambiri. Mutha kuwerenga mabatani, ndodo, zoyambitsa, ntchito. Koma anthu ambiri samachikhudza. Chifukwa chiyani? Chifukwa palibe chiyembekezo. Palibe gulu mu zida zamapulogalamu. Palibe njira yodziwira ngati wowongolera akuchita zomwe mukuganiza. Zimamveka ngati kuwuluka khungu. Izi zidandisokoneza mokwanira kuti ndipange chida chaching'ono: Gamepad Cascade Debugger. M'malo mongoyang'ana pa zotulutsa za console, mumapeza mawonekedwe amoyo, okhudzana ndi wowongolera. Dinani china chake ndipo chimachita pa zenera. Ndipo ndi CSS Cascade Layers, masitayelo amakhala okonzeka, ndiye kuti ndi zoyera kuti musinthe. Mu positi iyi, ndikuwonetsani chifukwa chake owongolera owongolera ndikuwawa kotere, momwe CSS imathandizira kuyeretsa, ndi momwe mungapangire chowongolera chowoneka bwino pamapulojekiti anu.
Ngakhale mutatha kuwalemba onse, mutha kukhala ndi spam yosawerengeka. Mwachitsanzo: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Kodi munganene kuti ndi batani liti lomwe linakanidwa? Mwina, koma pambuyo straining maso anu ndi kusowa zolowetsa ochepa. Chifukwa chake, ayi, kukonza zolakwika sikumabwera mosavuta zikafika pakuwerenga zolowetsa. Vuto 3: Kusowa Kapangidwe Ngakhale mutaponyera pamodzi chowonera mwachangu, masitayelo amatha kusokoneza mwachangu. Zosasintha, zogwira ntchito, komanso zosokoneza zimatha kupindika, ndipo popanda mawonekedwe omveka bwino, CSS yanu imakhala yolimba komanso yovuta kukulitsa. CSS Cascade Layers ingathandize. Amagawa masitayelo kukhala "zigawo" zomwe zimayikidwa patsogolo, kotero mumasiya kulimbana ndi zomwe mukufuna ndikungoganiza kuti, "N'chifukwa chiyani mawonekedwe anga ochotsa cholakwika sakuwonetsa?" M'malo mwake, mumakhala ndi nkhawa zosiyana:
Pachiyambi: Muyezo wa wolamulira, maonekedwe oyambirira. Yang'anani: Zowonetsa pamabatani osindikizira ndi timitengo tosuntha. Kuthetsa vuto: Zowunjikana za opanga (mwachitsanzo, mawerengedwe owerengera, maupangiri, ndi zina zotero).
Ngati titha kufotokozera zigawo mu CSS molingana ndi izi, tikadakhala: /* otsika kwambiri mpaka apamwamba kwambiri */ @layer base, yogwira, sinthani;
@gawo maziko { /*...*/ }
@layer yogwira { /*...*/ }
@layer kuchotsa { /*...*/ }
Chifukwa gawo lililonse limachulukirachulukira, nthawi zonse mumadziwa kuti ndi malamulo ati omwe amapambana. Kudziwikiratu kumeneko kumapangitsa kuti kukonza zolakwika sikungokhala kosavuta, koma kutha kutheka. Takambirana za vutoli (zosawoneka, zosokoneza) ndi njira (chosokoneza chowoneka chomangidwa ndi Cascade Layers). Tsopano tidutsa mwatsatanetsatane njira yopangira debugger. The Debugger Concept Njira yosavuta yopangira zobisika zowonekera ndikungojambula pazenera. Izi ndi zomwe wochotsa debugger amachita. Mabatani, zoyambitsa, ndi zokometsera zonse zimakhala ndi mawonekedwe.
Dinani A: Bwalo limayatsa. Gwira ndodo: Bwalo limayendayenda. Koka chowombera pakati: Mbalame imadzaza pakati.
Tsopano simukuyang'ana ma 0s ndi 1s, koma mukuwona wowongolera akuchita. Zachidziwikire, mukangoyamba kuchulukirachulukira pazigawo monga kusakhazikika, kukakamizidwa, kuwongolera, mwinanso kujambula, CSS imayamba kukula komanso zovuta. Apa ndipamene ma cascade layers amakhala othandiza. Nachi chitsanzo chochotsedwa: @gawo maziko { .batani { maziko: #222; malire ozungulira: 50%; m'lifupi: 40px; kutalika: 40px; } }
@layer yogwira { .button.panikizidwa { maziko: #0f0; /* wobiriwira wobiriwira */ } }
@layer kuchotsa { .batani::pambuyo { zomwe zili: attr (mtengo wa data); kukula kwa font: 12px; mtundu: #fff; } }
Masanjidwe amafunikira: maziko → yogwira → debug.
maziko amajambula chowongolera. yogwira amangogwira mbamuikha limati. debug amaponyera pazowonjezera.
Kuzithetsa motere kumatanthauza kuti simukulimbana ndi nkhondo zachilendo. Chigawo chilichonse chili ndi malo ake, ndipo nthawi zonse mumadziwa chomwe chimapambana. Kumanga Tiyeni titengepo kanthu pazenera. Sichiyenera kuoneka bwino - chimangofunika kukhalapo kuti tikhale ndi chinachake choti tigwire nacho.
Gamepad Cascade Debugger
Ndiwo kwenikweni mabokosi. Sizosangalatsa pano, koma zimatipatsa mphamvu kuti tigwire pambuyo pake ndi CSS ndi JavaScript. Chabwino, ndikugwiritsa ntchito ma cascade layers pano chifukwa amasunga zinthu mwadongosolo mukangowonjezera mayiko ena. Nayi kupita koyipa:
/* ================================== KUKHALA KWA CASCADE LAERS Kuyitanitsa zinthu: maziko → yogwira → sinthani ====================================
/* Tanthauzirani kusanjikiza patsogolo */ @layer base, yogwira, sinthani;
/* Gawo 1: Mitundu yoyambira - mawonekedwe okhazikika */ @gawo maziko { .batani { maziko: #333; malire ozungulira: 50%; m'lifupi: 70px; kutalika: 70px; chiwonetsero: flex; lungamitsa-zili: pakati; align-zinthu: pakati; }
.imani { m'lifupi: 20px; kutalika: 70px; maziko: #333; kuwonetsera: mkati-block; } }
/* Gawo 2: Magawo omwe amagwira ntchito - imagwira mabatani oponderezedwa */ @layer yogwira { .button.active { maziko: #0f0; /* Wobiriwira wobiriwira ukakanikizidwa */ kusintha: sikelo (1.1); /* Kukulitsa batani */ }
.pause.active { maziko: #0f0; kusintha: scaleY(1.1); /* Imatambasula molunjika ikakanikizidwa */ } }
/* Gawo 3: Zowongolera zolakwika - zambiri zamapulogalamu */ @layer kuchotsa { .batani::pambuyo { zomwe zili: attr (mtengo wa data); /* Ikuwonetsa mtengo */ kukula kwa font: 12px; mtundu: #fff; } }
Kukongola kwa njirayi ndikuti gawo lililonse lili ndi cholinga chomveka. Zoyambira sizingapitirire kugwira ntchito, ndipo yogwira singachotsere vuto, posatengera kukhazikika kwake. Izi zimathetsa nkhondo zenizeni za CSS zomwe nthawi zambiri zimawononga zida zowongolera. Tsopano zikuwoneka ngati magulu ena akukhala pansi pamdima. Kunena zoona, osati zoipa kwambiri.
Kuwonjezera JavaScript JavaScript nthawi. Apa ndi pamene wolamulira amachitadi chinachake. Tipanga izi pang'onopang'ono. Khwerero 1: Khazikitsani State Management Choyamba, tifunika zosintha kuti titsatire momwe debugger ikuyendera: // ================================== // KUSUNGA KWABOMA // ==================================
lolani kuthamanga = zabodza; // Kutsata ngati debugger ikugwira ntchito lolani rafId; // Imasunga ID ya pempho laAnimationFrame kuti ichotsedwe
Zosinthazi zimayang'anira loop ya makanema ojambula omwe amawerenga mosalekeza kulowa kwa gamepad. Khwerero 2: Tengani Zolemba za DOM Kenako, timapeza zolozera kuzinthu zonse za HTML zomwe tikhala tikusintha: // ================================== // ZOTHANDIZA ZA 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("status");
Kusunga maumboni awa kutsogolo ndikothandiza kwambiri kuposa kufunsa DOM mobwerezabwereza. Khwerero 3: Onjezani Kiyibodi Fallback Poyesa popanda wowongolera, tiyika makiyi a kiyibodi ku mabatani: // ================================== // KEYBOARD FALLBACK (yoyesa popanda wowongolera) // ==================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' amawongolera makiyi onse awiri };
Izi zimatilola kuyesa UI mwa kukanikiza makiyi pa kiyibodi. Khwerero 4: Pangani Main Update Loop Apa ndi pamene zamatsenga zimachitika. Ntchitoyi imayenda mosalekeza ndikuwerenga mawonekedwe a gamepad: // ================================== // MAIN GAMEPAD UPDATE LOOP // ==================================
ntchito updateGamepad () { // Pezani masewera onse olumikizidwa const gamepads = navigator.getGamepads(); ngati (! gamepads) kubwerera;
// Gwiritsani ntchito pulogalamu yolumikizira yoyamba const gp = ma gamepads[0];
ngati (gp) { // Sinthani batani la mawu posintha kalasi "yogwira". btnA.classList.toggle("active", gp.buttons[0].pressed); btnB.classList.toggle("active", gp.buttons[1].pressed); btnX.classList.toggle("active", gp.buttons[2].pressed);
// Gwirani batani loyimitsa (batani index 9 pa olamulira ambiri) const pausePressed = gp.buttons[9].panikizidwa; pause1.classList.toggle("yogwira", pausePressed); pause2.classList.toggle("yogwira", pausePressed);
// Pangani mndandanda wamabatani omwe asindikizidwa pano kuti muwonetse mawonekedwe lolani kukanikizidwa = []; gp.buttons.forEach((btn, i) => { ngati (btn.pressed)pressed.push("Batani" + i); });
// Sinthani zolemba ngati mabatani aliwonse akanikizidwa ngati (pressed.length> 0) { status.textContent = "Waponderezedwa: " + pressed.join(", "); } }
// Pitirizani kuzungulira ngati debugger ikuyenda ngati (kuthamanga) { rafId = requestAnimationFrame(updateGamepad); } }
Njira ya classList.toggle() imawonjezera kapena kuchotsa kalasi yogwira ntchito kutengera ngati batani lakanizidwa, zomwe zimayambitsa masitaelo athu a CSS. Khwerero 5: Yambitsani Zochitika za Kiyibodi Omvera zochitika izi amapangitsa kuti kiyibodi ikhale yogwira ntchito: // ================================== // ZOMWE ZOCHITIKA PA KEYBOARD // ==================================
document.addEventListener("keydown", (e) => { ngati (keyMap[e.key]) { // Gwirani zinthu ziwiri kapena zingapo ngati (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("yogwira"); } zina { keyMap[e.key].classList.add("yogwira"); } status.textContent = "Kiyi wapanikizidwa: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { ngati (keyMap[e.key]) { // Chotsani zomwe zikuchitika pamene kiyi yatulutsidwa ngati (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("yogwira"); } zina { keyMap[e.key].classList.remove("yogwira"); } status.textContent = "Kiyi yatulutsidwa: " + e.key.toUpperCase(); } });
Gawo 6: Add Start/Stop Control Pomaliza, tikufuna njira yosinthira debugger ndi kuyimitsa: // ================================== // TOGLE DEBUGGER ON/OFF // ==================================
document.getElementById("toggle").addEventListener("dinani", () => { kuthamanga = !kuthamanga; // Yendetsani mayendedwe
ngati (kuthamanga) { status.textContent = "Debugger ikuyenda..."; updateGamepad (); // Yambitsani kuzungulira kwatsopano } zina { status.textContent = "Debugger sikugwira ntchito"; cancelAnimationFrame(rafId); // Chotsani kuzungulira } });
Ndiye inde, dinani batani ndikuwala. Kankhirani ndodoyo ndipo imasuntha. Ndichoncho. Chinthu chinanso: mitengo yaiwisi. Nthawi zina mumangofuna kuwona manambala, osati magetsi.
Panthawi imeneyi, muyenera kuwona:
Chowongolera chosavuta pa skrini, Mabatani amene amachita pamene inu kucheza nawo, ndi Kuwerengera kosintha komwe kukuwonetsa kuwonetsa zizindikiro za mabatani.
Kuti izi zisakhale zomveka, nayi chiwonetsero chachangu cha woyang'anira pa skrini akuchita munthawi yeniyeni:
Tsopano, kukanikiza Start Kujambulira zipika chirichonse mpaka inu kugunda Stop Recording. 2. Kutumiza Deta ku CSV/JSON Tikakhala ndi chipika, tikufuna kuchisunga.
Gawo 1: Pangani Download Wothandizira Choyamba, tifunika ntchito yothandizira yomwe imatsitsa kutsitsa mafayilo mu msakatuli: // ================================== // WOTHANDIZA FULANI KUKOPA // ==================================
ntchito downloadFile(dzina lafayilo, zomwe zili, mtundu = "zolemba / zomveka") { // Pangani blob kuchokera pazomwe zili const blob = Blob yatsopano ([zokhutira], {mtundu}); const url = URL.createObjectURL(blob);
// Pangani ulalo wotsitsa kwakanthawi ndikudina const a = document.createElement("a"); a.href = ulalo; a.download = filename; a.click();
// Chotsani ulalo wa chinthucho mukatsitsa setTimeout(() => URL.revokeObjectURL(url), 100); }
Ntchitoyi imagwira ntchito popanga Blob (chinthu chachikulu kwambiri) kuchokera pa data yanu, kupanga ulalo wake wakanthawi, ndikudina ulalo wotsitsa. Kuyeretsa kumapangitsa kuti tisatayike kukumbukira. Khwerero 2: Gwiritsani Ntchito Kutumiza kwa JSON JSON ndiyabwino kusunga mawonekedwe athunthu:
// ================================== // TUMIZANI MONGA JSON // ==================================
document.getElementById("export-json").addEventListener("dinani", () => { // Onani ngati pali chilichonse chotumiza kunja ngati (!frames.length) { console.warn("Palibe chojambulira chomwe chingatumizidwe kunja."); kubwerera; }
// Pangani zolipira ndi metadata ndi mafelemu const payload = { adalengedwaPa: new Date().toISOString(), mafelemu };
// Tsitsani ngati JSON yosinthidwa downloadFayilo( "gamepad-log.json", JSON.stringify(payload, null, 2), "application/json" ); });
Mawonekedwe a JSON amasunga chilichonse chokhazikika komanso chosavuta kuwerengeka, ndikupangitsa kuti ikhale yabwino kutsitsanso mu zida za dev kapena kugawana ndi anzanu. Khwerero 3: Gwiritsani Ntchito Kutumiza kwa CSV Pazotumiza kunja kwa CSV, tifunika kufota zomwe zidalembedwa m'mizere ndi mizere:
//================================== // TUMIZANI MONGA CSV // ==================================
document.getElementById("export-csv").addEventListener("dinani", () => { // Onani ngati pali chilichonse chotumiza kunja ngati (!frames.length) { console.warn("Palibe chojambulira chomwe chingatumizidwe kunja."); kubwerera; }
// Pangani mzere wamutu wa CSV (mizere ya sitampu yanthawi, mabatani onse, nkhwangwa zonse) const headerButtons = mafelemu[0].buttons.map((_, i) => btn${i}); const headerAxes = mafelemu[0].axes.map((_, i) => axis${i}); const header = ["t", ...mabatani amutu, ...mutuAxes].join(",") + "\n";
// Pangani mizere ya data ya CSV const mizere = frames.map(f => { const btnVals = f.buttons.map(b => b.value); kubwerera [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");
// Tsitsani ngati CSV downloadFile("gamepad-log.csv", mutu + mizere, "text/csv"); });
CSV ndiyabwino pakusanthula deta chifukwa imatsegulidwa mwachindunji mu Excel kapena Google Sheets, kukulolani kuti mupange ma chart, zosefera, kapena mawonekedwe owoneka bwino. Tsopano mabatani otumiza kunja ali mkati, muwona zosankha ziwiri zatsopano pagawo: Tumizani JSON ndi Export CSV. JSON ndiyabwino ngati mukufuna kuponya chipikacho mu zida zanu za dev kapena kusuntha mozungulira. CSV, kumbali ina, imatsegula molunjika ku Excel kapena Google Sheets kuti mutha kujambula, kusefa, kapena kufananiza zolowa. Chithunzi chotsatira chikuwonetsa momwe gululi likuwonekera ndi maulamuliro owonjezerawo.
3. Chithunzithunzi System Nthawi zina simufunika kujambula kwathunthu, kungojambula "chithunzi" chofulumira cha mayiko olowera. Ndipamene batani la Take Snapshot limathandiza.
Ndipo JavaScript:
// ================================== // PANGANI ZINTHU ZONSE // ==================================
document.getElementById("chithunzi").addEventListener("dinani", () => { // Pezani masewera onse olumikizidwa const pads = navigator.getGamepads (); const activePads = [];
// Lowetsani ndikujambulani mawonekedwe a gamepad iliyonse yolumikizidwa kwa (const gp ya pads) { ngati (!gp) apitiliza; // Dumphani malo opanda kanthu
activePads.push({ id: gp.id, // Controller name/model timestamp: performance.now (), mabatani: gp.buttons.map(b => ({ wapanikizidwa: b.panikizidwa, mtengo: b.mtengo })), nkhwangwa: [...gp.axes] }); }
// Onani ngati masewera aliwonse apezeka ngati (!activePads.length) { console.warn("Palibe ma gamepads olumikizidwa ndi chithunzithunzi."); chenjezo ("Palibe wowongolera yemwe wapezeka!"); kubwerera; }
// Lowani ndikudziwitsa wogwiritsa ntchito console.log("Snapshot:", activePads); chenjezo(Chithunzi chajambulidwa! Kujambula ${activePads.length} zowongolera); });
Zithunzi zojambulidwa zimayimitsa mawonekedwe enieni a olamulira anu panthawi imodzi. 4. Ghost Input Replay Tsopano pazosangalatsa: ghost input replay. Izi zimatenga chipika ndikuziseweranso mowoneka ngati wosewera wa phantom akugwiritsa ntchito wowongolera.
JavaScript yobwereza: // ================================== // GHOST REPLAY // ==================================
document.getElementById("replay").addEventListener("dinani", () => { // Onetsetsani kuti tili ndi chojambulira choti tisewerenso ngati (!frames.length) { chenjezo ("Palibe chojambulira choti chibwereze!"); kubwerera; }
console.log ("Kuyambira kubwereza kwa mizimu ...");
// Tsatani nthawi yolumikizirana tiyeni startTime = performance.now (); lolani frameIndex = 0;
// Seweraninso makanema ojambula ntchito sitepe () { const now = performance.now (); const inatha = tsopano - startTime;
// Sinthani mafelemu onse omwe amayenera kuchitika pofika pano pamene (frameIndex < frames.length && frames[frameIndex].t <= inatha) { const frame = mafelemu [frameIndex];
// Sinthani UI ndi batani lojambulidwa btnA.classList.toggle("active", frame.buttons[0].pressed); btnB.classList.toggle("active", frame.buttons[1].pressed); btnX.classList.toggle("active", frame.buttons[2].pressed);
// Kusintha mawonekedwe lolani kukanikizidwa = []; frame.buttons.forEach((btn, i) => { ngati (btn.pressed) wakanikiza.push("Batani" + i); }); ngati (pressed.length> 0) { status.textContent = "Mzimu:" + pressed.join(", "); }
frameIndex++; }
// Pitirizani kuzungulira ngati pali mafelemu ambiri ngati (frameIndex < frames.length) { requestAnimationFrame(sitepe); } zina { console.log ("Replaykumaliza."); status.textContent = "Kuseweranso kwatha"; } }
// Yambani kubwereza sitepe (); });
Kuti ndipangitse kukonza zolakwika pang'ono, ndidawonjezera kubwereza kwa ghost. Mukajambulitsa gawo, mutha kugundanso ndikuwonera UI ikuchita, pafupifupi ngati wosewera wa phantom akuyendetsa pad. Batani latsopano la Replay Ghost likuwonekera pagawo la izi.
Hit Record, sokonezani ndi wowongolera pang'ono, imani, kenako bwerezani. UI imangotengera zonse zomwe mudachita, ngati mzimu wotsatira zomwe mwalemba. Bwanji mukuvutikira ndi zowonjezera izi?
Kujambulitsa/kutumiza kunja kumapangitsa kukhala kosavuta kwa oyesa kuwonetsa ndendende zomwe zidachitika. Zithunzi zojambulidwa zimaundana kwakanthawi, zothandiza kwambiri mukathamangitsa nsikidzi zosamveka. Ghost replay ndiyabwino pamaphunziro, macheke opezeka, kapena kungofanizira zowongolera mbali ndi mbali.
Pakadali pano, sikulinso chiwonetsero chowoneka bwino, koma china chomwe mungachigwiritse ntchito. Zochitika Zenizeni Zogwiritsa Ntchito Padziko Lonse Tsopano tili ndi chowongolera ichi chomwe chingathe kuchita zambiri. Imawonetsa zolowetsamo, imajambulitsa zipika, imatumiza kunja, komanso kubwereza zinthu. Koma funso lenileni ndilakuti: ndani kwenikweni amasamala? Kodi izi ndizothandiza kwa ndani? Madivelopa Masewera Owongolera ndi gawo la ntchito, koma kuwathetsa? Kawirikawiri ululu. Ingoganizirani kuti mukuyesa masewera omenyera nkhondo, ngati ↓ → + nkhonya. M’malo mopemphera, munakanikiziranso chimodzimodzi kawiri, mumajambula kamodzi, ndikubwerezanso. Zatheka. Kapena mumasinthanitsa zipika za JSON ndi mnzanu kuti muwone ngati nambala yanu yamasewera ambiri imachita chimodzimodzi pamakina awo. Ndizo zazikulu. Othandizira Kupezeka Izi zili pafupi ndi mtima wanga. Sikuti aliyense amasewera ndi "standard" controller. Owongolera osinthika amataya zizindikiro zodabwitsa nthawi zina. Ndi chida ichi, mutha kuwona zomwe zikuchitika. Aphunzitsi, ofufuza, aliyense. Amatha kutenga zipika, kuzifananiza, kapena kubwereza zolowetsa mbali ndi mbali. Mwadzidzidzi, zinthu zosaoneka zimawonekera. Kuyesa Kutsimikizira Ubwino Oyesa nthawi zambiri amalemba zolemba ngati "Ndinaphwanya mabatani apa ndipo zidasweka." Zosathandiza kwambiri. Tsopano? Amatha kujambula makina osindikizira enieni, kutumiza kunja chipikacho, ndikuchitumiza. Palibe kungoganiza. Aphunzitsi Ngati mukupanga maphunziro kapena makanema a YouTube, kubwereza kwa mizimu ndi golide. Mutha kunena kuti, "Izi ndi zomwe ndidachita ndi wowongolera," pomwe UI ikuwonetsa kuti zikuchitika. Kumafotokozera momveka bwino. Kupitilira Masewera Ndipo inde, izi sizimangokhudza masewera. Anthu agwiritsa ntchito zowongolera maloboti, mapulojekiti aluso, ndi malo olumikizirana. Nkhani yomweyi nthawi zonse: msakatuli akuwona chiyani kwenikweni? Ndi izi, simuyenera kuganiza. Mapeto Kuchotsa zolakwika zolowetsa zowongolera nthawi zonse kumakhala ngati kuchita khungu. Mosiyana ndi DOM kapena CSS, palibe woyang'anira womangidwa wamasewera; ndi manambala aiwisi chabe mu console, otayika mosavuta phokoso. Ndi mizere mazana angapo a HTML, CSS, ndi JavaScript, tapanga china chosiyana:
Chojambula chojambula chomwe chimapangitsa kuti zinthu zosaoneka ziwoneke. Dongosolo la CSS losanjikiza lomwe limapangitsa kuti UI ikhale yoyera komanso yosasinthika. Gulu lazowonjezera (kujambula, kutumiza kunja, zithunzithunzi, ghost replay) zomwe zimakweza kuchokera pachiwonetsero kupita ku chida chopanga mapulogalamu.
Pulojekitiyi ikuwonetsa momwe mungapitire pakusakaniza mphamvu za Web Platform ndi luso laling'ono mu CSS Cascade Layers. Chida chomwe ndangofotokoza chonsecho ndichotsegula. Mutha kutengera GitHub repo ndikuyesa nokha. Koma chofunika kwambiri, mukhoza kupanga nokha. Onjezani zigawo zanu. Pangani malingaliro anu obwereza. Phatikizani ndi mtundu wanu wamasewera. Kapena mugwiritse ntchito m'njira zomwe sindinaganizire. Kwa kuphunzitsa, kupezeka, kapena kusanthula deta. Pamapeto pake, izi sizimangokhudza kusokoneza ma gamepads. Ndi za kuwunikira pazolowera zobisika, ndikupatsa otukula chidaliro chogwira ntchito ndi zida zomwe ukonde sunalandirebe. Chifukwa chake, lowetsani chowongolera chanu, tsegulani mkonzi wanu, ndikuyamba kuyesa. Mutha kudabwa ndi zomwe msakatuli wanu ndi CSS yanu ingakwaniritsedi.
