Nigbati o ba pulọọgi sinu oludari kan, o mash awọn bọtini, gbe awọn igi, fa awọn okunfa… ati bi olupilẹṣẹ, iwọ ko rii ọkan ninu rẹ. Ẹrọ aṣawakiri naa n gbe soke, daju, ṣugbọn ayafi ti o ba n wọle awọn nọmba ninu console, o jẹ alaihan. Iyẹn ni orififo pẹlu Gamepad API. O ti wa ni ayika fun awọn ọdun, ati pe o lagbara pupọ. O le ka awọn bọtini, awọn ọpá, awọn okunfa, awọn iṣẹ. Ṣugbọn ọpọlọpọ eniyan ko fi ọwọ kan. Kí nìdí? Nitoripe ko si esi. Ko si nronu ninu awọn irinṣẹ idagbasoke. Ko si ọna ti o han gbangba lati mọ boya oludari paapaa n ṣe ohun ti o ro. O kan lara bi afọju ti n fo. Iyẹn bukun mi to lati kọ irinṣẹ kekere kan: Gamepad Cascade Debugger. Dipo kikoju si iṣelọpọ console, o gba laaye, wiwo ibaraenisepo ti oludari. Tẹ nkan kan ati pe o dahun loju iboju. Ati pẹlu CSS Cascade Layers, awọn aza duro ṣeto, nitorina o jẹ mimọ lati ṣatunṣe. Ninu ifiweranṣẹ yii, Emi yoo fihan ọ idi ti awọn olutona n ṣatunṣe aṣiṣe jẹ iru irora, bawo ni CSS ṣe n ṣe iranlọwọ lati sọ di mimọ, ati bii o ṣe le kọ atunṣe wiwo wiwo fun awọn iṣẹ akanṣe tirẹ.
Paapa ti o ba ni anfani lati wọle gbogbo wọn, iwọ yoo yara pari pẹlu àwúrúju console ti a ko le ka. Fun apẹẹrẹ: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Ṣe o le sọ kini bọtini ti a tẹ? Boya, ṣugbọn lẹhin titẹ oju rẹ nikan ati sonu awọn igbewọle diẹ. Nitorinaa, rara, n ṣatunṣe aṣiṣe ko wa ni irọrun nigbati o ba de awọn igbewọle kika. Isoro 3: Aini Eto Paapa ti o ba jabọ papọ wiwo wiwo iyara, awọn aza le yara ni idoti. Aiyipada, nṣiṣe lọwọ, ati awọn ipinlẹ yokokoro le ni lqkan, ati laisi eto ti o mọ, CSS rẹ di brittle ati lile lati faagun. CSS kasikedi Layer le ran. Wọn ṣe akojọpọ awọn ara sinu “awọn fẹlẹfẹlẹ” ti o paṣẹ nipasẹ pataki, nitorinaa o da ija ni pato ati lafaimo, “Kini idi ti ara yokokoro mi ko han?” Dipo, o ṣetọju awọn ifiyesi lọtọ:
Ipilẹ: Boṣewa ti oludari, irisi akọkọ. Nṣiṣẹ: Awọn afihan fun awọn bọtini titẹ ati awọn ọpá gbigbe. Ṣatunkọ: Awọn agbekọja fun awọn olupilẹṣẹ (fun apẹẹrẹ, awọn kika nọmba, awọn itọsọna, ati bẹbẹ lọ).
Ti a ba ni asọye awọn ipele ni CSS ni ibamu si eyi, a yoo ni: /* ni asuwon ti to ga ni ayo */ @Layer base, lọwọ, yokokoro;
@base Layer { /*...*/ }
@Layer lọwọ { /*...*/ }
@Layer yokokoro { /*...*/ }
Nitori kọọkan Layer akopọ predictably, o nigbagbogbo mọ eyi ti ofin win. Isọtẹlẹ yẹn jẹ ki n ṣatunṣe aṣiṣe kii ṣe rọrun nikan, ṣugbọn ni iṣakoso gangan. A ti bo iṣoro naa (airi, titẹ sii idoti) ati ọna (aṣatunṣe wiwo ti a ṣe pẹlu Awọn Layer Cascade). Bayi a yoo rin nipasẹ igbese-nipasẹ-Igbese ilana lati kọ aṣiṣe. Agbekale Atunṣe Ọna to rọọrun lati jẹ ki titẹ sii ti o farapamọ han ni lati kan fa si oju iboju. Iyẹn ni ohun ti n ṣatunṣe aṣiṣe yii ṣe. Awọn bọtini, awọn okunfa, ati joysticks gbogbo gba wiwo.
Tẹ A: Circle kan tan imọlẹ. Nudge ọpá: Circle kikọja ni ayika. Fa okunfa kan ni agbedemeji: Ọpa kan kun ni agbedemeji.
Bayi o ko wo awọn 0s ati 1s, ṣugbọn nitootọ wiwo oluṣakoso fesi ifiwe. Nitoribẹẹ, ni kete ti o ba bẹrẹ piling lori awọn ipinlẹ bii aiyipada, ti tẹ, alaye yokokoro, boya paapaa ipo gbigbasilẹ, CSS naa bẹrẹ sii tobi ati eka sii. Iyẹn ni awọn ipele kasikedi wa ni ọwọ. Eyi ni apẹẹrẹ yiyọ kuro: @base Layer { .bọtini { lẹhin: # 222; rediosi aala: 50%; ìbú: 40px; iga: 40px; } }
@Layer lọwọ { .bọtini.ti a tẹ { abẹlẹ: # 0f0; /* alawọ ewe didan */ } }
@Layer yokokoro { .bọtini :: lẹhin { akoonu: attr (data-iye); iwọn font: 12px; awọ: #ff; } }
Ilana aṣẹ Layer ṣe pataki: ipilẹ → lọwọ → yokokoro.
mimọ fa oludari. ti nṣiṣe lọwọ kapa te ipinle. yokokoro ju lori overlays.
Bibu rẹ bii eyi tumọ si pe iwọ ko ja awọn ogun pataki ti o yatọ. Kọọkan Layer ni o ni awọn oniwe-ibi, ati awọn ti o nigbagbogbo mọ ohun ti AamiEye . Ilé O Jade Jẹ ki a gba ohunkan loju iboju akọkọ. Ko nilo lati dara dara - o kan nilo lati wa tẹlẹ ki a ni nkan lati ṣiṣẹ pẹlu.
Mepad Cascade Debugger
Iyẹn gangan awọn apoti nikan. Kii ṣe igbadun sibẹsibẹ, ṣugbọn o fun wa ni awọn ọwọ lati mu nigbamii pẹlu CSS ati JavaScript. O dara, Mo nlo awọn ipele kasikedi nibi nitori pe o tọju nkan ti o ṣeto ni kete ti o ba ṣafikun awọn ipinlẹ diẹ sii. Eyi ni iwe-iwọle ti o ni inira kan:
/* ======================================= KASCADE LAYER OTO Awọn ọrọ aṣẹ: ipilẹ → lọwọ → yokokoro ===================================
/* Ṣetumo aṣẹ Layer ni iwaju */ @Layer base, lọwọ, yokokoro;
/* Layer 1: Awọn aza ipilẹ - irisi aiyipada */ @base Layer { .bọtini { lẹhin: # 333; rediosi aala: 50%; igboro: 70px; iga: 70px; ifihan: rọ; justify-content: center; mö-ohun: aarin; }
.daduro { ìbú: 20px; iga: 70px; lẹhin: # 333; àpapọ: opopo-Àkọsílẹ; } }
/* Layer 2: Awọn ipinlẹ ti nṣiṣe lọwọ - mu awọn bọtini ti a tẹ */ @Layer lọwọ { .bọtini.lọwọ { abẹlẹ: # 0f0; /* Imọlẹ alawọ ewe nigba titẹ */ iyipada: asekale (1.1); /* Die-die mu bọtini naa pọ si */ }
.daduro.lọwọ { abẹlẹ: # 0f0; yipada: scaleY (1.1); /* Na ni inaro nigba titẹ */ } }
/* Layer 3: atunkọ awọn agbekọja - alaye olupilẹṣẹ */ @Layer yokokoro { .bọtini :: lẹhin { akoonu: attr (data-iye); /* Ṣe afihan iye nomba */ iwọn font: 12px; awọ: #ff; } }
Awọn ẹwa ti yi ona ni wipe kọọkan Layer ni o ni kan ko o idi. Layer mimọ ko le ṣe agbekọja lọwọ laelae, ati lọwọ ko le ṣe agbero yokokoro, laibikita pato. Eyi yọkuro awọn ogun pato CSS ti o maa n yọ awọn irinṣẹ yoku kuro. Bayi o dabi pe diẹ ninu awọn iṣupọ joko lori abẹlẹ dudu. Nitootọ, kii ṣe buburu pupọ.
Fifi JavaScript kun JavaScript akoko. Eyi ni ibi ti oludari n ṣe nkan gangan. A yoo kọ ipele yii nipasẹ igbese. Igbesẹ 1: Ṣeto Isakoso Ipinle Ni akọkọ, a nilo awọn oniyipada lati tọpinpin ipo atunkọ: // ==================================== // IPINLE isakoso // ====================================
jẹ ki nṣiṣẹ = eke; // Awọn orin boya awọn yokokoro ti nṣiṣe lọwọ jẹ ki rafId; // Tọju ìbéèrèAnimationFrame ID fun ifagile
Awọn oniyipada wọnyi ṣakoso lupu ere idaraya ti o ka titẹ sii paadi gamepad nigbagbogbo. Igbesẹ 2: Gba Awọn itọkasi DOM Nigbamii, a gba awọn itọkasi si gbogbo awọn eroja HTML ti a yoo ṣe imudojuiwọn: // ==================================== // DOM eroja itọkasi // ====================================
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 ipo = document.getElementById ("ipo");
Titọju awọn itọkasi wọnyi ni iwaju jẹ daradara diẹ sii ju ibeere DOM leralera. Igbesẹ 3: Ṣafikun Fallback Keyboard Fun idanwo laisi oludari ti ara, a yoo ya awọn bọtini itẹwe si awọn bọtini: // ==================================== // FALLBACK KEYBOARD (fun idanwo laisi oludari) // ====================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [daduro1, pause2] // 'p' bọtini idari mejeeji ifi idaduro };
Eyi jẹ ki a ṣe idanwo UI nipa titẹ awọn bọtini lori bọtini itẹwe kan. Igbesẹ 4: Ṣẹda Loop Imudojuiwọn akọkọ Eyi ni ibi ti idan ti ṣẹlẹ. Iṣẹ yii nṣiṣẹ nigbagbogbo ati ka ipo gamepad: // ==================================== // GAMEPAD imudojuiwọn lupu // ====================================
imudojuiwọn iṣẹ Gamepad() { // Gba gbogbo ti sopọ gamepads const gamepads = navigator.getGamepads (); ti o ba ti (! gamepads) pada;
// Lo akọkọ ti sopọ gamepad const gp = gamepaadi[0];
ti (gp) { // Awọn ipinlẹ bọtini imudojuiwọn nipa yiyi kilasi “lọwọ” ṣiṣẹ btnA.classList.toggle ("lọwọ", gp.buttons[0].tẹ); btnB.classList.toggle ("lọwọ", gp.buttons[1].tẹ); btnX.classList.toggle ("lọwọ", gp.buttons [2].titẹ);
// Mu bọtini idaduro duro (bọtini atọka 9 lori ọpọlọpọ awọn oludari) const pausePressed = gp.bọtini[9].tẹ; pause1.classList.toggle ("lọwọ", pausePressed); pause2.classList.toggle ("lọwọ", daduroTẹ);
// Kọ akojọ kan ti awọn bọtini titẹ lọwọlọwọ fun ifihan ipo jẹ ki a tẹ = []; gp.buttons.for Each((btn, i) => { ti o ba jẹ (btn.tẹ)pressed.push ("Bọtini" + i); });
// Ṣe imudojuiwọn ọrọ ipo ti awọn bọtini eyikeyi ba tẹ ti o ba jẹ (titẹ.length> 0) { status.textContent = "Tẹ:" + pressed.join (", "); } }
// Tẹsiwaju lupu ti o ba ti n ṣatunṣe aṣiṣe nṣiṣẹ ti o ba (nṣiṣẹ) { rafId = ìbéèrèAnimationFrame(imudojuiwọnGamepad); } }
Ọna classList.toggle() ṣe afikun tabi yọkuro kilasi ti nṣiṣe lọwọ da lori boya a tẹ bọtini naa, eyiti o fa awọn aza Layer CSS wa. Igbesẹ 5: Mu Awọn iṣẹlẹ Keyboard Mu Awọn olutẹtisi iṣẹlẹ wọnyi jẹ ki ipadabọ keyboard ṣiṣẹ: // ==================================== // KEYBOARD Ìṣẹlẹ Handler // ====================================
document.addEventListener("keydown", (e) => { ti o ba jẹ (bọtiniMap[e.bọtini]) { // Mu nikan tabi ọpọ eroja ti o ba jẹ (Array.isArray (bọtiniMap[e.key])) { keyMap[e.key].funEach (el => el.classList.add ("lọwọ")); } miran { keyMap[e.key].classList.add ("lọwọ"); } status.textContent = "Ti a tẹ bọtini:" + e.key.toUpperCase (); } });
document.addEventListener("bọtini", (e) => { ti o ba jẹ (bọtiniMap[e.bọtini]) { // Yọ lọwọ ipinle nigbati bọtini ti wa ni tu ti o ba jẹ (Array.isArray (bọtiniMap[e.key])) { keyMap[e.key].funEach(el => el.classList.remove("lọwọ")); } miran { keyMap[e.key].classList.remove ("lọwọ"); } status.textContent = "Kọtini tu silẹ:" + e.key.toUpperCase (); } });
Igbesẹ 6: Ṣafikun Iṣakoso Ibẹrẹ/Duro Nikẹhin, a nilo ọna kan lati yi oluṣewadii tan ati pa: // ==================================== // TOGGLE EDIBUGGER TAN/PA // ====================================
document.getElementById("toggle").addEventListener("tẹ", () => { nṣiṣẹ = !ṣiṣẹ; // Yipada ipo ti nṣiṣẹ
ti o ba (nṣiṣẹ) { status.textContent = "Oluwadi nṣiṣẹ..."; imudojuiwọnGamepad (); // Bẹrẹ imudojuiwọn imudojuiwọn } miran { status.textContent = "Aláìṣiṣẹ́ olupilẹṣẹ"; fagileeAnimationFrame (rafId); // Duro lupu naa } });
Nitorinaa bẹẹni, tẹ bọtini kan ati pe o tan. Titari ọpá ati ki o gbe. O n niyen. Ohun kan diẹ sii: awọn iye aise. Nigba miran o kan fẹ lati ri awọn nọmba, kii ṣe awọn imọlẹ.
Ni ipele yii, o yẹ ki o wo:
Oluṣakoso iboju ti o rọrun, Awọn bọtini ti o fesi bi o ti nlo pẹlu wọn, ati Ikawe yokokoro iyan ti nfihan awọn atọka bọtini ti a tẹ.
Lati jẹ ki o kere si áljẹbrà, eyi ni demo iyara ti oludari iboju ti n fesi ni akoko gidi:
Bayi, titẹ Bẹrẹ Gbigbasilẹ ṣe igbasilẹ ohun gbogbo titi ti o fi lu Duro Gbigbasilẹ. 2. Gbigbe Data si CSV/JSON Ni kete ti a ba ni akọọlẹ kan, a yoo fẹ lati fipamọ.
Igbesẹ 1: Ṣẹda Oluranlọwọ Gbigba lati ayelujara Ni akọkọ, a nilo iṣẹ oluranlọwọ ti o mu awọn igbasilẹ faili ni ẹrọ aṣawakiri: // ==================================== // FILE IRANLOWO gbaa lati ayelujara // ====================================
iṣẹ igbasilẹFile (orukọ faili, akoonu, iru = "ọrọ/ pẹtẹlẹ") { // Ṣẹda a blob lati awọn akoonu const blob = Blob tuntun ([akoonu], {iru}); const url = URL.createObjectURL (blob);
// Ṣẹda ọna asopọ igbasilẹ igba diẹ ki o tẹ sii const a = document.createElement ("a"); a.href = url; a.download = filename; a.tẹ ();
// Nu URL ohun naa di lẹhin igbasilẹ setTimeout (() => URL.revokeObjectURL (url), 100); }
Iṣẹ yii n ṣiṣẹ nipa ṣiṣẹda Blob (ohun nla alakomeji) lati inu data rẹ, ṣiṣẹda URL igba diẹ fun rẹ, ati titẹ ọna asopọ igbasilẹ kan ni eto eto. Isọdọmọ naa ni idaniloju pe a ko jo iranti. Igbesẹ 2: Mu JSON Export JSON jẹ pipe fun titọju eto data pipe:
// ==================================== // SIWAJU BI JSON // ====================================
document.getElementById("export-json").addEventListener("tẹ", () => { // Ṣayẹwo ti o ba ti wa nibẹ ni ohunkohun lati okeere ti (!frames.length) { console.warn ("Ko si gbigbasilẹ wa lati okeere."); pada; }
// Ṣẹda fifuye isanwo pẹlu metadata ati awọn fireemu isanwo const = { ṣẹdaAt: Ọjọ tuntun () .toISOString (), awọn fireemu };
// Ṣe igbasilẹ bi a ṣe pa akoonu JSON gbaa faili( "gamepad-log.json", JSON.stringify(ẹrù isanwo, asan, 2), "ohun elo/json" ); });
Ọna kika JSON n tọju ohun gbogbo ti iṣeto ati irọrun atupalẹ, ṣiṣe ni apẹrẹ fun ikojọpọ pada sinu awọn irinṣẹ dev tabi pinpin pẹlu awọn ẹlẹgbẹ ẹgbẹ. Igbesẹ 3: Mu CSV okeere Fun awọn okeere CSV, a nilo lati tan awọn data akosoagbasomode sinu awọn ori ila ati awọn ọwọn:
//===================================== // SIWAJU AS CSV // ====================================
document.getElementById("export-csv").addEventListener("tẹ", () => { // Ṣayẹwo ti o ba ti wa nibẹ ni ohunkohun lati okeere ti (!frames.length) { console.warn ("Ko si gbigbasilẹ wa lati okeere."); pada; }
// Kọ ori ila akọsori CSV (awọn ọwọn fun aami akoko, gbogbo awọn bọtini, gbogbo awọn aake) const headerButtons = awọn fireemu[0].buttons.map ((_, i) => btn${i}); const headerAxes = awọn fireemu[0].axes.map ((_, i) => axis${i}); const akọsori = ["t", ...headerButtons, ...headerAxes].darapọ (",") + "\n";
// Kọ CSV data kana const rows = frames.map(f => { const btnVals = f.buttons.map (b => b.iye); ipadabọ [f.t, ...btnVals, ...f.axes].dapọ (","); }) darapọ mọ ("\n");
// Ṣe igbasilẹ bi CSV downloadFile ("gamepad-log.csv", akọsori + awọn ori ila, "ọrọ/csv"); });
CSV jẹ didan fun itupalẹ data nitori pe o ṣii taara ni Tayo tabi Google Sheets, jẹ ki o ṣẹda awọn shatti, data àlẹmọ, tabi awọn ilana iranran ni wiwo. Ni bayi pe awọn bọtini okeere wa ninu, iwọ yoo rii awọn aṣayan tuntun meji lori nronu: Jade JSON ati okeere CSV. JSON dara ti o ba fẹ lati jabọ iwe aise pada sinu awọn irinṣẹ dev rẹ tabi gbe ni ayika eto naa. CSV, ni ida keji, ṣii taara sinu Tayo tabi Google Sheets ki o le ṣe apẹrẹ, ṣe àlẹmọ, tabi ṣe afiwe awọn igbewọle. Nọmba ti o tẹle n fihan kini nronu naa dabi pẹlu awọn iṣakoso afikun yẹn.
3. Aworan System Nigba miiran o ko nilo gbigbasilẹ ni kikun, o kan “sikirinifoto” iyara ti awọn ipinlẹ titẹ sii. Iyẹn ni ibi ti bọtini Ya aworan ṣe iranlọwọ.
Ati JavaScript:
// ==================================== // YA aworan // ====================================
document.getElementById("snapshot").addEventListener("tẹ", () => { // Gba gbogbo ti sopọ gamepads const paadi = navigator.getGamepads (); const activePads = [];
// Yipo nipasẹ ki o si Yaworan awọn ipinle ti kọọkan ti sopọ gamepad fun (const gp ti paadi) { ti (!gp) ba tesiwaju; // Foo sofo Iho
activePads.push({ id: gp.id, // Orukọ oludari / awoṣe timestamp: išẹ.now(), awọn bọtini: gp.buttons.map(b => ({ tẹ: b.ti tẹ, iye: b.iye })), àáké: [...gp.axes] }); }
// Ṣayẹwo ti o ba ti eyikeyi gamepads won ri ti (!activePads.length) { console.warn ("Ko si gamepads ti a ti sopọ fun foto."); gbigbọn ("Ko si oludari ti a rii!"); pada; }
// Wọle ati leti olumulo console.log ("Snapshot:", activePads); Itaniji (aworan aworan! Ti mu ${activePads.length} olutona (awọn) mu); });
Snapshots di ipo gangan ti oludari rẹ ni akoko kan ni akoko. 4. Iwin Input Sisisẹsẹhin Bayi fun ọkan igbadun: atunwi igbewọle iwin. Eyi gba log kan ati ki o mu ṣiṣẹ pada ni oju bi ẹnipe ẹrọ orin Phantom kan nlo oludari.
JavaScript fun atunṣe: // ==================================== // Iwin Atunse // ====================================
document.getElementById("tun ṣe").addEventListener("tẹ", () => { // Rii daju pe a ni gbigbasilẹ lati tun ṣe ti (!frames.length) { gbigbọn ("Ko si gbigbasilẹ lati tun ṣe!"); pada; }
console.log ("Ibẹrẹ iwin tun ṣe...");
// Orin aago fun šišẹsẹhin imuṣiṣẹpọ jẹ ki startTime = išẹ.now (); jẹ ki frameIndex = 0;
// Tun ere idaraya lupu igbese iṣẹ () { const bayi = išẹ.bayi (); const ti kọja = bayi - startTime;
// Ṣiṣe gbogbo awọn fireemu ti o yẹ ki o ti waye nipasẹ bayi
nigba (fireemuIndex // Ṣe imudojuiwọn UI pẹlu awọn ipinlẹ bọtini ti o gbasilẹ
btnA.classList.toggle ("lọwọ", frame.buttons[0].titẹ);
btnB.classList.toggle ("lọwọ", frame.bọtini [1].titẹ);
btnX.classList.toggle ("lọwọ", frame.bọtini [2].titẹ); // Ifihan ipo imudojuiwọn
jẹ ki a tẹ = [];
frame.buttons.forEach((btn, i) => {
ti o ba ti (btn.pressed) pressed.push ("Bọtini" + i);
});
ti o ba jẹ (titẹ.length> 0) {
status.textContent = "Ẹmi:" + pressed.join (", ");
} fireemu Atọka ++;
} // Tẹsiwaju lupu ti awọn fireemu ba wa
ti o ba jẹ (fireemuIndex // Bẹrẹ atunṣe
igbese ();
}); Lati jẹ ki n ṣatunṣe aṣiṣe diẹ sii ni ọwọ-lori, Mo ṣafikun atunwi iwin kan. Ni kete ti o ba ti gbasilẹ igba kan, o le lu tun ṣe ki o wo UI ti o ṣiṣẹ, o fẹrẹ dabi pe ẹrọ orin Phantom kan nṣiṣẹ paadi naa. Bọtini Ẹmi Tunṣe tuntun fihan soke ninu nronu fun eyi. Lu Igbasilẹ, idotin ni ayika pẹlu oludari diẹ, da duro, lẹhinna tun ṣe. UI kan n sọ ohun gbogbo ti o ṣe, bii iwin ti o tẹle awọn igbewọle rẹ.
Kí nìdí ribee pẹlu awọn wọnyi esitira? Gbigbasilẹ/si ilẹ okeere jẹ ki o rọrun fun awọn oludanwo lati ṣafihan gangan ohun ti o ṣẹlẹ.
Snapshots di iṣẹju kan ni akoko, wulo pupọ julọ nigbati o ba lepa awọn idun aiṣedeede.
Atunṣe iwin jẹ nla fun awọn ikẹkọ, awọn sọwedowo iraye si, tabi o kan afiwe awọn iṣeto iṣakoso ni ẹgbẹ ni ẹgbẹ. Ni aaye yii, kii ṣe demo afinju kan mọ, ṣugbọn nkan ti o le fi si iṣẹ gangan.
Real-World Lo igba
Bayi a ti ni yokokoro yii ti o le ṣe pupọ. O ṣe afihan igbewọle laaye, awọn igbasilẹ igbasilẹ, gbejade wọn jade, ati paapaa awọn nkan tun ṣe. Ṣugbọn awọn ti gidi ibeere ni: ti o kosi bikita? Tani eyi wulo fun?
Awọn Difelopa ere
Awọn oludari jẹ apakan ti iṣẹ naa, ṣugbọn n ṣatunṣe aṣiṣe wọn? Nigbagbogbo irora kan. Fojuinu pe o n ṣe idanwo konbo ere ija kan, bii ↓ → + punch. Dípò gbígbàdúrà, o tẹ̀ ẹ́ lọ́nà kan náà lẹ́ẹ̀mejì, o ṣàkọsílẹ̀ rẹ̀ lẹ́ẹ̀kan, kí o sì tún un ṣe. Ti ṣe. Tabi o paarọ awọn akọọlẹ JSON pẹlu ẹlẹgbẹ ẹlẹgbẹ kan lati ṣayẹwo boya koodu elere pupọ rẹ ba dahun kanna lori ẹrọ wọn. Iyẹn tobi.
Wiwọle Awọn oṣiṣẹ
Eyi wa nitosi ọkan mi. Kii ṣe gbogbo eniyan n ṣiṣẹ pẹlu oludari “boṣewa”. Adaptive olutona jabọ jade isokuso awọn ifihan agbara ma. Pẹlu ọpa yii, o le rii gangan ohun ti n ṣẹlẹ. Awọn olukọ, awọn oniwadi, ẹnikẹni. Wọn le gba awọn akọọlẹ, ṣe afiwe wọn, tabi tun ṣe awọn igbewọle ni ẹgbẹ-ẹgbẹ. Lojiji, awọn nkan ti a ko rii di kedere.
Idanwo idaniloju Didara
Awọn oludanwo nigbagbogbo kọ awọn akọsilẹ bii “Mo ti fọ awọn bọtini nibi ati pe o fọ.” Ko ṣe iranlọwọ pupọ. Bayi? Wọn le gba awọn titẹ gangan, gbe wọle si okeere, ki o si fi ranṣẹ. Ko si lafaimo.
Awọn olukọni
Ti o ba n ṣe awọn ikẹkọ tabi awọn fidio YouTube, atunwi iwin jẹ goolu. O le sọ ọrọ gangan, “Eyi ni ohun ti Mo ṣe pẹlu oludari,” lakoko ti UI fihan pe o n ṣẹlẹ. Ṣe awọn alaye ni ọna kedere.
Ni ikọja Awọn ere Awọn
Ati bẹẹni, eyi kii ṣe nipa awọn ere nikan. Awọn eniyan ti lo awọn oludari fun awọn roboti, awọn iṣẹ akanṣe, ati awọn atọkun iraye si. Ọrọ kanna ni gbogbo igba: kini ẹrọ aṣawakiri n rii gangan? Pẹlu eyi, o ko ni lati gboju.
Ipari
N ṣatunṣe aṣiṣe igbewọle oludari ti nigbagbogbo rilara bi afọju ti n fo. Ko dabi DOM tabi CSS, ko si oluyẹwo ti a ṣe sinu fun awọn paadi ere; o kan aise awọn nọmba ninu awọn console, awọn iṣọrọ sọnu ni ariwo.
Pẹlu awọn laini ọgọrun diẹ ti HTML, CSS, ati JavaScript, a kọ nkan ti o yatọ: Atunṣe wiwo ti o jẹ ki awọn igbewọle alaihan han.
Eto CSS ti o fẹlẹfẹlẹ ti o jẹ ki UI di mimọ ati ṣiṣatunṣe.
Eto ti awọn imudara (gbigbasilẹ, tajasita, awọn aworan aworan, atunwi iwin) ti o gbe e ga lati demo si irinṣẹ idagbasoke. Ise agbese yii fihan bi o ṣe le lọ nipa didapọ agbara Platform Wẹẹbu pẹlu iṣẹda kekere kan ni Awọn Layer Cascade CSS.
Ọpa ti Mo ṣẹṣẹ ṣalaye ni gbogbo rẹ jẹ orisun-ìmọ. O le ṣe ẹda GitHub repo ki o gbiyanju fun ara rẹ.
Ṣugbọn diẹ ṣe pataki, o le ṣe ti ara rẹ. Fi awọn ipele ti ara rẹ kun. Kọ ara rẹ tun kannaa. Ṣepọ rẹ pẹlu apẹrẹ ere rẹ. Tabi paapaa lo ni awọn ọna ti Emi ko ro. Fun ikọni, iraye si, tabi itupalẹ data.
Ni ipari ọjọ, eyi kii ṣe nipa ṣiṣatunṣe awọn paadi ere nikan. O jẹ nipa didan imọlẹ lori awọn igbewọle ti o farapamọ, ati fifun awọn olupilẹṣẹ ni igboya lati ṣiṣẹ pẹlu ohun elo ti oju opo wẹẹbu ko tun gba ni kikun.
Nitorinaa, pulọọgi sinu oludari rẹ, ṣii olootu rẹ, ki o bẹrẹ idanwo. O le jẹ ohun iyanu ni ohun ti aṣawakiri rẹ ati CSS le ṣe nitootọ.