Pan fyddwch chi'n plygio rheolydd i mewn, rydych chi'n stwnsio botymau, yn symud y ffyn, yn tynnu'r sbardunau ... ac fel datblygwr, dydych chi'n gweld dim ohono. Mae'r porwr yn ei godi, yn sicr, ond oni bai eich bod chi'n mewngofnodi rhifau yn y consol, mae'n anweledig. Dyna'r cur pen gyda'r API Gamepad. Mae wedi bod o gwmpas ers blynyddoedd, ac mewn gwirionedd mae'n eithaf pwerus. Gallwch ddarllen botymau, ffyn, sbardunau, y gweithiau. Ond nid yw'r rhan fwyaf o bobl yn ei gyffwrdd. Pam? Gan nad oes adborth. Dim panel mewn offer datblygwr. Dim ffordd glir o wybod a yw'r rheolwr hyd yn oed yn gwneud yr hyn rydych chi'n ei feddwl. Mae'n teimlo fel hedfan ddall. Fe wnaeth hynny fygio digon i adeiladu teclyn bach: Gamepad Cascade Debugger. Yn lle syllu ar allbwn consol, cewch olwg fyw, ryngweithiol o'r rheolydd. Pwyswch rywbeth ac mae'n ymateb ar y sgrin. A chyda CSS Cascade Layers, mae'r arddulliau'n aros yn drefnus, felly mae'n lanach i ddadfygio. Yn y swydd hon, byddaf yn dangos i chi pam mae dadfygio rheolwyr yn gymaint o boen, sut mae CSS yn helpu i'w lanhau, a sut y gallwch chi adeiladu dadfygiwr gweledol y gellir ei ailddefnyddio ar gyfer eich prosiectau eich hun.
Hyd yn oed os gallwch chi eu logio i gyd, yn gyflym byddwch chi'n cael sbam consol annarllenadwy. Er enghraifft: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Allwch chi ddweud pa fotwm gafodd ei wasgu? Efallai, ond dim ond ar ôl straenio'ch llygaid a cholli ychydig o fewnbynnau. Felly, na, nid yw dadfygio yn dod yn hawdd o ran darllen mewnbynnau. Problem 3: Diffyg Strwythur Hyd yn oed os ydych chi'n taflu delweddwr cyflym at ei gilydd, gall arddulliau fynd yn anniben yn gyflym. Gall cyflyrau diofyn, gweithredol a dadfygio orgyffwrdd, a heb strwythur clir, bydd eich CSS yn mynd yn frau ac yn anodd ei ymestyn. Gall Haenau Cascade CSS helpu. Maent yn grwpio arddulliau yn “haenau” sy'n cael eu harchebu yn ôl blaenoriaeth, felly rydych chi'n rhoi'r gorau i frwydro yn erbyn penodoldeb a dyfalu, “Pam nad yw fy arddull dadfygio yn dangos?” Yn lle hynny, rydych yn cynnal pryderon ar wahân:
Sylfaen: ymddangosiad safonol, cychwynnol y rheolwr. Actif: Uchafbwyntiau ar gyfer botymau wedi'u gwasgu a ffyn wedi'u symud. Dadfygio: Troshaenau i ddatblygwyr (e.e., darlleniadau rhifol, canllawiau, ac ati).
Pe baem yn diffinio haenau yn CSS yn unol â hyn, byddai gennym: /* blaenoriaeth isaf i uchaf */ sylfaen @layer, gweithredol, dadfygio;
@haen sylfaen { /* ... */ }
@layer gweithredol { /* ... */ }
@layer debug { /* ... */ }
Oherwydd bod pob haen yn pentyrru yn rhagweladwy, rydych chi bob amser yn gwybod pa reolau sy'n ennill. Mae'r rhagweladwyedd hwnnw'n gwneud dadfygio nid yn unig yn haws, ond mewn gwirionedd yn hylaw. Rydym wedi ymdrin â’r broblem (mewnbwn anweledig, anniben) a’r ymagwedd (dadfygiwr gweledol a adeiladwyd gyda Haenau Cascade). Nawr byddwn yn cerdded trwy'r broses gam wrth gam i adeiladu'r dadfygiwr. Y Cysyniad Dadfygiwr Y ffordd hawsaf o wneud mewnbwn cudd yn weladwy yw ei dynnu ar y sgrin. Dyna beth mae'r dadfygiwr hwn yn ei wneud. Mae botymau, sbardunau a ffyn rheoli i gyd yn cael delwedd weledol.
Pwyswch A: Mae cylch yn goleuo. Gwthiwch y ffon: Mae'r cylch yn llithro o gwmpas. Tynnwch sbardun hanner ffordd: Mae bar yn llenwi hanner ffordd.
Nawr nid ydych chi'n syllu ar 0s ac 1s, ond mewn gwirionedd yn gwylio'r rheolydd yn ymateb yn fyw. Wrth gwrs, ar ôl i chi ddechrau pentyrru ar daleithiau fel gwybodaeth ddiofyn, gwasgu, dadfygio, efallai hyd yn oed modd recordio, mae'r CSS yn dechrau mynd yn fwy ac yn fwy cymhleth. Dyna lle mae haenau rhaeadru yn dod yn ddefnyddiol. Dyma enghraifft wedi'i thynnu i lawr: @haen sylfaen { .botwm { cefndir: #222; radiws ffin: 50%; lled: 40px; uchder: 40px; } }
@layer gweithredol { .button.wasgu { cefndir: #0f0; /* gwyrdd llachar */ } }
@layer debug { .botwm::ar ôl { cynnwys: attr (gwerth data); maint y ffont: 12px; lliw: #fff; } }
Mae trefn yr haen yn bwysig: sylfaen → gweithredol → dadfygio.
sylfaen yn tynnu y rheolydd. dolenni gweithredol cyflyrau gwasgu. taflu dadfygio ar droshaenau.
Mae ei dorri i fyny fel hyn yn golygu nad ydych chi'n ymladd rhyfeloedd penodolrwydd rhyfedd. Mae gan bob haen ei lle, ac rydych chi bob amser yn gwybod beth sy'n ennill. Ei Adeiladu Allan Gadewch i ni gael rhywbeth ar y sgrin yn gyntaf. Nid oes angen iddo edrych yn dda - dim ond angen iddo fodoli fel bod gennym rywbeth i weithio gydag ef.
Dadfygiwr Rhaeadr Gamepad
Dim ond blychau yw hynny'n llythrennol. Nid yw'n gyffrous eto, ond mae'n rhoi dolenni inni eu cydio yn ddiweddarach gyda CSS a JavaScript. Iawn, rwy'n defnyddio haenau rhaeadru yma oherwydd ei fod yn cadw pethau'n drefnus ar ôl i chi ychwanegu mwy o daleithiau. Dyma bas bras:
/* ============================= SEFYDLIAD HAENAU CASCAD Materion trefn: sylfaen → gweithredol → dadfygio =============================
/* Diffiniwch drefn haen ymlaen llaw */ sylfaen @layer, gweithredol, dadfygio;
/* Haen 1: Arddulliau sylfaenol - ymddangosiad diofyn */ @haen sylfaen { .botwm { cefndir: #333; radiws ffin: 50%; lled: 70px; uchder: 70px; arddangos: fflecs; cyfiawnhau-cynnwys: center; alinio-eitemau: canol; }
.saib { lled: 20px; uchder: 70px; cefndir: #333; arddangos: inline-bloc; } }
/* Haen 2: Cyflyrau gweithredol - dolenni botymau wedi'u pwyso */ @layer gweithredol { .botwm.active { cefndir: #0f0; /* Gwyrdd llachar wrth ei wasgu */ trawsnewid: graddfa(1.1); /* Yn chwyddo'r botwm ychydig */ }
.saib.active { cefndir: #0f0; trawsnewid: scaleY(1.1); /* Yn ymestyn yn fertigol wrth ei wasgu */ } }
/* Haen 3: Troshaenau dadfygio - gwybodaeth datblygwr */ @layer debug { .botwm::ar ôl { cynnwys: attr (gwerth data); /* Yn dangos y gwerth rhifol */ maint y ffont: 12px; lliw: #fff; } }
Harddwch y dull hwn yw bod gan bob haen bwrpas clir. Ni all yr haen sylfaen fyth ddiystyru gweithredol, ac ni all gweithredol fyth ddiystyru dadfygio, waeth beth fo'i benodolrwydd. Mae hyn yn dileu'r rhyfeloedd penodolrwydd CSS sydd fel arfer yn pla offer debugging. Nawr mae'n edrych fel bod rhai clystyrau yn eistedd ar gefndir tywyll. Yn onest, ddim yn rhy ddrwg.
Ychwanegu'r JavaScript Amser JavaScript. Dyma lle mae'r rheolydd yn gwneud rhywbeth mewn gwirionedd. Byddwn yn adeiladu hyn gam wrth gam. Cam 1: Sefydlu Rheolaeth y Wladwriaeth Yn gyntaf, mae angen newidynnau arnom i olrhain cyflwr y dadfygiwr: // ============================= // RHEOLAETH WLADWRAETH // =============================
gadael rhedeg = ffug; // Tracio a yw'r dadfygiwr yn weithredol gadewch raffId; // Yn storio'r IDAnimationFrame request i'w ganslo
Mae'r newidynnau hyn yn rheoli'r ddolen animeiddio sy'n darllen mewnbwn gamepad yn barhaus. Cam 2: Bachu Cyfeiriadau DOM Nesaf, rydym yn cael cyfeiriadau at yr holl elfennau HTML y byddwn yn eu diweddaru: // ============================= // CYFEIRIADAU ELFEN DOM // =============================
const btnA = document.getElementById("btn-a"); const btnB = document.getElementById("btn-b"); const btnX = document.getElementById("btn-x"); const pause1 = document.getElementById("saib1"); const pause2 = document.getElementById("saib2"); const status = document.getElementById("statws");
Mae storio'r cyfeiriadau hyn ymlaen llaw yn fwy effeithlon na chwestiynu'r DOM dro ar ôl tro. Cam 3: Ychwanegu Allweddell Wrth Gefn Ar gyfer profi heb reolwr corfforol, byddwn yn mapio allweddi bysellfwrdd i fotymau: // ============================= // CANLYNIAD ALLWEDDOL (i'w brofi heb reolwr) // =============================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [saib1, saib2] // Mae bysell 'p' yn rheoli'r ddau far saib };
Mae hyn yn ein galluogi i brofi'r UI trwy wasgu bysellau ar fysellfwrdd. Cam 4: Creu'r Prif Dolen Diweddaru Dyma lle mae'r hud yn digwydd. Mae'r swyddogaeth hon yn rhedeg yn barhaus ac yn darllen cyflwr gamepad: // ============================= // PRIF DOLEN DIWEDDARIAD GAMEPAD // =============================
diweddaru ffwythiantGamepad() { // Cael yr holl gamepads cysylltiedig const gamepads = navigator.getGamepads(); os (!padiau) yn dychwelyd;
// Defnyddiwch y gamepad cysylltiedig cyntaf const gp = padiau gêm[0];
os (gp) { // Update button states by toggling the "active" dosbarth btnA.classList.toggle("active", gp.buttons[0].pressed); btnB.classList.toggle("active", gp.buttons[1].pressed); btnX.classList.toggle("active", gp.buttons[2].pressed);
// Trin botwm saib (mynegai botwm 9 ar y rhan fwyaf o reolwyr) const pausePressed = gp.buttons[9].pressed; pause1.classList.toggle("active", pausePressed); pause2.classList.toggle("active", pausePressed);
// Adeiladu rhestr o fotymau sydd wedi'u pwyso ar hyn o bryd i'w harddangos statws gadewch pwyso = []; gp.buttons.forEach((btn, i) => { os (btn. gwasgu)gwasgu.push("Botwm" + i); });
// Diweddaru testun statws os bydd unrhyw fotymau yn cael eu pwyso os (wedi'i wasgu.length> 0) { status.textContent = "Wedi'i wasgu:" +press.join(", "); } }
// Parhewch â'r ddolen os yw dadfygiwr yn rhedeg os (yn rhedeg) { rafId = requestAnimationFrame(updateGamepad); } }
Mae'r dull classList.toggle() yn ychwanegu neu'n dileu'r dosbarth gweithredol yn seiliedig ar a yw'r botwm wedi'i wasgu, sy'n sbarduno ein steiliau haenau CSS. Cam 5: Trin Digwyddiadau Bysellfwrdd Mae'r gwrandawyr digwyddiadau hyn yn gwneud i'r bysellfwrdd wrth gefn weithio: // ============================= // TRIN DIGWYDDIADAU ALLWEDDOL // =============================
document.addEventListener("keydown", (e) => { os (keyMap[e.key]) { // Trin elfennau sengl neu luosog os (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("gweithredol")); } arall { keyMap[e.key].classList.add("gweithredol"); } status.textContent = "Allwedd wedi'i wasgu:" +e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { os (keyMap[e.key]) { // Dileu cyflwr gweithredol pan ryddheir allwedd os (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("gweithredol")); } arall { keyMap[e.key].classList.remove("gweithredol"); } status.textContent = "Allwedd wedi'i ryddhau: " +e.key.toUpperCase(); } });
Cam 6: Ychwanegu Rheolaeth Cychwyn / Stop Yn olaf, mae angen ffordd i newid y dadfygiwr ymlaen ac i ffwrdd: // ============================= // TOGLWCH DEBYGGER YMLAEN/DIFFODD // =============================
document.getElementById("toglo").addEventListener("clic", () => { rhedeg = !running; // Trowch y cyflwr rhedeg
os (yn rhedeg) { status.textContent = "Dadfygiwr yn rhedeg..."; diweddaruGamepad(); // Dechreuwch y ddolen diweddaru } arall { status.textContent = "Dadfygiwr anweithredol"; cansloAnimationFrame(rafId); // Stopiwch y ddolen } });
Felly ie, pwyswch botwm ac mae'n tywynnu. Gwthiwch y ffon ac mae'n symud. Dyna fe. Un peth arall: gwerthoedd amrwd. Weithiau rydych chi eisiau gweld rhifau, nid goleuadau.
Ar y cam hwn, dylech weld:
Rheolydd syml ar y sgrin, Botymau sy'n ymateb wrth i chi ryngweithio â nhw, a Darlleniad dadfygio dewisol yn dangos mynegeion botymau wedi'u pwyso.
I wneud hyn yn llai haniaethol, dyma ddangosiad cyflym o'r rheolydd ar y sgrin yn ymateb mewn amser real:
Nawr, mae pwyso Start Recording yn cofnodi popeth nes i chi daro Stop Recording. 2. Allforio Data i CSV/JSON Unwaith y bydd gennym log, byddwn am ei arbed.
Cam 1: Creu'r Cynorthwyydd Lawrlwytho Yn gyntaf, mae angen swyddogaeth cynorthwyydd arnom sy'n trin lawrlwythiadau ffeiliau yn y porwr: // ============================= // FFEIL CYMORTH I LAWRLWYTHO // =============================
swyddogaeth downloadFile (enw ffeil, cynnwys, math = "testun/plaen") { // Creu blob o'r cynnwys const blob = Blob newydd([cynnwys], { math }); const url = URL.createObjectURL(blob);
// Creu dolen llwytho i lawr dros dro a chlicio arno const a = document.createElement("a"); a.href = url; a.download = enw ffeil; a.cliciwch();
// Glanhewch URL y gwrthrych ar ôl ei lawrlwytho setTimeout(() => URL.revokeObjectURL(url), 100); }
Mae'r swyddogaeth hon yn gweithio trwy greu Blob (gwrthrych mawr deuaidd) o'ch data, gan gynhyrchu URL dros dro ar ei gyfer, a chlicio ar ddolen lawrlwytho yn rhaglennol. Mae'r glanhau yn sicrhau nad ydym yn gollwng cof. Cam 2: Trin Allforio JSON Mae JSON yn berffaith ar gyfer cadw'r strwythur data cyflawn:
// ============================= // ALLFORIO FEL JSON // =============================
document.getElementById("export-json").addEventListener("clic", () => { // Gwiriwch a oes unrhyw beth i'w allforio os (!frames.length) { console.warn("Dim recordiad ar gael i'w allforio."); dychwelyd; }
// Creu llwyth tâl gyda metadata a fframiau llwyth tâl const = { wedi'i greu ar: Dyddiad newydd().toISOSstring(), fframiau };
// Lawrlwythwch fel JSON wedi'i fformatio lawrlwythoFile( "gamepad-log.json", JSON.stringify(llwyth tâl, null, 2), "cais/json" ); });
Mae fformat JSON yn cadw popeth wedi'i strwythuro ac yn hawdd ei ddarllen, gan ei wneud yn ddelfrydol ar gyfer ei lwytho'n ôl i offer datblygu neu rannu gyda chyd-chwaraewyr. Cam 3: Trin Allforio CSV Ar gyfer allforion CSV, mae angen i ni fflatio’r data hierarchaidd yn rhesi a cholofnau:
//============================= // ALLFORIO FEL CSV // =============================
document.getElementById("export-csv").addEventListener("clic", () => { // Gwiriwch a oes unrhyw beth i'w allforio os (!frames.length) { console.warn("Dim recordiad ar gael i'w allforio."); dychwelyd; }
// Adeiladu rhes pennyn CSV (colofnau ar gyfer stamp amser, pob botwm, pob echelin) const headerButtons = fframiau[0].buttons.map((_, i) => btn${i}); const headerAxes = fframiau[0].axes.map((_, i) => echel ${i}); const header = [ "t", ...headerButtons, ...headerAxes].join(",") + "\n";
// Adeiladu rhesi data CSV rhesi const = fframiau.map(f => { const btnVals = f.buttons.map(b => b.value); dychwelyd [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");
// Lawrlwythwch fel CSV downloadFile ("gamepad-log.csv", pennawd + rhesi, "testun/csv"); });
Mae CSV yn wych ar gyfer dadansoddi data oherwydd ei fod yn agor yn uniongyrchol yn Excel neu Google Sheets, gan adael i chi greu siartiau, hidlo data, neu adnabod patrymau yn weledol. Nawr bod y botymau allforio i mewn, fe welwch ddau opsiwn newydd ar y panel: Allforio JSON ac Allforio CSV. Mae JSON yn braf os ydych chi am daflu'r log amrwd yn ôl i'ch offer dev neu brocio o amgylch y strwythur. Ar y llaw arall, mae CSV yn agor yn syth i Excel neu Google Sheets fel y gallwch chi siartio, hidlo neu gymharu mewnbynnau. Mae'r ffigur canlynol yn dangos sut olwg sydd ar y panel gyda'r rheolyddion ychwanegol hynny.
3. System Ciplun Weithiau nid oes angen recordiad llawn arnoch chi, dim ond “ciplun” cyflym o gyflyrau mewnbwn. Dyna lle mae botwm Take Snapshot yn helpu.
A'r JavaScript:
// ============================= // CYMRYD ciplun // =============================
document.getElementById("ciplun").addEventListener("clic", () => { // Cael yr holl gamepads cysylltiedig padiau const = navigator.getGamepads(); const activePads = [] ;
// Dolen drwodd a dal cyflwr pob gamepad cysylltiedig ar gyfer (const gp o padiau) { os (!gp) parhau; // Hepgor slotiau gwag
activePads.push({ id: gp.id, // Enw rheolwr/model stamp amser: perfformiad.now(), botymau: gp.buttons.map(b => ({ gwasgaf: gwasgu b.pressed, gwerth: b.value })), echelinau: [...gp.axes] }); }
// Gwiriwch a ddarganfuwyd unrhyw gamepads os (!activePads.length) { console.warn("Dim gamepads wedi'u cysylltu ar gyfer ciplun."); rhybudd ("Dim rheolydd wedi'i ganfod!"); dychwelyd; }
// Logio a hysbysu'r defnyddiwr console.log("Ciplun:"", activePads); rhybudd(Cymerwyd ciplun! Wedi dal ${activePads.length} rheolydd(ion).); });
Mae cipluniau yn rhewi union gyflwr eich rheolydd ar un eiliad mewn amser. 4. Ailchwarae Mewnbwn Ysbrydion Nawr am yr un hwyliog: ailchwarae mewnbwn ysbryd. Mae hyn yn cymryd log ac yn ei chwarae yn ôl yn weledol fel pe bai chwaraewr rhith yn defnyddio'r rheolydd.
JavaScript ar gyfer ailchwarae: // ============================= // AILCHWARAE GHOST // =============================
document.getElementById("ailchwarae").addEventListener("clic", () => { // Sicrhewch fod gennym recordiad i'w ailchwarae os (!frames.length) { rhybudd ("Dim recordiad i'w ailchwarae!"); dychwelyd; }
console.log("Dechrau ailchwarae ysbrydion...");
// Trac amseru ar gyfer chwarae synced gadewch startTime = performance.now(); gadewch frameIndex = 0;
// Ailchwarae dolen animeiddio cam swyddogaeth () { const now = perfformiad.now(); const elapsed = now - startTime;
// Prosesu pob ffrâm a ddylai fod wedi digwydd erbyn hyn tra (frameIndex < frames.length && frames[frameIndex].t <= aeth heibio) { ffrâm const = fframiau[frameIndex];
// Diweddaru UI gyda'r cyflwr botwm wedi'i recordio btnA.classList.toggle("active", frame.buttons[0].pressed); btnB.classList.toggle("active", frame.buttons[1].pressed); btnX.classList.toggle("active", frame.buttons[2].pressed);
// Arddangos statws diweddaru gadewch pwyso = []; ffrâm.buttons.forEach((btn, i) => { os (btn.pressed) gwasgu.push ("Button" + i); }); os (wedi'i wasgu.length> 0) { status.textContent = "Ysbryd:" + gwasgu.join(", "); }
ffrâmIndex++; }
// Parhewch â'r ddolen os oes mwy o fframiau os (frameIndex < fframiau.length) { caisAnimationFrame(cam); } arall { consol.log("Ailchwaraewedi gorffen."); status.textContent = "Ailchwarae wedi'i gwblhau"; } }
// Dechreuwch yr ailchwarae cam(); });
I wneud dadfygio ychydig yn fwy ymarferol, ychwanegais replay ysbrydion. Ar ôl i chi recordio sesiwn, gallwch chi daro ailchwarae a gwylio'r UI yn ei actio, bron fel bod chwaraewr rhith yn rhedeg y pad. Mae botwm Replay Ghost newydd yn ymddangos yn y panel ar gyfer hyn.
Tarwch Record, llanast o gwmpas gyda'r rheolydd ychydig, stopiwch, yna ailchwarae. Mae'r UI yn adleisio popeth a wnaethoch, fel ysbryd yn dilyn eich mewnbynnau. Pam trafferthu gyda'r pethau ychwanegol hyn?
Mae recordio/allforio yn ei gwneud hi'n hawdd i brofwyr ddangos yn union beth ddigwyddodd. Mae cipluniau yn rhewi eiliad mewn amser, yn hynod ddefnyddiol pan fyddwch chi'n mynd ar drywydd bygiau rhyfedd. Mae ailchwarae ysbrydion yn wych ar gyfer tiwtorialau, gwiriadau hygyrchedd, neu ddim ond yn cymharu gosodiadau rheoli ochr yn ochr.
Ar y pwynt hwn, nid demo taclus yn unig mohono bellach, ond rhywbeth y gallech chi ei roi ar waith. Achosion Defnydd Byd Go Iawn Nawr mae gennym ni'r dadfygiwr hwn a all wneud llawer. Mae'n dangos mewnbwn byw, yn cofnodi logiau, yn eu hallforio, a hyd yn oed yn ailchwarae pethau. Ond y cwestiwn go iawn yw: pwy sy'n poeni mewn gwirionedd? Ar gyfer pwy mae hyn yn ddefnyddiol? Datblygwyr Gêm Mae rheolwyr yn rhan o'r swydd, ond yn eu dadfygio? Fel arfer poen. Dychmygwch eich bod chi'n profi combo gêm ymladd, fel ↓ → + punch. Yn lle gweddïo, fe wnaethoch chi ei wasgu yr un ffordd ddwywaith, rydych chi'n ei recordio unwaith, ac yn ei ailchwarae. Wedi'i wneud. Neu rydych chi'n cyfnewid logiau JSON â chyd-chwaraewr i wirio a yw'ch cod aml-chwaraewr yn ymateb yr un peth ar eu peiriant. Mae hynny'n enfawr. Ymarferwyr Hygyrchedd Mae hwn yn agos at fy nghalon. Nid yw pawb yn chwarae gyda rheolydd “safonol”. Mae rheolwyr addasol yn taflu signalau rhyfedd weithiau. Gyda'r offeryn hwn, gallwch weld yn union beth sy'n digwydd. Athrawon, ymchwilwyr, pwy bynnag. Gallant fachu boncyffion, eu cymharu, neu ailchwarae mewnbynnau ochr yn ochr. Yn sydyn, daw pethau anweledig yn amlwg. Profi Sicrwydd Ansawdd Mae profwyr fel arfer yn ysgrifennu nodiadau fel “Fe wnes i stwnsio botymau yma ac fe dorrodd.” Ddim yn ddefnyddiol iawn. Nawr? Gallant ddal yr union weisg, allforio'r log, a'i anfon i ffwrdd. Dim dyfalu. Addysgwyr Os ydych chi'n gwneud sesiynau tiwtorial neu fideos YouTube, mae ailchwarae ysbrydion yn aur. Gallwch chi ddweud yn llythrennol, “Dyma beth wnes i gyda'r rheolydd,” tra bod yr UI yn dangos ei fod yn digwydd. Yn gwneud esboniadau yn llawer cliriach. Y Tu Hwnt i Gemau Ac ie, nid yw hyn yn ymwneud â gemau yn unig. Mae pobl wedi defnyddio rheolyddion ar gyfer robotiaid, prosiectau celf, a rhyngwynebau hygyrchedd. Yr un mater bob tro: beth mae'r porwr yn ei weld mewn gwirionedd? Gyda hyn, nid oes rhaid i chi ddyfalu. Casgliad Mae dadfygio mewnbwn rheolydd bob amser wedi teimlo fel hedfan yn ddall. Yn wahanol i'r DOM neu CSS, nid oes arolygydd adeiledig ar gyfer padiau gêm; niferoedd amrwd yn unig ydyw yn y consol, yn hawdd eu colli yn y sŵn. Gydag ychydig gannoedd o linellau o HTML, CSS, a JavaScript, fe wnaethom adeiladu rhywbeth gwahanol:
Dadfygiwr gweledol sy'n gwneud mewnbynnau anweledig yn weladwy. System CSS haenog sy'n cadw'r UI yn lân ac yn ddadfygio. Set o welliannau (cofnodi, allforio, cipluniau, ailchwarae ysbrydion) sy'n ei godi o'r demo i'r offeryn datblygwr.
Mae'r prosiect hwn yn dangos pa mor bell y gallwch chi fynd trwy gymysgu pŵer y Platfform Gwe ag ychydig o greadigrwydd yn Haenau Cascade CSS. Mae'r offeryn yr wyf newydd ei egluro yn ei gyfanrwydd yn ffynhonnell agored. Gallwch glonio'r repo GitHub a rhoi cynnig arni drosoch eich hun. Ond yn bwysicach fyth, gallwch chi ei wneud yn un eich hun. Ychwanegwch eich haenau eich hun. Adeiladwch eich rhesymeg ailchwarae eich hun. Integreiddiwch ef â'ch prototeip gêm. Neu hyd yn oed ei ddefnyddio mewn ffyrdd nad wyf wedi'u dychmygu. Ar gyfer addysgu, hygyrchedd, neu ddadansoddi data. Ar ddiwedd y dydd, nid mater o ddadfygio padiau gêm yn unig yw hyn. Mae'n ymwneud â thaflu goleuni ar fewnbynnau cudd, a rhoi'r hyder i ddatblygwyr weithio gyda chaledwedd nad yw'r we yn ei gofleidio'n llawn o hyd. Felly, plygiwch eich rheolydd i mewn, agorwch eich golygydd, a dechreuwch arbrofi. Efallai y byddwch chi'n synnu at yr hyn y gall eich porwr a'ch CSS ei gyflawni mewn gwirionedd.
