Kun liität ohjaimen, sekoitat painikkeita, liikutat tikkuja, vedät liipaimia… etkä kehittäjänä näe mitään. Selain havaitsee sen varmasti, mutta ellet kirjaa numeroita konsoliin, se on näkymätön. Se on Gamepad API:n päänsärky. Se on ollut olemassa vuosia, ja se on itse asiassa aika voimakas. Voit lukea painikkeita, tikkuja, liipaimia, teoksia. Mutta useimmat ihmiset eivät koske siihen. Miksi? Koska palautetta ei ole. Kehittäjätyökaluissa ei ole paneelia. Ei selvää tapaa tietää, tekeekö ohjain edes sitä, mitä ajattelet. Tuntuu kuin lentäisi sokeana. Se häiritsi minua tarpeeksi rakentaessani pienen työkalun: Gamepad Cascade Debuggerin. Sen sijaan, että tuijotat konsolin lähtöä, saat live-interaktiivisen näkymän ohjaimesta. Paina jotain ja se reagoi näytölle. Ja CSS Cascade Layersin avulla tyylit pysyvät järjestyksessä, joten virheenkorjaus on selkeämpää. Tässä viestissä näytän sinulle, miksi ohjaimien virheenkorjaus on niin tuskaa, kuinka CSS auttaa puhdistamaan sen ja kuinka voit rakentaa uudelleen käytettävän visuaalisen virheenkorjauksen omille projekteillesi.
Vaikka pystyt kirjaamaan ne kaikki, päädyt nopeasti lukemattomiin konsolin roskapostiin. Esimerkiksi: [0,0,1,0,0,0,5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Osaatko sanoa mitä nappia painettiin? Ehkä, mutta vasta kun olet rasittanut silmiäsi ja puuttunut muutamasta syötöstä. Joten ei, virheenkorjaus ei ole helppoa, kun on kyse syötteiden lukemisesta. Ongelma 3: Rakenteen puute Vaikka kokoaisitkin nopean visualisaattorin, tyylit voivat nopeasti sotkeutua. Oletus-, aktiivi- ja virheenkorjaustilat voivat mennä päällekkäin, ja ilman selkeää rakennetta CSS:stä tulee hauras ja vaikea laajentaa. CSS Cascade Layers voi auttaa. Ne ryhmittelevät tyylit tärkeysjärjestyksen mukaan järjestetyiksi "tasoksiksi", joten et enää taistele spesifisyyttä vastaan ja arvaile: "Miksi virheenkorjaustyylini ei näy?" Sen sijaan säilytät erilliset huolenaiheet:
Pohja: Ohjaimen vakio, alkuperäinen ulkonäkö. Aktiivinen: Painettujen painikkeiden ja siirrettyjen sauvojen kohokohdat. Viankorjaus: Peittokuvat kehittäjille (esim. numeeriset lukemat, oppaat ja niin edelleen).
Jos määrittelisimme tasot CSS:ssä tämän mukaisesti, meillä olisi: /* alimmasta korkeimpaan prioriteettiin */ @layer base, aktiivinen, debug;
@layer base { /* ... */ }
@kerros aktiivinen { /* ... */ }
@layer debug { /* ... */ }
Koska jokainen kerros pinoutuu ennustettavasti, tiedät aina, mitkä säännöt voittaa. Tämä ennustettavuus tekee virheenkorjauksesta paitsi helpomman, myös hallittavan. Olemme käsitelleet ongelman (näkymätön, sotkuinen syöttö) ja lähestymistapaa (visuaalinen virheenkorjaus, joka on rakennettu Cascade Layersilla). Nyt käymme läpi vaiheittaisen prosessin debuggerin rakentamiseksi. Debuggerin konsepti Helpoin tapa saada piilotettu syöttö näkyväksi on vain piirtää se näytölle. Sitä tämä debuggeri tekee. Painikkeet, liipaisimet ja ohjaussauvat saavat kaikki visuaalisen kuvan.
Paina A: Ympyrä syttyy. Työnnä sauvaa: Ympyrä liukuu ympäri. Vedä liipaisinta puoliväliin: Tanko täyttyy puoliväliin.
Nyt et tuijota nollia ja ykkösiä, vaan itse asiassa katsot ohjaimen reagoivan livenä. Tietenkin, kun alat kerätä tiloja, kuten oletus-, painettu-, virheenkorjaustiedot, ehkä jopa tallennustila, CSS alkaa muuttua suuremmaksi ja monimutkaisemmaksi. Siellä kaskadikerrokset ovat hyödyllisiä. Tässä irrotettu esimerkki: @layer base { .button { tausta: #222; raja-säde: 50 %; leveys: 40px; korkeus: 40px; } }
@kerros aktiivinen { .button.pressed { tausta: #0f0; /* kirkkaan vihreä */ } }
@layer debug { .button::after { sisältö: attr(data-arvo); fonttikoko: 12px; väri: #fff; } }
Tasojen järjestyksellä on väliä: perus → aktiivinen → virheenkorjaus.
pohja piirtää ohjaimen. aktiivinen käsittelee painettuja tiloja. debug-heitot peittokuviin.
Sen hajottaminen tällä tavalla tarkoittaa, että et taistele outoja erityissotia. Jokaisella kerroksella on paikkansa, ja tiedät aina, mikä voittaa. Sen rakentaminen Otetaan ensin jotain näytölle. Sen ei tarvitse näyttää hyvältä – sen on vain oltava olemassa, jotta meillä on jotain, jonka kanssa työskennellä.
Peliohjaimen Cascade Debugger
Se on kirjaimellisesti vain laatikoita. Ei vielä jännittävää, mutta se antaa meille kahvat, joita voimme tarttua myöhemmin CSS:n ja JavaScriptin avulla. Okei, käytän tässä kaskaditasoja, koska se pitää asiat järjestyksessä, kun lisäät tiloja. Tässä on karkea passi:
/* ==================================== CASCADE KERROKSIEN ASENNUS Järjestys on tärkeää: perus → aktiivinen → debug ==================================== */
/* Määritä tasojärjestys etukäteen */ @layer base, aktiivinen, debug;
/* Taso 1: Perustyylit - oletusulkonäkö */ @layer base { .button { tausta: #333; raja-säde: 50 %; leveys: 70px; korkeus: 70px; näyttö: flex; perustella-sisältö: keskus; kohdista kohteet: keskellä; }
.pause { leveys: 20px; korkeus: 70px; tausta: #333; näyttö: inline-block; } }
/* Taso 2: Aktiiviset tilat - käsittelee painettuja painikkeita */ @kerros aktiivinen { .button.active { tausta: #0f0; /* Kirkkaan vihreä painettuna */ muunnos: asteikko(1.1); /* Suurentaa hieman painiketta */ }
.pause.active { tausta: #0f0; muunnos: scaleY(1.1); /* Joustaa pystysuunnassa painettaessa */ } }
/* Taso 3: Virheenkorjauspeittokuvat - kehittäjätiedot */ @layer debug { .button::after { sisältö: attr(data-arvo); /* Näyttää numeerisen arvon */ fonttikoko: 12px; väri: #fff; } }
Tämän lähestymistavan kauneus on, että jokaisella kerroksella on selkeä tarkoitus. Peruskerros ei voi koskaan ohittaa aktiivista, eikä aktiivinen voi koskaan ohittaa virheenkorjausta erityisyydestä riippumatta. Tämä eliminoi CSS-spesifisyyssodat, jotka yleensä vaivaavat virheenkorjaustyökaluja. Nyt näyttää siltä, että jotkut klusterit istuvat tummalla taustalla. Rehellisesti, ei liian paha.
JavaScriptin lisääminen JavaScript aika. Tässä ohjain todella tekee jotain. Rakennamme tämän vaihe vaiheelta. Vaihe 1: Ota käyttöön valtionhallinta Ensinnäkin tarvitsemme muuttujia debuggerin tilan seuraamiseen: // ==================================== // VALTION HALLINTO // ====================================
anna juoksemisen = false; // Seuraa, onko debuggeri aktiivinen anna rafId; // Tallentaa requestAnimationFrame-tunnuksen peruutusta varten
Nämä muuttujat ohjaavat animaatiosilmukkaa, joka lukee jatkuvasti peliohjaimen syötettä. Vaihe 2: Tartu DOM-viittauksiin Seuraavaksi saamme viittauksia kaikkiin HTML-elementteihin, joita päivitämme: // ==================================== // KUOPUELEMENTTIEN VIITTEET // ====================================
const btnA = document.getElementById("btn-a"); const btnB = document.getElementById("btn-b"); const btnX = document.getElementById("btn-x"); const tauko1 = document.getElementById("tauko1"); const tauko2 = document.getElementById("tauko2"); const status = document.getElementById("status");
Näiden viitteiden tallentaminen etukäteen on tehokkaampaa kuin toistuva DOM-kysely. Vaihe 3: Lisää näppäimistön varavalinta Testaamista varten ilman fyysistä ohjainta yhdistämme näppäimistön näppäimet painikkeisiin: // ==================================== // KEYBOARD FALLBACK (testaukseen ilman ohjainta) // ====================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [tauko1, tauko2] // 'p'-näppäin ohjaa molempia taukopalkkeja };
Tämän avulla voimme testata käyttöliittymää painamalla näppäimistön näppäimiä. Vaihe 4: Luo pääpäivityssilmukka Tässä taika tapahtuu. Tämä toiminto toimii jatkuvasti ja lukee peliohjaimen tilan: // ==================================== // PÄÄPÄIVITYSILMA // ====================================
function updateGamepad() { // Hanki kaikki liitetyt peliohjaimet const gamepads = navigator.getGamepads(); if (!gamepads) return;
// Käytä ensimmäistä yhdistettyä peliohjainta const gp = peliohjaimet[0];
if (gp) { // Päivitä painikkeen tilat vaihtamalla "aktiivinen" luokka btnA.classList.toggle("aktiivinen", gp.buttons[0].pressed); btnB.classList.toggle("aktiivinen", gp.buttons[1].pressed); btnX.classList.toggle("aktiivinen", gp.buttons[2].pressed);
// Käsittele taukopainiketta (painikeindeksi 9 useimmissa ohjaimissa) const pausePressed = gp.buttons[9].pressed; pause1.classList.toggle("aktiivinen", pausePressed); pause2.classList.toggle("aktiivinen", pausePressed);
// Luo luettelo tällä hetkellä painetuista painikkeista tilan näyttöä varten anna painettu = []; gp.buttons.forEach((btn, i) => { jos (btn.pressed)pressed.push("Painike " + i); });
// Päivitä tilateksti, jos painikkeita painetaan if (pressed.length > 0) { status.textContent = "Painattu: " + pressed.join(", "); } }
// Jatka silmukkaa, jos debuggeri on käynnissä jos (juoksu) { rafId = requestAnimationFrame(päivityspeliohjain); } }
Metodi classList.toggle() lisää tai poistaa aktiivisen luokan sen mukaan, painetaanko painiketta, mikä käynnistää CSS-tasotyylimme. Vaihe 5: Käsittele näppäimistötapahtumia Nämä tapahtumakuuntelijat saavat näppäimistön varatoimimaan: // ==================================== // NÄPPÄIMISTÖTAPAHTUMAN HÄSITTÄJÄT // ====================================
document.addEventListener("keydown", (e) => { if (avainkartta[e.avain]) { // Käsittele yksittäisiä tai useita elementtejä if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("aktiivinen")); } muu { keyMap[e.key].classList.add("aktiivinen"); } status.textContent = "Näppäin painettuna: " + e.key.toUpperCase(); } });
document.addEventListener("avain", (e) => { if (avainkartta[e.avain]) { // Poista aktiivinen tila, kun avain vapautetaan if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("aktiivinen")); } muu { keyMap[e.key].classList.remove("aktiivinen"); } status.textContent = "Avain vapautettu: " + e.key.toUpperCase(); } });
Vaihe 6: Lisää käynnistys-/pysäytysohjain Lopuksi tarvitsemme tavan kytkeä debuggeri päälle ja pois: // ==================================== // KÄYTÄ DEBUGGER PÄÄLLE/POIS PÄÄLLE // ====================================
document.getElementById("toggle").addEventListener("click", () => { juoksu = !juoksu; // Käännä ajotila
jos (juoksu) { status.textContent = "Virheenkorjaus käynnissä..."; updateGamepad(); // Aloita päivityssilmukka } muu { status.textContent = "Virheenkorjaus ei ole aktiivinen"; cancelAnimationFrame(rafId); // Lopeta silmukka } });
Joten joo, paina nappia ja se hehkuu. Paina sauvaa ja se liikkuu. Siinä se. Vielä yksi asia: raaka-arvot. Joskus haluat vain nähdä numeroita, ei valoja.
Tässä vaiheessa sinun pitäisi nähdä:
Yksinkertainen näytönohjain, Painikkeet, jotka reagoivat, kun olet vuorovaikutuksessa niiden kanssa, ja Valinnainen virheenkorjaustulos, joka näyttää painettujen näppäinten indeksit.
Jotta tämä olisi vähemmän abstraktia, tässä on nopea esittely näytönohjaimesta, joka reagoi reaaliajassa:
Nyt Aloita tallennus -painikkeen painaminen kirjaa kaiken lokiin, kunnes painat Lopeta tallennus. 2. Tietojen vieminen CSV/JSON-muotoon Kun meillä on loki, haluamme tallentaa sen.
Vaihe 1: Luo latausapuohjelma Ensin tarvitsemme aputoiminnon, joka käsittelee tiedostojen lataukset selaimessa: // ==================================== // TIEDOSTOJEN LATAUSOHJE // ====================================
function downloadFile(tiedostonimi, sisältö, tyyppi = "teksti/plain") { // Luo blob sisällöstä const blob = new Blob([sisältö], { tyyppi }); const url = URL.createObjectURL(blob);
// Luo väliaikainen latauslinkki ja napsauta sitä const a = document.createElement("a"); a.href = url; a.download = tiedostonimi; a.click();
// Puhdista objektin URL-osoite latauksen jälkeen setTimeout(() => URL.revokeObjectURL(url), 100); }
Tämä toiminto toimii luomalla tiedoistasi Blobin (binaarisen suuren objektin), luomalla sille väliaikaisen URL-osoitteen ja napsauttamalla ohjelmallisesti latauslinkkiä. Puhdistus varmistaa, ettemme vuoda muistia. Vaihe 2: Käsittele JSON-vientiä JSON sopii täydellisesti koko tietorakenteen säilyttämiseen:
// ==================================== // VIE JSON // ====================================
document.getElementById("export-json").addEventListener("click", () => { // Tarkista, onko mitään vietävää if (!frames.length) { console.warn("Ei tallennetta vientiä varten."); paluu; }
// Luo hyötykuorma metatiedoilla ja kehyksillä const hyötykuorma = { CreatedAt: new Date().toISOString(), kehyksiä };
// Lataa muotoiltuna JSON downloadFile( "gamepad-log.json", JSON.stringify(hyötykuorma, null, 2), "sovellus/json" ); });
JSON-muoto pitää kaiken jäsenneltynä ja helposti jäsennettävänä, joten se on ihanteellinen lataamiseen takaisin kehittäjätyökaluihin tai jakamiseen joukkuetovereiden kanssa. Vaihe 3: Käsittele CSV-vienti CSV-vientiä varten meidän on tasoitettava hierarkkiset tiedot riveiksi ja sarakkeiksi:
//==================================== // VIE CSV-muodossa // ====================================
document.getElementById("export-csv").addEventListener("click", () => { // Tarkista, onko mitään vietävää if (!frames.length) { console.warn("Ei tallennetta vientiä varten."); paluu; }
// Luo CSV-otsikkorivi (aikaleiman sarakkeet, kaikki painikkeet, kaikki akselit) const headerButtons = frames[0].buttons.map((_, i) => btn${i}); const headerAxes = frames[0].axes.map((_, i) => akseli${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// Luo CSV-tietorivejä const rivit = frames.map(f => { const btnVals = f.buttons.map(b => b.value); return [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");
// Lataa CSV-muodossa downloadFile("gamepad-log.csv", otsikko + rivit, "text/csv"); });
CSV on loistava tietojen analysointiin, koska se avautuu suoraan Exceliin tai Google Sheetsiin, jolloin voit luoda kaavioita, suodattaa tietoja tai paikantaa kuvioita visuaalisesti. Nyt kun vientipainikkeet ovat käytössä, näet kaksi uutta vaihtoehtoa paneelissa: Vie JSON ja Vie CSV. JSON on mukavaa, jos haluat heittää raakalokin takaisin kehitystyökaluihisi tai kierrellä rakennetta. CSV puolestaan aukeutuu suoraan Exceliin tai Google Sheetsiin, jotta voit tehdä kaavioita, suodattaa tai vertailla syötteitä. Seuraava kuva näyttää, miltä paneeli näyttää ylimääräisillä säätimillä.
3. Snapshot System Joskus et tarvitse täyttä tallennusta, vain nopean "kuvakaappauksen" syöttötiloista. Siinä Ota tilannekuva -painike auttaa.
Ja JavaScript:
// ==================================== // OTA SNAPSSHOT // ====================================
document.getElementById("snapshot").addEventListener("click", () => { // Hanki kaikki liitetyt peliohjaimet const pads = navigator.getGamepads(); const activePads = [];
// Selaa läpi ja tallenna kunkin liitetyn peliohjaimen tila for (const gp of pads) { jos (!gp) jatka; // Ohita tyhjät paikat
activePads.push({ id: gp.id, // Ohjaimen nimi/malli aikaleima: performance.now(), painikkeet: gp.buttons.map(b => ({ painettu: b.puristettu, arvo: b.arvo })), akselit: [...gp.axes] }); }
// Tarkista, löytyikö peliohjaimia if (!activePads.length) { console.warn("Ei peliohjainta kytkettynä tilannekuvaa varten."); alert("Ohjainta ei havaittu!"); paluu; }
// Kirjaudu sisään ja ilmoita käyttäjälle console.log("Snapshot:", activePads); alert(Snapshot-kuva otettu! Kaapattu ${activePads.length} ohjain(t).); });
Tilannekuvat pysäyttävät ohjaimesi tarkan tilan kerralla. 4. Haamutulon toisto Nyt hauskuuteen: haamutulon toisto. Tämä ottaa lokin ja toistaa sen visuaalisesti ikään kuin haamusoitin käyttäisi ohjainta.
JavaScript toistoa varten: // ==================================== // GOST REPLAY // ====================================
document.getElementById("replay").addEventListener("click", () => { // Varmista, että meillä on tallenne toistettavaksi if (!frames.length) { alert("Ei tallennusta toistettavaksi!"); paluu; }
console.log("Aloitetaan haamutoistoa...");
// Kappaleen ajoitus synkronoitua toistoa varten anna startTime = suorituskyky.nyt(); anna frameIndex = 0;
// Toista animaatiosilmukka function step() { const now = suorituskyky.nyt(); const kulunut = nyt - aloitusaika;
// Käsittele kaikki kehykset, joiden olisi pitänyt tapahtua tähän mennessä while (frameIndex < frames.length && frames[frameIndex].t <= kulunut) { const frame = kehykset[frameIndex];
// Päivitä käyttöliittymä tallennetun painikkeen tiloilla btnA.classList.toggle("aktiivinen", frame.buttons[0].pressed); btnB.classList.toggle("aktiivinen", frame.buttons[1].pressed); btnX.classList.toggle("aktiivinen", frame.buttons[2].pressed);
// Päivitä tilan näyttö anna painettu = []; frame.buttons.forEach((btn, i) => { if (btn.pressed) pressed.push("Button " + i); }); if (pressed.length > 0) { status.textContent = "Haamu: " + pressed.join(", "); }
frameIndex++; }
// Jatka silmukkaa, jos kehyksiä on enemmän if (frameIndex < frames.length) { requestAnimationFrame(vaihe); } muu { console.log("Toistavalmis."); status.textContent = "Toisto valmis"; } }
// Aloita toisto step(); });
Lisäsin haamutoiston tehdäkseni virheenkorjauksesta hieman käytännönläheisempää. Kun olet tallentanut istunnon, voit napsauttaa uusintatoistoa ja katsella käyttöliittymän näyttelevän sen, melkein kuin fantomisoittaja pyörittää padia. Uusi Toista Ghost -painike näkyy paneelissa tätä varten.
Paina Record, sotke ohjaimen kanssa vähän, lopeta ja toista sitten. Käyttöliittymä vain toistaa kaiken tekemäsi, kuin aave, joka seuraa syötteitäsi. Miksi vaivautua näihin lisävarusteisiin?
Tallennuksen/viennin ansiosta testaajien on helppo näyttää, mitä tapahtui. Tilannekuvat jäätyvät hetkeksi, mikä on erittäin hyödyllistä, kun jahtaat outoja virheitä. Ghost-toisto sopii erinomaisesti opetusohjelmiin, esteettömyystarkistuksiin tai vain ohjausasetusten vertaamiseen vierekkäin.
Tässä vaiheessa se ei ole enää pelkkä siisti demo, vaan jotain, jonka voisit todella laittaa töihin. Tosimaailman käyttötapaukset Nyt meillä on tämä debuggeri, joka voi tehdä paljon. Se näyttää live-syötteen, tallentaa lokit, vie ne ja jopa toistaa tavaraa. Mutta todellinen kysymys on: ketä oikeastaan kiinnostaa? Kenelle tästä on hyötyä? Pelien kehittäjät Ohjaimet ovat osa työtä, mutta niiden vianetsintä? Yleensä kipua. Kuvittele, että testaat taistelupeliyhdistelmää, kuten ↓ → + lyönti. Rukoilemisen sijaan painat sitä samalla tavalla kahdesti, äänität sen kerran ja toistat sen uudelleen. Valmis. Tai vaihdat JSON-lokeja joukkuetoverisi kanssa tarkistaaksesi, reagoiko moninpelikoodisi samalla tavalla heidän koneessaan. Se on valtava. Esteettömyysharjoittajat Tämä on lähellä sydäntäni. Kaikki eivät pelaa "tavallisilla" ohjaimilla. Mukautuvat ohjaimet lähettävät joskus outoja signaaleja. Tämän työkalun avulla näet tarkalleen, mitä tapahtuu. Opettajat, tutkijat, kuka tahansa. He voivat tarttua lokeihin, vertailla niitä tai toistaa syötteitä vierekkäin. Yhtäkkiä näkymätön asia tulee ilmeiseksi. Laadunvarmistustestaus Testaajat kirjoittavat yleensä muistiinpanoja, kuten "Mussin painikkeita tänne ja se meni rikki." Ei kovin hyödyllinen. nyt? He voivat tallentaa tarkat puristimet, viedä lokin ja lähettää sen. Ei arvailua. Kouluttajat Jos teet opetusohjelmia tai YouTube-videoita, haamujen toisto on kultaa. Voit kirjaimellisesti sanoa: "Tässä on mitä tein ohjaimen kanssa", kun käyttöliittymä näyttää sen tapahtuvan. Selvittää selitykset huomattavasti. Pelien lisäksi Ja kyllä, tämä ei koske vain pelejä. Ihmiset ovat käyttäneet ohjaimia robotteihin, taideprojekteihin ja esteettömyysliitäntöihin. Sama ongelma joka kerta: mitä selain todella näkee? Tämän avulla sinun ei tarvitse arvailla. Johtopäätös Ohjaimen tulon virheenkorjaus on aina tuntunut sokealta lentävältä. Toisin kuin DOM tai CSS, peliohjaimille ei ole sisäänrakennettua tarkastajaa. se on vain raakoja numeroita konsolissa, helposti hukassa melussa. Muutaman sadan HTML-, CSS- ja JavaScriptrivin avulla rakensimme jotain erilaista:
Visuaalinen virheenkorjaus, joka tekee näkymättömät syötteet näkyväksi. Kerrostettu CSS-järjestelmä, joka pitää käyttöliittymän puhtaana ja virheenkorjattavissa. Joukko parannuksia (tallennus, vienti, tilannekuvat, haamujen toisto), jotka nostavat sen demosta kehittäjätyökaluksi.
Tämä projekti näyttää, kuinka pitkälle voit mennä yhdistämällä Web Platformin tehon pieneen luovuuteen CSS Cascade Layersissa. Työkalu, jonka juuri selitin kokonaisuudessaan, on avoimen lähdekoodin. Voit kloonata GitHub-repon ja kokeilla sitä itse. Mutta mikä tärkeintä, voit tehdä siitä omasi. Lisää omat kerroksesi. Rakenna oma toistologiikkasi. Integroi se pelisi prototyyppiin. Tai jopa käyttää sitä tavoilla, joita en ole kuvitellut. Opetukseen, saavutettavuuteen tai tietojen analysointiin. Loppujen lopuksi tämä ei ole vain peliohjainten virheenkorjausta. Tarkoituksena on valaista piilotettuja syötteitä ja antaa kehittäjille luottamusta työskennellä laitteiston kanssa, jota verkko ei vieläkään täysin omaksu. Liitä siis ohjain, avaa editori ja aloita kokeilu. Saatat yllättyä siitä, mitä selaimesi ja CSS-palvelusi todella voivat saavuttaa.
