Ka hono koe ki te kaitahuri, ka nukuhia e koe nga patene, ka nukuhia nga rakau, toia nga keu… a hei kaiwhakawhanake, kaore koe e kite i tetahi. Ko te kaitirotiro kei te tiki ake, he pono, engari mena kei te takiuru koe i nga nama ki te papatohu, kaore e kitea. Koina te mahunga o te Gamepad API. Kua roa nga tau, a he tino kaha. Ka taea e koe te panui patene, rakau, keu, nga mahi. Engari kaore te nuinga o nga tangata e pa ki a ia. He aha? Na te mea kaore he urupare. Kaore he panui i roto i nga taputapu kaiwhakawhanake. Kaore he huarahi marama ki te mohio mena kei te mahi te kaiwhakahaere i to whakaaro. He rite ki te rere matapo. I raru ahau ki te hanga i tetahi taputapu iti: Gamepad Cascade Debugger. Engari o te titiro ki te putanga papatohu, ka whiwhi koe i te tirohanga ora, tauwhitiwhiti o te kaiwhakahaere. Pēhia tetahi mea ka tauhohe ki te mata. Na me CSS Cascade Layers, ka noho tonu nga momo, no reira he pai ake te patuiro. I roto i tenei pou, ka whakaatu ahau ki a koe he aha te mamae o nga kaiwhakahaere patuiro, me pehea te awhina a CSS ki te horoi, me pehea e taea ai e koe te hanga i tetahi kaiwhakairo tirohanga mo o ake kaupapa.
Ahakoa ka taea e koe te tuhi i a raatau katoa, ka mutu ka mutu koe ki te mokowhiti kore korero. Hei tauira: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Ka taea e koe te korero he aha te paatene i pehia? Akene, engari i muri noa iho i te tarai i o kanohi me te ngaro i etahi whakaurunga. Na, kaore, kaore e ngawari te haere mai o te patuiro ina tae mai ki te panui i nga whakaurunga. Raruraru 3: Kore o te Hanganga Ahakoa ka whakahiatohia e koe he kaitirotiro tere, ka tere haere nga momo ahua. Ka taea te īnaki te āhua taunoa, te kaha, me te patuiro, me te kore he hanganga marama, ka pakarukaru to CSS me te uaua ki te toro atu. Ka taea e CSS Cascade Layers te awhina. Ka whakarōpūhia nga momo ki roto i nga "papa" ka whakatauhia e te kaupapa matua, no reira ka mutu te whawhai mo te motuhake me te pohehe, "He aha taku ahua patuiro kaore e whakaatuhia?" Engari, ka pupuri koe i nga awangawanga motuhake:
Papa: Ko te paerewa o te kaiwhakahaere, te ahua tuatahi. Hohe: Nga miramira mo nga patene pehia me nga rakau neke. Patuiro: Whakakikorua mo nga kaiwhakawhanake (hei tauira, nga panui nama, nga kaiarahi, me era atu).
Mena ka tautuhia e matou nga paparanga i roto i te CSS kia rite ki tenei, ka whai matou: /* iti rawa ki te kaupapa matua */ @paparanga turanga, hohe, patuiro;
@paparanga turanga { /* ... */ }
@papanga hohe { /* ... */ }
@apa patuiro { /* ... */ }
Na te mea ka mau tonu ia paparanga, ka mohio tonu koe ko nga ture ka wikitoria. Ko taua matapae ka ngawari ake te patuiro, engari ka taea te whakahaere. Kua hipokina e matou te raruraru (kaore e kitea, te urunga kino) me te huarahi (he patuiro ataata i hangaia me te Cascade Layers). Inaianei ka hikoi tatou i roto i te taahiraa-i-taahiraa ki te hanga i te patuiro. Ko te Ariā patuiro Ko te huarahi ngawari ki te whakaatu i te whakauru huna ko te tuhi noa ki runga i te mata. Koina te mahi a tenei kaipatu. Ko nga patene, nga keu, me nga rakau harikoa ka whiwhi tirohanga.
Pehi A: Ka rama te porowhita. Tuia te rakau: Ka paheke te porowhita. Toia te keu ki te haurua: Ka whakakiia te pae ki te haurua.
Inaianei kaore koe e titiro ki te 0s me te 1s, engari kei te maataki tonu i te mahi a te kaiwhakahaere. Ae ra, ka tiimata ana koe ki te kohi i nga whenua penei i te taunoa, te pehi, te korero patuiro, tera pea he aratau tuhi, ka timata te CSS ki te nui haere me te uaua. Koinei te waahi ka uru mai nga paparanga cascade. Anei tetahi tauira kua whakakorehia: @paparanga turanga { .pātene { papamuri: #222; rohe-radius: 50%; whanui: 40px; teitei: 40px; } }
@papanga hohe { .pātene.Pēhia { papamuri: #0f0; /* kakariki kanapa */ } }
@apa patuiro { .pātene::muri { ihirangi: attr(uara-raraunga); momotuhi-rahi: 12px; tae: #fff; } }
He mea nui te raupapa paparanga: turanga → hohe → patuiro.
ka kumea e te turanga te kaiwhakahaere. kakau kaha aki āhua. ka whiua te patuiro ki runga i nga whakakikorua.
Ko te pakaru penei ko te tikanga kaore koe e whawhai ki nga pakanga motuhake. Kei ia paparanga tona waahi, ka mohio tonu koe he aha te toa. Hangaia ki waho Me tiki tetahi mea i runga i te mata i te tuatahi. Ehara i te mea kia pai te ahua - me noho tonu kia whai mahi maatau.
Kaipoipoipoipoi Putapaoro
He pouaka noa tera. Ehara i te mea whakahihiri, engari ka hoatu e matou he kakau hei hopu i muri mai me te CSS me te JavaScript. Kaati, kei te whakamahi ahau i nga paparanga cascade i konei na te mea ka mau tonu nga taonga ina taapiri koe i etahi atu whenua. Anei tetahi paahi kino:
/* ================================================== TE WHAKATAHI RANGATIRA WHAKATAHI Nga take ota: turanga → hohe → patuiro ================================================== */
/* Tautuhia te raupapa paparanga ki mua */ @paparanga turanga, hohe, patuiro;
/* Papa 1: Nga momo turanga - ahua taunoa */ @paparanga turanga { .pātene { papamuri: #333; rohe-radius: 50%; whanui: 70px; teitei: 70px; whakaatu: flex; justify-content: pokapū; tīaroaro-tūemi: pokapū; }
.tatari { whanui: 20px; teitei: 70px; papamuri: #333; whakaatu: paraka-roto; } }
/* Papa 2: Nga ahua hohe - ka mau i nga paatene kua pehia */ @papanga hohe { .button.active { papamuri: #0f0; /* Kakariki kanapa ina pehia */ huri: tauine(1.1); /* Ka whakanuia paku te paatene */ }
.pause.active { papamuri: #0f0; huri: tauineY(1.1); /* Ka totoro poutū ina pehia */ } }
/* Papa 3: Whakakikorua i te patuiro - he korero kaiwhakawhanake */ @apa patuiro { .pātene::muri { ihirangi: attr(uara-raraunga); /* Whakaatu ai te uara tau */ momotuhi-rahi: 12px; tae: #fff; } }
Ko te ataahua o tenei huarahi, he maamaa te kaupapa o ia paparanga. E kore e taea e te paparanga turanga te whakakore i te hohe, me te kaha e kore e taea te whakakore i te patuiro, ahakoa te mea motuhake. Ma tenei ka whakakore i nga pakanga motuhake CSS e mate ana i nga taputapu patuiro. Inaianei te ahua kei te noho etahi tautau ki runga i te papamuri pouri. Ma te pono, kaore i te kino rawa.
Te taapiri i te JavaScript wā JavaScript. Koinei te waahi ka mahia e te kaiwhakahaere tetahi mea. Ka hanga e matou tenei taahiraa ma te taahiraa. Hipanga 1: Whakaritehia te Whakahaere Kawanatanga Tuatahi, me whai taurangi hei whai i te ahua o te kaipatu: // ================================================== // TE WHAKAMAHI KAUPAPA // ==================================================
kia rere = teka; // Ka aroturuki mehemea kei te hohe te patuiro kia rafId; // Ka pupuri i te tonoAnimationFrame ID mo te whakakore
Ko enei taurangi ka whakahaere i te riipene hākoritanga e panui tonu ana i te whakauru gamepad. Hipanga 2: Kapohia nga Tohutoro DOM I muri mai, ka whiwhi tohutoro ki nga huānga HTML katoa ka whakahouhia e matou: // ================================================== // DOM ELEMENT REFERENCES // ==================================================
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("tuanga");
He pai ake te penapena i enei tohutoro ki mua atu i te patai i te DOM. Hipanga 3: Tāpirihia te Whakamuri Papapātuhi Mo te whakamatautau kaore he kaiwhakahaere tinana, ka mapihia e matou nga taviri papapātuhi ki nga paatene: // ================================================== // KEYBOARD FALLBACK (mo te whakamatautau kaore he kaiwhakahaere) // ==================================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' ka whakahaere i nga pae okioki e rua };
Ma tenei ka taea e tatou te whakamatautau i te UI ma te pehi i nga taviri i runga i te papapātuhi. Hipanga 4: Waihangahia te Loop Whakahou Matua I konei ka tupu te makutu. Ka haere tonu tenei mahi me te panui i te ahua gamepad: // ================================================== // MAIN GAMEPAD UPDATE LOOP // ==================================================
mahi whakahouGamepad() { // Tikina nga papa takaro katoa e hono ana const gamepads = navigator.getGamepads(); ki te hoki mai (!gamepads);
// Whakamahia te gamepad hono tuatahi const gp = gamepads[0];
mehemea (gp) { // Whakahouhia te paatene e kii ana ma te takahuri i te akomanga "kaha". btnA.classList.toggle("active", gp.buttons[0].pehia); btnB.classList.toggle("active", gp.buttons[1].pehia); btnX.classList.toggle("active", gp.buttons[2]. pehia);
// Ka mau i te patene okioki (taurangi paatene 9 mo te nuinga o nga kaiwhakahaere) const pausePressed = gp.pātene[9].pehia; pause1.classList.toggle("active", pausePressed); pause2.classList.toggle("active", pausePressed);
// Hanga he rarangi o nga patene e pehia ana i tenei wa mo te whakaatu mana kia pehia = []; gp.buttons.forEach((btn, i) => { ki te (btn.pressed)pressed.push("Pātene " + i); });
// Whakahouhia te tuhinga mana mena ka pehia etahi paatene mehemea (penei.roa > 0) { status.textContent = "Kua pehia: " + pressed.join(", "); } }
// Me haere tonu te kohanga mena kei te rere te patuiro ki te (rere) { rafId = requestAnimationFrame(updateGamepad); } }
Ko te tikanga classList.toggle() he taapiri, he tango ranei i te karaehe hohe i runga i te pehi i te paatene, ka puta a maatau momo paparanga CSS. Hipanga 5: Whakahaerehia nga Takahanga Papapātuhi Ko enei kaiwhakarongo takahanga e mahi ana te papapātuhi takahuri: // ================================================== // NGA KAIMAKI KAUPAPA KAUPAPA // ==================================================
document.addEventListener("keydown", (e) => { ki te (keyMap[e.key]) { // Whakahaerehia nga huānga kotahi, maha ranei if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("active")); } atu { keyMap[e.key].classList.add("active"); } status.textContent = "Kua pehia te pihi: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { ki te (keyMap[e.key]) { // Tango i te ahua hohe ka tukuna te ki if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("active")); } atu { keyMap[e.key].classList.remove("active"); } status.textContent = "Kui tukuna: " + e.key.toUpperCase(); } });
Hipanga 6: Tāpiri Mana Tīmata/Kati Ka mutu, me whai huarahi ki te huri i te patuiro ki runga me te whakaweto: // ================================================== // KAUPAPA KAUPAPA KAUPAPA KAUPAPA // ==================================================
document.getElementById("takahuri").addEventListener("pāwhiri", () => { rere = !rere; // Hurihia te ahua rere
ki te (rere) { status.textContent = "E rere ana te patuiro..."; updateGamepad(); // Tīmatahia te whakahou whakahou } atu { status.textContent = "Kaore e hohe ana te patuiro"; cancelAnimationFrame(rafId); // Kati te kopikopiko } });
Ae, pehia te paatene ka whiti. Panahia te rakau ka neke. Koia tena. Ko tetahi atu mea: nga uara mata. I etahi wa ka hiahia koe ki te kite i nga nama, kaua nga rama.
I tenei wahanga, me kite koe:
He kaiwhakahaere mata-matawari, Ko nga paatene ka tauhohe i a koe e taunekeneke ana ki a raatau, a He panui patuiro e whakaatu ana i nga tohu paatene kua pehia.
Kia iti ake te ahua o tenei, koinei te whakaaturanga tere o te kaiwhakahaere o runga-mata e mahi ana i te waa tuuturu:
Inaianei, ko te pehi i te Timata Hopu ka tuhia nga mea katoa tae noa ki te pa ki a Kati te Hopu. 2. Kaweake Raraunga ki CSV/JSON Ina whiwhi matou i te pororakau, ka hiahia matou ki te penapena.
Hipanga 1: Waihangahia te Kaiawhina Tikiake Tuatahi, me hiahia he mahi kaiawhina e whakahaere ana i nga tango kōnae i roto i te tirotiro: // ================================================== // KĀNAE TAKE KAIAWHINA // ==================================================
taumahi downloadFile(ingoakōnae, ihirangi, momo = "kuputuhi/mania") { // Waihangahia he pupuhi mai i te ihirangi const blob = new Blob([ihirangi], { momo }); const url = URL.createObjectURL(blob);
// Waihangahia he hononga tango rangitahi ka paato const a = document.createElement("a"); a.href = url; a.download = ingoa kōnae; a.pāwhiri();
// Whakapaihia te URL ahanoa i muri i te tango setTimeout(() => URL.revokeObjectURL(url), 100); }
Ka mahi tenei mahi ma te hanga i tetahi Blob (ahanoa nui-rua) mai i to raraunga, te whakaputa URL rangitahi mo taua mea, me te paatoo i tetahi hononga tikiake. Ma te horoi ka kore e pakaru te mahara. Hipanga 2: Whakahaerehia te Kaweake JSON He tino pai a JSON mo te pupuri i te hanganga raraunga katoa:
// ================================================== // Kaweake AS JSON // ==================================================
document.getElementById("kaweake-json").addEventListener("pāwhiri", () => { // Tirohia mehemea he mea hei kaweake mehemea (!frames.length) { console.warn("Karekau he rekoata e waatea ana ki te kaweake."); hoki mai; }
// Waihangahia he utu me nga metadata me nga papa utu utunga = { i hangai: Ra hou().toISOString(), papa };
// Tikiake hei JSON kua whakahōputuhia tikiakeKōnae( "gamepad-log.json", JSON.stringify(utu utu, null, 2), "tono/json" ); });
Ko te whakatakotoranga JSON e pupuri ana i nga mea katoa kia hangai me te ngawari ki te panui, he pai mo te utaina ki nga taputapu dev, ki te tiritahi ranei ki nga hoa mahi. Hipanga 3: Whakahaerehia te Kaweake CSV Mo nga kaweake CSV, me whakaparaha nga raraunga arotau ki nga rarangi me nga pou:
//================================================== // KAWEHEA AS CSV // ==================================================
document.getElementById("kaweake-csv").addEventListener("pāwhiri", () => { // Tirohia mehemea he mea hei kaweake mehemea (!frames.length) { console.warn("Karekau he rekoata e waatea ana ki te kaweake."); hoki mai; }
// Hanga haupae pane CSV (tīwae mō te waitohuwā, ngā pātene katoa, ngā toki katoa) const headerButtons = papa[0].buttons.map((_, i) => btn${i}); const headerAxes = papa[0].axes.map((_, i) => tuaka${i}); const pane = ["t", ...headerButtons, ...headerAxes].hono (",") + "\n";
// Hangaia nga rarangi raraunga CSV rarangi const = frames.map(f => { const btnVals = f.buttons.map(b => b.uara); hoki mai [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");
// Tikiake hei CSV downloadFile("gamepad-log.csv", pane + rarangi, "kuputuhi/csv"); });
He maamaa te CSV mo te tātari raraunga na te mea ka tuwhera tika i roto i te Excel, i nga Rau Google ranei, ka taea e koe te hanga tūtohi, tātari raraunga, tohu tauira ranei. Inaianei kei roto nga paatene kaweake, ka kite koe i nga whiringa hou e rua i runga i te panui: Kaweake JSON me Kaweake CSV. He pai a JSON mena kei te pirangi koe ki te maka i te pororakau mata ki roto i o taputapu dev, ki te tarai ranei i te hanganga. Ko te CSV, ka tuwhera tika ki roto ki Excel, Google Sheets ranei kia taea ai e koe te tūtohi, te tātari, te whakatairite ranei i nga whakaurunga. Ko te ahua e whai ake nei e whakaatu ana i te ahua o te panui me era atu mana whakahaere.
3. Pūnaha Whakaahua I etahi wa kaore koe e hiahia ki te rekoata katoa, he tere "whakaahua" o nga ahuatanga whakauru. Ko te waahi ka awhina te paatene Tango Whakaahua.
Me te JavaScript:
// ================================================== // TAKE SAPSHOT // ==================================================
document.getElementById("snapshot").addEventListener("pāwhiri", () => { // Tikina nga papa takaro katoa e hono ana const pads = navigator.getGamepads(); const activePads = [];
// Porohurihia me te hopu i te ahua o ia gamepad hono mo (const gp of pads) { ki te haere tonu (!gp); // Hukahia nga mokowhiti kore
activePads.push({ id: gp.id, // Ingoa Kaiwhakahaere/tauira waitohuwā: performance.now(), pātene: gp.buttons.map(b => ({ pehia: b.pressed, uara: b.uara })), toki: [...gp.axes] }); }
// Tirohia mehemea i kitea etahi papa kemu mehemea (!activePads.length) { console.warn("Karekau he papa takaro e hono ana mo te whakaahua."); alert("Kaore he kaiwhakahaere i kitea!"); hoki mai; }
// Takiuru me te whakamohio i te kaiwhakamahi console.log("Snapshot:", activePads); matohi(Kua mau te whakaahua! I hopukina ${activePads.length} pūmana); });
Ka whakatio nga whakaahua i te ahua tika o to kaiwhakahaere i te wa kotahi. 4. Tukurua Wairua Tāuru Inaianei mo te mea ngahau: te purei ano te urunga wairua. Ka mau tenei i te pororakau ka purei whakamuri ano me te mea kei te whakamahi tetahi kaitoro phantom i te kaiwhakahaere.
JavaScript mo te purei ano: // ================================================== // KORERU REPLAY // ==================================================
document.getElementById("replay").addEventListener("pāwhiri", () => { // Me whakarite he rekoata hei purei ano mehemea (!frames.length) { alert("Karekau he rekoata hei purei ano!"); hoki mai; }
console.log("Ka timata te tukurua wairua...");
// Aroturuki te wa mo te purei tukutahi kia timataTime = performance.now(); kia frameIndex = 0;
// Whakahokihia te takahuri hākoritanga taahiraa mahi() { const inaianei = performance.now(); const elapsed = inaianei - startTime;
// Tukatukahia nga papa katoa kua puta inaianei while (frameIndex < frames.length && frames[frameIndex].t <= elapsed) { const frame = anga[frameIndex];
// Whakahouhia te UI me nga paatene kua tuhia btnA.classList.toggle("active", frame.buttons[0]. pehia); btnB.classList.toggle("kaha", frame.buttons[1]. pehia); btnX.classList.toggle("kaha", frame.buttons[2]. pehia);
// Whakahōu whakaatu tūnga kia pehia = []; frame.buttons.forEach((btn, i) => { if (btn.pressed) pressed.push("Pātene " + i); }); mehemea (penei.roa > 0) { status.textContent = "Te Wairua: " + pressed.join(", "); }
frameIndex++; }
// Haere tonu ki te kopikopiko mena he maha atu nga papa mehemea (frameIndex < frames.length) { tonoAnimationFrame(step); } atu { console.log("Replaymutu."); status.textContent = "Kua oti te purei ano"; } }
// Tīmatahia te tukurua taahiraa(); });
Kia pai ake ai te mahi patuiro, ka taapirihia e ahau he reanga wairua. Ina tuhia e koe he huihuinga, ka taea e koe te patu i te replay me te maataki i te UI e mahi ana, he rite tonu ki te kaitoro phantom e whakahaere ana i te papa. He patene Replay Ghost hou e whakaatu ana i roto i te panui mo tenei.
Patua Rekoata, kapohia me te kaiwhakahaere he iti, ka mutu, ka purei ano. Ko te UI noa e pa ana ki nga mea katoa i mahia e koe, penei i te wairua e whai ana i o whakaurunga. He aha te raruraru ki enei taapiri?
Ko te tuhi / kaweake he ngawari ki nga kaiwhakaatu te whakaatu i nga mea i tupu. Ka whakatio nga whakaahua mo te wa poto, he tino whai hua ina whai koe i nga pepeke. He pai te purei a Wairua mo nga akoranga, arowhai urunga, whakatairite noa ranei i nga tatūnga mana ki te taha.
I tenei wa, ehara i te mea he whakaaturanga tika, engari he mea ka taea e koe te mahi. Nga Take Whakamahi-Ao Tuturu Inaianei kei a maatau tenei patuiro ka taea te mahi nui. E whakaatu ana i te whakaurunga ora, te rekoata i nga raarangi, te kaweake i a raatau, me te whakahoki ano i nga mea. Engari ko te tino patai: ko wai te tino whakaaro? Ma wai tenei e whai hua? Kaihanga Kaihanga Ko nga kaiwhakahaere he waahanga o te mahi, engari kei te patuiro i a raatau? Ko te tikanga he mamae. Whakaarohia kei te whakamatautau koe i tetahi huinga keemu whawhai, penei i te ↓ → + punch. Engari i te inoi, ka pehia e koe kia rua nga wa, ka tuhi koe kotahi, ka purei ano. Kua oti. Ka huri ranei koe i nga raarangi JSON me tetahi hoa mahi ki te tirotiro mena he rite te mahi o to waehere maha ki runga i a raatau miihini. He nui tera. Nga Kaiwhakaako Whakaaetanga He tata tenei ki toku ngakau. Kaore nga tangata katoa e takaro ana me te kaiwhakahaere "paerewa". Ka tukuna e nga kaiwhakahaere urutau etahi tohu rereke i etahi wa. Ma tenei taputapu, ka taea e koe te kite i nga mea e tupu ana. Kaiako, kairangahau, ko wai. Ka taea e ratou te kapo rakau, te whakatairite, te whakahoki ano i nga whakaurunga taha-taha. Inamata, ka kitea nga mea e kore e kitea. Te Whakamatau Whakatau Kounga Ko te nuinga o nga wa ka tuhia e nga kaiwhakaatu penei "I penupenu ahau i nga paatene i konei ka pakaru." Kaore i tino awhina. Inaianei? Ka taea e ratou te hopu i nga perehi tika, te kaweake i te pororakau, ka tukuna atu. Karekau he matapae. Kaiako Mena kei te mahi koe i nga akoranga, i nga riipene YouTube ranei, he koura te purei wairua. Ka taea e koe te kii, "Koinei taku mahi me te kaiwhakahaere," i te wa e whakaatu ana te UI kei te tupu. Ka marama ake nga whakamaramatanga. I tua atu i nga keemu Ae, ehara tenei mo nga keemu anake. Kua whakamahia e te tangata nga kaiwhakahaere mo nga karetao, nga kaupapa toi, me nga atanga urunga. He rite tonu te take i nga wa katoa: he aha te kitenga o te kaitirotiro? Ma tenei, kaore koe e whakaaro. Whakamutunga Ko te patuiro i te whakaurunga kaiwhakahaere he rite tonu ki te rere matapo. Kaore i rite ki te DOM, ki te CSS ranei, kaore he kaitirotiro i hangaia mo nga gamepads; he tau mata noa kei roto i te papatohu, ka ngaro noa i te haruru. Me etahi rau rarangi o HTML, CSS, me JavaScript, i hangaia e matou tetahi mea rereke:
He patuiro ataata ka kitea nga whakaurunga kore e kitea. He punaha CSS paparanga e pupuri ana i te UI kia ma, kia taea te patuiro. He huinga whakarei (te tuhi, te kaweake, nga whakaahua, te purei wairua) ka hiki ake i te demo ki te taputapu kaiwhakawhanake.
Ko tenei kaupapa e whakaatu ana i te tawhiti ka taea e koe te haere ma te whakaranu i te mana o te Paetukutuku Tukutuku me te iti o te auahatanga i roto i nga Paparanga Cascade CSS. Ko te taputapu i whakamaramahia e au i tona katoa he puna tuwhera. Ka taea e koe te kati i te repo GitHub ka whakamatau maau ake. Engari ko te mea nui, ka taea e koe te hanga i a koe ake. Tāpirihia ō ake paparanga. Hangaia taau ake arorau tukurua. Whakauruhia ki to tauira tauira keemu. Ka whakamahi ranei i nga huarahi kaore au i whakaaro. Mo te whakaako, te uru, te tātari raraunga ranei. I te mutunga o te ra, ehara tenei i te mea mo te patuiro i nga gamepads. E pa ana ki te whiti marama ki nga whakaurunga huna, me te tuku i nga kaiwhakawhanake i te maia ki te mahi me nga taputapu kaore ano kia tino awhihia e te paetukutuku. Na, mono i to kaiwhakahaere, whakatuwhera i to kaiwhakatika, ka timata ki te whakamatautau. Ka miharo koe ki nga mea ka taea e to kaitirotiro me to CSS te whakatutuki pono.
