Nuair a phlocálann tú rialtóir isteach, déanann tú cnaipí mash, bogann tú na maidí, tarraingíonn tú na truicear ... agus mar fhorbróir, ní fheiceann tú aon cheann de. Tá an brabhsálaí á phiocadh suas, cinnte, ach mura bhfuil tú ag logáil uimhreacha sa chonsól, tá sé dofheicthe. Sin an tinneas cinn leis an API Gamepad. Tá sé thart ar feadh na mblianta, agus i ndáiríre tá sé cumhachtach go leor. Is féidir leat cnaipí, bataí, triggers, na hoibreacha a léamh. Ach ní dhéanann an chuid is mó daoine teagmháil leis. Cén fáth? Toisc nach bhfuil aon aiseolas. Níl aon phainéal in uirlisí forbróra. Níl aon bhealach soiléir le fios an bhfuil an rialtóir fiú ag déanamh cad a cheapann tú. Mothaíonn sé cosúil le eitilt dall. Chuir sé sin faitíos mo dhóthain chun uirlis bheag a thógáil: Gamepad Cascáidigh Dífhabhtóir. In ionad a bheith ag stánadh ar aschur consól, gheobhaidh tú radharc beo, idirghníomhach ar an rialtóir. Brúigh rud éigin agus imoibríonn sé ar an scáileán. Agus le Sraitheanna Cascáidigh CSS, fanann na stíleanna eagraithe, mar sin is glaine dífhabhtú é. Sa phost seo, taispeánfaidh mé duit cén fáth a bhfuil an-phian ag baint le rialtóirí dífhabhtaithe, conas a chuidíonn CSS é a ghlanadh, agus conas is féidir leat dífhabhtóir amhairc ath-inúsáidte a thógáil le haghaidh do thionscadail féin.
Fiú má tá tú in ann iad go léir a logáil, gheobhaidh tú turscar consóil nach féidir a léamh go tapa. Mar shampla: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
An féidir leat a rá cén cnaipe a brúdh? B'fhéidir, ach amháin tar éis straining do shúile agus ar iarraidh cúpla ionchuir. Mar sin, ní hea, ní thagann dífhabhtú go héasca maidir le hionchuir léitheoireachta. Fadhb 3: Easpa Struchtúir Fiú má chaitheann tú léirshamhlú tapa le chéile, féadann stíleanna éirí go han-tapa. Is féidir le stáit réamhshocraithe, gníomhacha agus dífhabhtaithe forluí, agus gan struchtúr soiléir, éiríonn do CSS brittle agus deacair a leathnú. Is féidir le Sraitheanna Cascáideacha CSS cabhrú. Grúpálann siad stíleanna ina “sraitheanna” a ordaítear de réir tosaíochta, mar sin ní stopann tú ag troid le sainiúlacht agus le buille faoi thuairim, “Cén fáth nach bhfuil mo stíl dífhabhtaithe á léiriú?” Ina áit sin, tá imní ar leith agat:
Bonn: Caighdeán, cuma tosaigh an rialaitheora. Gníomhach: Buaicphointí do chnaipí brúite agus maidí bogtha. Dífhabhtú: Forleagan d’fhorbróirí (m.sh. léamh amach uimhriúil, treoracha, agus mar sin de).
Dá mbeimis le sraitheanna i CSS a shainiú dá réir seo, bheadh: /* an tosaíocht is ísle go dtí an tosaíocht is airde */ @layer bonn, gníomhach, dífhabhtaithe;
bonn @ciseal { /* ... */ }
@layer gníomhach { /* ... */ }
@layer debug { /* ... */ }
Mar gheall ar chruann gach sraithe intuartha, bíonn a fhios agat i gcónaí cé na rialacha a bhuaigh. Ní hamháin go bhfuil sé níos éasca dífhabhtú a dhéanamh de bharr na hintuarthachta sin, ach is féidir é a láimhseáil i ndáiríre. Tá an fhadhb clúdaithe againn (ionchur dofheicthe, messy) agus an cur chuige (dífhabhtóir amhairc a tógadh le Sraitheanna Cascáidigh). Anois siúlfaimid tríd an bpróiseas céim ar chéim chun an dífhabhtóir a thógáil. An Coincheap Debugger Is é an bealach is éasca chun ionchur folaithe a dhéanamh le feiceáil ná é a tharraingt ar an scáileán. Sin a dhéanann an dífhabhtóir seo. Faigheann cnaipí, truicear agus luamhán stiúrtha radharc amhairc.
Brúigh A: Soilsíonn ciorcal suas. Nudge an bata: Sleamhnaíonn an ciorcal timpeall. Tarraing truicear leath bealaigh: Líonann barra leath bealaigh.
Anois níl tú ag stánadh ar 0s agus 1s, ach i ndáiríre ag féachaint ar an rialtóir ag freagairt beo. Ar ndóigh, a luaithe a thosaíonn tú ag carnadh ar stáit mar fhaisnéis réamhshocraithe, brúite, dífhabhtaithe, b'fhéidir fiú modh taifeadta, tosaíonn an CSS ag éirí níos mó agus níos casta. Sin nuair a thagann sraitheanna easghluaiseachta áisiúil. Seo sampla scriosta: bonn @ciseal { .cnaipe { cúlra: #222; teorainn-ga: 50%; leithead: 40px; airde: 40px; } }
@layer gníomhach { .cnaipe.brúite { cúlra: #0f0; /* glas geal */ } }
@layer debug { .cnaipe::i ndiaidh { ábhar: attr(sonraí-luach); cló-mhéid: 12px; dath: #fff; } }
Baineann an t-ordú ciseal: bonn → gníomhach → dífhabhtaithe.
bonn tarraingíonn an rialtóir. Láimhseálann gníomhach stáit brúite. caitheann debug ar fhorleagan.
Má dhéantar é a bhriseadh mar seo, ciallaíonn sé seo nach bhfuil tú ag troid le cogaí sainiúlachta aisteacha. Tá a áit ag gach ciseal, agus tá a fhios agat i gcónaí cad a bhuaigh. Ag Tógáil Amach é Cuirimis rud éigin ar an scáileán ar dtús. Ní gá breathnú go maith air - ní mór dó a bheith ann ionas go mbeidh rud éigin againn le bheith ag obair leis.
Dífhabhtóir Cascáidigh Gamepad
a thaispeáint
Níl ansin ach boscaí. Níl sé spreagúil go fóill, ach tugann sé lámha dúinn chun grab níos déanaí le CSS agus JavaScript. Ceart go leor, tá sraitheanna cascáide á n-úsáid agam anseo mar coinníonn sé rudaí eagraithe nuair a chuireann tú níos mó stát leis. Seo pas garbh:
/* ============================ Socrú Sraitheanna Cascáidigh Cúrsaí ordaithe: bonn → gníomhach → dífhabhtaithe ============================
/* Sainmhínigh ordú ciseal roimh ré */ @layer bonn, gníomhach, dífhabhtaithe;
/* Ciseal 1: Bunstíleanna - cuma réamhshocraithe */ bonn @ciseal { .cnaipe { cúlra: #333; teorainn-ga: 50%; leithead: 70px; airde: 70px; taispeáint: flex; údar-ábhar: ionad; ailíniú-ítimí: lár; }
.sos { leithead: 20px; airde: 70px; cúlra: #333; taispeáint: inlíne-bloc; } }
/* Ciseal 2: Staideanna gníomhacha - láimhseálann cnaipí brúite */ @layer gníomhach { .cnaipe.gníomhach { cúlra: #0f0; /* Glas geal nuair a bhrúitear é */ claochlú: scála(1.1); /* Méadaíonn sé an cnaipe beagán */ }
.sos.gníomhach { cúlra: #0f0; claochlú: scaleY(1.1); /* Síneann sé go hingearach nuair a bhrúitear é */ } }
/* Ciseal 3: Forleagan dífhabhtaithe - eolas forbróra */ @layer debug { .cnaipe::i ndiaidh { ábhar: attr(sonraí-luach); /* Taispeáin an luach uimhriúil */ cló-mhéid: 12px; dath: #fff; } }
Is é áilleacht an chur chuige seo ná go bhfuil cuspóir soiléir ag gach ciseal. Ní féidir leis an mbonnchiseal gníomhach a shárú, agus ní féidir le gníomhach dífhabhtú a shárú choíche, beag beann ar shainiúlacht. Cuireann sé seo deireadh leis na cogaí sainiúlachta CSS a chuireann uirlisí dífhabhtaithe i bhfeidhm de ghnáth. Anois is cosúil go bhfuil roinnt braislí ina suí ar chúlra dorcha. Go hionraic, ní ró-olc.
JavaScript á chur leis Am javascript. Seo nuair a dhéanann an rialtóir rud éigin i ndáiríre. Tógfaimid é seo céim ar chéim. Céim 1: Bainistíocht Stáit a chur ar bun Ar dtús, teastaíonn athróga uainn chun staid an dífhabhtóra a rianú: // ============================ // BAINISTÍOCHT STÁIT // ============================
ligean rith = bréagach; // Rianaíonn sé cibé an bhfuil an dífhabhtóir gníomhach lig rafId ; // Stórálann sé an IDAnimationFrame request lena chealú
Rialaíonn na hathróga seo an lúb beochana a léann ionchur gamepad go leanúnach. Céim 2: Grab Tagairtí DOM Ansin, faighimid tagairtí do na heilimintí HTML go léir a bheidh á nuashonrú againn: // ============================ // TAGAIRTÍ EILIMINT DOM // ============================
const btnA = document.getElementById("btn-a"); const btnB = document.getElementById("btn-b"); const btnX = document.getElementById("btn-x"); const pause1 = document.getElementById("sos1"); const pause2 = document.getElementById("sos2"); const status = document.getElementById("stádas");
Tá sé níos éifeachtaí na tagairtí seo a stóráil roimh ré ná an DOM a cheistiú arís agus arís eile. Céim 3: Cuir Méarchláir Fallback Le haghaidh tástála gan rialtóir fisiciúil, mapálfaimid eochracha méarchláir chuig cnaipí: // ============================ // MÉARBHÁIL TIOMÁNAITHE (le tástáil gan rialaitheoir) // ============================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [sos1, sos2] // rialaíonn eochair 'p' an dá bharra sos };
Ligeann sé seo dúinn an Chomhéadain a thástáil trí eochracha a bhrú ar mhéarchlár. Céim 4: Cruthaigh an Príomh-Lúb Nuashonraithe Seo an áit a dtarlaíonn an draíocht. Ritheann an fheidhm seo go leanúnach agus léann sí staid an gamepad: // ============================ // LÚ NUASHONRUITHE PRÍOMH GAMEPAD // ============================
feidhm nuashonraithe Gamepad() { // Faigh gach gamepads nasctha const gamepads = navigator.getGamepads(); má fhilleann (!gamepads);
// Úsáid an chéad gamepad ceangailte const gp = gamepads[0];
má (gp) { // Luann an cnaipe a nuashonrú tríd an rang "gníomhach" a scoránú btnA.classList.toggle("gníomhach", gp.buttons[0].brúite); btnB.classList.toggle("gníomhach", gp.buttons[1].brúite); btnX.classList.toggle("gníomhach", gp.buttons[2].brúite);
// Láimhseáil an cnaipe sos (innéacs cnaipe 9 ar fhormhór na rialtóirí) const pausePressed = gp.buttons[9].brúite; sos1.classList.toggle("gníomhach", ar sos); sos2.classList.toggle("gníomhach", ar sos);
// Tóg liosta de na cnaipí atá brúite faoi láthair le haghaidh taispeáint stádais lig brúite = []; gp.buttons.forEach((btn, i) => { má (btn. brúite)brúite.push("Button" + i); });
// Nuashonraigh téacs stádais má bhrúitear cnaipí ar bith má (brúite.length > 0) { status.textContent = "Brúite:" + brúite.join(", "); } }
// Lean ar aghaidh leis an lúb má tá dífhabhtóir ag rith má (ag rith) { rafId = requestAnimationFrame(updateGamepad); } }
Cuireann an modh classList.toggle() leis nó baintear an rang gníomhach bunaithe ar cibé an bhfuil an cnaipe brúite, rud a spreagann ár stíleanna sraitheanna CSS. Céim 5: Láimhseáil Imeachtaí Méarchláir De bharr na n-éisteoirí imeachtaí seo oibríonn an t-aischur méarchláir: // ============================ // Láimhseálaithe Imeachtaí Méarchláir // ============================
document.addEventListener("keydown", (e) => { más rud é (eochairMap[e.key]) { // Déileáil le heilimintí singil nó iolracha más rud é (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("gníomhach")); } eile { keyMap[e.key].classList.add("gníomhach"); } status.textContent = "Eochair brúite:" + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { más rud é (eochairMap[e.key]) { // Bain an stát gníomhach nuair a scaoiltear eochair más rud é (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("gníomhach")); } eile { keyMap[e.key].classList.remove("gníomhach"); } status.textContent = "Eochair scaoilte:" + e.key.toUpperCase(); } });
Céim 6: Cuir Tosaigh / Stop Rialú Mar fhocal scoir, teastaíonn bealach uainn chun an dífhabhtóir a scoránaigh ar siúl agus as: // ============================ // scoránaigh dífhabhtóir AR / AS // ============================
document.getElementById("scoránaigh").addEventListener("cliceáil", () => { ag rith = !running; // Smeach an staid reatha
má (ag rith) { status.textContent = "Dífhabhtóir ag rith..."; nuashonrúGamepad(); // Tosaigh an lúb nuashonraithe } eile { status.textContent = "Dífhabhtóir neamhghníomhach"; cealAnimationFrame(rafId); // Stop an lúb } });
Mar sin, yeah, brúigh an cnaipe agus glows sé. Brúigh an bata agus bogann sé. Sin é. Rud amháin eile: luachanna amh. Uaireanta is mian leat ach uimhreacha a fheiceáil, ní soilse.
Ag an gcéim seo, ba cheart duit a fheiceáil:
Rialaitheoir simplí ar an scáileán, Cnaipí a imoibríonn de réir mar a idirghníomhaíonn tú leo, agus Léigh amach dífhabhtaithe roghnach a thaispeánann innéacsanna cnaipe brúite.
Chun é seo a dhéanamh níos lú teibí, seo duit léiriú tapa ar an rialtóir ar an scáileán ag freagairt i bhfíor-am:
Anois, logálann an cnaipe Tosaigh Taifeadadh gach rud go dtí go mbuaileann tú Stop Recording. 2. Sonraí a Easpórtáil chuig CSV/JSON Nuair a bheidh logáil againn, beidh muid ag iarraidh é a shábháil.
Céim 1: Cruthaigh an Cúntóir Íoslódála Ar dtús, teastaíonn feidhm chúntóra uainn a láimhseálann íoslódálacha comhaid sa bhrabhsálaí: // ============================ // COMHAD ÍOSCHÚNAITHEOIR // ============================
feidhm downloadFile (ainm comhaid, ábhar, cineál = "téacs/gnáth") { // Cruthaigh blob ón ábhar const blob = Blob nua([ábhar], { cineál }); const url = URL.createObjectURL(blob);
// Cruthaigh nasc íoslódála sealadach agus cliceáil air const a = document.createElement("a"); a.href = url; a.download = ainm comhaid; a.cliceáil();
// Glan suas an URL réad tar éis é a íoslódáil setTimeout(() => URL.revokeObjectURL(url), 100); }
Feidhmíonn an fheidhm seo trí Blob (réad mór dénártha) a chruthú ó do shonraí, ag giniúint URL sealadach dó, agus ag cliceáil go ríomhchláraithe ar nasc íoslódála. Cinntíonn an glantachán nach sceithimid cuimhne. Céim 2: Láimhseáil Easpórtáil JSON Tá JSON foirfe chun an struchtúr sonraí iomlán a chaomhnú:
// ============================ // ONNMHAIRIÚ MAR JSON // ============================
document.getElementById("export-json").addEventListener("cliceáil", () => { // Seiceáil an bhfuil aon rud le heaspórtáil má (!frames.length) { console.warn("Níl aon taifeadadh ar fáil le heaspórtáil."); filleadh ; }
// Cruthaigh pálasta le meiteashonraí agus frámaí ualach pálasta = { cruthaitheAg: Dáta nua().toISOString(), frámaí };
// Íoslódáil mar JSON formáidithe íoslódáil Comhad ( "gamepad-log.json", JSON.stringify(pálasta, null, 2), "iarratas/json" ); });
Coinníonn an fhormáid JSON gach rud struchtúrtha agus in-parseáilte go héasca, rud a fhágann go bhfuil sé iontach é a luchtú ar ais in uirlisí forbartha nó a roinnt le comhghleacaithe. Céim 3: Láimhseáil CSV Easpórtáil Maidir le honnmhairithe CSV, ní mór dúinn na sonraí ordlathacha a leá i sraitheanna agus i gcolúin:
//============================ // ONNMHAIRIÚ MAR CSV // ============================
document.getElementById("export-csv").addEventListener("cliceáil", () => { // Seiceáil an bhfuil aon rud le heaspórtáil má (!frames.length) { console.warn("Níl aon taifeadadh ar fáil le heaspórtáil."); filleadh ; }
// Tóg ceanntásca CSV (colúin don stampa ama, gach cnaipí, gach ais) const headerButtons = frámaí[0].buttons.map((_, i) => btn${i}); const headerAxes = frámaí[0].axes.map((_, i) => ais${i}); const header = [ "t", ...headerButtons, ...headerAxes].join(",") + "\n";
// Tóg sraitheanna sonraí CSV sraitheanna const = frames.map(f => { const btnVals = f.buttons.map(b => b.value); filleadh [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");
// Íoslódáil mar CSV downloadFile ("gamepad-log.csv", ceanntásc + sraitheanna, "téacs/csv"); });
Tá CSV iontach le haghaidh anailíse sonraí toisc go n-osclaíonn sé go díreach in Excel nó Google Sheets, rud a ligeann duit cairteacha, sonraí scagaire, nó patrúin a fheiceáil go radhairc. Anois go bhfuil na cnaipí easpórtála istigh, feicfidh tú dhá rogha nua ar an bpainéal: Easpórtáil JSON agus Easpórtáil CSV. Tá JSON go deas más mian leat an logáil amh a chaitheamh ar ais isteach i do chuid uirlisí dev nó dul timpeall ar an struchtúr. Ar an láimh eile, osclaíonn CSV go díreach isteach i Excel nó Google Sheets ionas gur féidir leat ionchuir a chairteadh, a scagadh nó a chur i gcomparáid. Léiríonn an figiúr seo a leanas an chuma atá ar an bpainéal leis na rialuithe breise sin.
3. Córas seat Uaireanta ní bhíonn taifeadadh iomlán uait, ach “scáileán tapa” de na stáit ionchuir. Sin an áit a chuidíonn cnaipe Tóg Snapshot.
Agus an JavaScript:
// ============================ // TÓGANN SCRÍBHINN // ============================
document.getElementById("amharc").addEventListener("cliceáil", () => { // Faigh gach gamepads nasctha pads const = navigator.getGamepads(); const activePads = [ ] ;
// Lúb tríd agus gabh staid gach gamepad nasctha le haghaidh (const gp pads) { má leanann (!gp) ar aghaidh; // Scipeáil ar shliotáin fholmha
activePads.pus({ id: gp.id, // Ainm an rialtóra/múnla stampa ama: feidhmíocht.now(), cnaipí: gp.buttons.map(b => ({ brúite: b. brúite, luach: b.value })), aiseanna: [...gp.axes] }); }
// Seiceáil an bhfuarthas aon gamepads má (!activePads.length) { console.warn("Níl aon gamepads nasctha le haghaidh seat."); foláireamh("Níor aimsíodh aon rialtóir!"); filleadh ; }
// Logáil agus cuir in iúl don úsáideoir console.log("Snaip:", activePads); foláireamh(ghlacadh tógtha! Gabhadh rialtóir(í) ${activePads.length}); });
Déanann grianghraif reoite ar staid bheacht do rialtóra ag aon nóiméad amháin. 4. Athsheinm Ionchuir Taibhse Anois don cheann spraoi: athimirt ionchuir taibhse. Tógann sé seo logáil agus imríonn sé ar ais é go amhairc amhail is dá mbeadh imreoir phantom ag baint úsáide as an rialtóir.
JavaScript le haghaidh athimeartha: // ============================ // GHOST REPLAY // ============================
document.getElementById("athimirt").addEventListener("cliceáil", () => { // Cinntigh go bhfuil taifead againn le hathsheinn má (!frames.length) { foláireamh("Gan taifeadadh le hathsheinn!"); filleadh ; }
console.log("Ag tosú athchraoladh taibhse...");
// Rian ama le haghaidh athsheinm sioncronaithe lig startTime = performance.now(); lig frameIndex = 0;
// Lúb beochana athsheinn céim fheidhm() { const anois = performance.now(); const elapsed = anois - startTime;
// Próiseáil gach fráma ba chóir a bheith tarlaithe faoi láthair agus (frameIndex < frames.length && frames[frameIndex].t <= caite) { const frame = frámaí[frameIndex];
// Nuashonraigh Chomhéadain leis na stáit cnaipe taifeadta btnA.classList.toggle("gníomhach", frame.buttons[0].brúite); btnB.classList.toggle("gníomhach", frame.buttons[1].brúite); btnX.classList.toggle("gníomhach", frame.buttons[2].brúite);
// Nuashonraigh taispeáint stádais lig brúite = []; frame.buttons.forEach((btn, i) => { má tá (btn. brúite) brúite.push ("Button" + i); }); má (brúite.length > 0) { status.textContent = "Taibhse:" + brúite.join(", "); }
frámaIndex++; }
// Lean ar aghaidh lúb má tá níos mó frámaí más rud é (frameIndex < frames.length) { requestFrameAnimation(céim); } eile { console.log("Athsheinncríochnaithe."); status.textContent = "Athsheinn críochnaithe"; } }
// Tosaigh an athimirt céim(); });
Chun debugging a dhéanamh beagán níos praiticiúla, chuir mé replay taibhse leis. Nuair a bheidh seisiún taifeadta agat, is féidir leat athimirt a bhualadh agus féachaint ar an Chomhéadain é a ghníomhú, beagnach mar a bhíonn imreoir phantom ag rith an eochaircheap. Taispeánann cnaipe Replay Ghost nua sa phainéal chuige seo.
Buail Taifead, praiseach thart leis an rialtóir beagán, stop, ansin replay. Macallaíonn an Chomhéadain gach rud a rinne tú, cosúil le taibhse tar éis d'ionchuir. Cén fáth bodhraigh leis na breiseanna seo?
Fágann taifeadadh/onnmhairiú go mbíonn sé éasca do thástálaithe a thaispeáint go beacht cad a tharla. Déanann grianghraif reoite nóiméad ama, thar a bheith úsáideach agus tú sa tóir ar fhabhtanna aisteacha. Tá replay Ghost iontach le haghaidh ranganna teagaisc, seiceálacha inrochtaineachta, nó díreach i gcomparáid socruithe rialaithe taobh le taobh.
Ag an bpointe seo, ní hamháin gur taispeántas néata é a thuilleadh, ach rud a d’fhéadfá a chur ag obair i ndáiríre. Cásanna Úsáide Fíor-Dhomhanda Anois tá an dífhabhtóir seo againn atá in ann go leor a dhéanamh. Taispeánann sé ionchur beo, taifeadann sé logaí, onnmhairíonn sé iad, agus fiú athsheinntear rudaí. Ach is í an cheist fíor: cé atá i ndáiríre cares? Cé dó a bhfuil sé seo úsáideach? Forbróirí Cluiche Tá rialtóirí mar chuid den phost, ach iad a dhífhabhtú? De ghnáth pian. Samhlaigh go bhfuil tú ag tástáil teaglama cluiche troda, cosúil le ↓ → + punch. In ionad a bheith ag guí, bhrúigh tú é ar an mbealach céanna faoi dhó, déanann tú é a thaifeadadh uair amháin, agus athsheinntear é. Déanta. Nó malartaíonn tú logaí JSON le comhghleacaí foirne le seiceáil an bhfuil do chód il-imreora ag freagairt mar an gcéanna ar a n-inneall. Sin ollmhór. Cleachtóirí Inrochtaineachta Tá an ceann seo gar do mo chroí. Ní imríonn gach duine le rialtóir “caighdeánach”. Caitheann rialtóirí oiriúnaitheacha comharthaí aisteacha uaireanta. Leis an uirlis seo, is féidir leat a fheiceáil go díreach cad atá ag tarlú. Múinteoirí, taighdeoirí, cibé duine. Is féidir leo logaí a grab, iad a chur i gcomparáid, nó ionchuir a athimirt taobh le taobh. Go tobann, éiríonn rudaí dofheicthe soiléir. Tástáil Dearbhaithe Cáilíochta Is gnách go scríobhann tástálaithe nótaí ar nós “Mhúch mé cnaipí anseo agus bhris sé.” Níl sé an-chabhrach. Anois? Is féidir leo na cófraí cruinn a ghabháil, an logáil a onnmhairiú, agus é a sheoladh amach. Gan buille faoi thuairim. Oideachasóirí Má tá ranganna teagaisc nó físeáin YouTube á ndéanamh agat, is ór é athchraoladh taibhse. Is féidir leat a rá go litriúil, "Seo an méid a rinne mé leis an rialtóir," agus léiríonn an Chomhéadain go bhfuil sé ag tarlú. Déanann mínithe ar bhealach níos soiléire. Thar Cluichí Agus sea, ní bhaineann sé seo le cluichí amháin. Bhain daoine úsáid as rialaitheoirí le haghaidh róbait, tionscadail ealaíne, agus comhéadain inrochtaineachta. An cheist chéanna gach uair: cad a fheiceann an brabhsálaí i ndáiríre? Leis seo, ní gá duit a buille faoi thuairim. Conclúid Mhothaigh dífhabhtáil ionchur rialtóra i gcónaí mar eitilt dall. Murab ionann agus an DOM nó CSS, níl aon chigire ionsuite le haghaidh gamepads; níl ann ach uimhreacha amh sa chonsól, caillte go héasca sa torann. Le cúpla céad líne de HTML, CSS, agus JavaScript, thógamar rud éigin difriúil:
Dífhabhtóir amhairc a fhágann ionchuir dofheicthe infheicthe. Córas CSS cisealta a choinníonn an Chomhéadain glan agus indífhabhtaithe. Sraith feabhsuithe (taifeadadh, easpórtáil, grianghraif, athsheinm taibhsí) a ardaíonn é ó thaispeántas go uirlis forbróra.
Léiríonn an tionscadal seo cé chomh fada agus is féidir leat dul trí chumhacht an Ardán Gréasáin a mheascadh le beagán cruthaitheachta i Sraitheanna Cascáidigh CSS. Is uirlis foinse oscailte í an uirlis a mhínigh mé ina hiomláine. Is féidir leat an repo GitHub a chlónáil agus é a thriail duit féin. Ach níos tábhachtaí fós, is féidir leat é a dhéanamh leat féin. Cuir do sraitheanna féin leis. Tóg do loighic athimeartha féin. Déan é a chomhtháthú le do fhréamhshamhail cluiche. Nó fiú é a úsáid ar bhealaí nach bhfuil samhlaithe agam. Le haghaidh teagaisc, inrochtaineachta, nó anailís sonraí. Ag deireadh an lae, ní bhaineann sé seo ach le gamepads debugging. Is éard atá i gceist leis ná solas a chur ar ionchuir fholaithe, agus muinín a thabhairt d’fhorbróirí oibriú le crua-earraí nach nglacann an ngréasán go hiomlán leo go fóill. Mar sin, plugáil isteach do rialtóir, oscail d'eagarthóir, agus cuir tús le triail. Seans go mbeidh ionadh ort faoin méid is féidir le do bhrabhsálaí agus do CSS a bhaint amach i ndáiríre.
