Контроллерді қосқан кезде сіз түймелерді басып, таяқтарды жылжытасыз, триггерлерді тартасыз ... және әзірлеуші ретінде сіз оның ешқайсысын көрмейсіз. Браузер оны таңдайды, әрине, бірақ консольде сандарды тіркемесеңіз, ол көрінбейді. Бұл Gamepad API-нің бас ауруы. Бұл көптеген жылдар бойы болды және ол өте күшті. Сіз түймелерді, таяқтарды, триггерлерді, жұмыстарды оқи аласыз. Бірақ көпшілік оған қол тигізбейді. Неліктен? Өйткені кері байланыс жоқ. Әзірлеуші құралдарда панель жоқ. Контроллер тіпті сіз ойлаған нәрсені істеп жатқанын білудің нақты жолы жоқ. Соқыр ұшатын сияқты. Бұл маған кішкене құрал жасау үшін жеткілікті түрде қателесті: Gamepad Cascade Debugger. Консоль шығысына қараудың орнына сіз контроллердің тікелей, интерактивті көрінісін аласыз. Бір нәрсені басыңыз, ол экранда әрекет етеді. CSS Cascade Layers көмегімен стильдер реттелген болып қалады, сондықтан оны жөндеу таза болады. Бұл постта мен сізге контроллерлерді жөндеу неге қиын екенін, CSS оны тазалауға қалай көмектесетінін және жеке жобаларыңыз үшін қайта пайдалануға болатын көрнекі жөндеу құралын қалай жасауға болатынын көрсетемін.
Олардың барлығын тіркеуге мүмкіндігіңіз болса да, сіз тез оқылмайтын консольдік спаммен аяқталасыз. Мысалы: [0,0,1,0,0,0,5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Қандай түйме басылғанын айта аласыз ба? Мүмкін, бірақ көзіңізді қысып, бірнеше енгізуді жіберіп алғаннан кейін ғана. Сонымен, жоқ, кірістерді оқуға келгенде жөндеу оңай болмайды. 3-мәселе: Құрылымның жоқтығы Жылдам визуализаторды жинасаңыз да, стильдер тез шатастырылуы мүмкін. Әдепкі, белсенді және жөндеу күйлері қабаттасуы мүмкін және нақты құрылымсыз CSS сынғыш және кеңейту қиын болады. CSS Cascade Layers көмектесе алады. Олар мәнерлерді басымдығы бойынша реттелген «қабаттарға» топтайды, сондықтан сіз ерекшелікпен күресуді және «Неліктен менің отладка стилім көрсетілмейді?» деген болжауды тоқтатасыз. Оның орнына сіз бөлек алаңдаушылықтарды сақтайсыз:
База: контроллердің стандартты, бастапқы көрінісі. Белсенді: басылған түймелер мен жылжытылған таяқтарды бөлектеу. Түзету: әзірлеушілерге арналған қабаттасулар (мысалы, сандық көрсеткіштер, нұсқаулықтар және т.б.).
Егер біз CSS-те қабаттарды осыған сәйкес анықтайтын болсақ, бізде: /* ең төменнен жоғарыға басымдық */ @layer негізі, белсенді, жөндеу;
@қабат негізі { /* ... */ }
@layer белсенді { /* ... */ }
@layer debug { /* ... */ }
Әрбір қабат болжамды түрде жинақталғандықтан, сіз қай ережелердің жеңетінін әрқашан білесіз. Бұл болжамдылық отладтауды жеңілдетіп қана қоймайды, бірақ іс жүзінде басқарылады. Біз мәселені (көрінбейтін, ретсіз енгізу) және тәсілді (Cascade Layers көмегімен жасалған көрнекі жөндеу құралы) қарастырдық. Енді біз отладчикті құрудың қадамдық процесін қарастырамыз. Түзеткіш тұжырымдамасы Жасырын енгізуді көрінетін етудің ең оңай жолы - оны жай ғана экранға салу. Бұл отладчик жасайды. Түймешіктер, триггерлер және джойстиктердің барлығы көрнекі болады.
A түймесін басыңыз: Шеңбер жанады. Таяқшаны итеру: Шеңбер айнала сырғып кетеді. Триггерді жартылай тартыңыз: жолақ жартылай толтырылады.
Енді сіз 0-ге және 1-ге қарап отырмайсыз, бірақ контроллердің тікелей реакциясын бақылап отырсыз. Әрине, әдепкі, басылған, жөндеу туралы ақпарат, тіпті жазу режимі сияқты күйлерді жинай бастағанда, CSS үлкейіп, күрделі бола бастайды. Бұл жерде каскадты қабаттар пайдалы болады. Міне, қысқартылған мысал: @қабат негізі { .button { фон: №222; шекара радиусы: 50%; ені: 40px; биіктігі: 40px; } }
@layer белсенді { .button.басылған { фон: #0f0; /* ашық жасыл */ } }
@layer debug { .button::кейін { мазмұны: attr(деректер-мәні); шрифт өлшемі: 12px; түсі: #fff; } }
Қабат реті маңызды: негіз → белсенді → жөндеу.
база контроллерді тартады. белсенді басылған күйлерді өңдейді. отладкаларды қабаттасуға шығарады.
Оны осылайша бөлу сіз біртүрлі ерекшелік соғыстарымен күреспейсіз дегенді білдіреді. Әр қабаттың өз орны бар және сіз әрқашан не жеңетінін білесіз. Оны құру Алдымен экранда бір нәрсені алайық. Ол жақсы көрінудің қажеті жоқ - бар болғаны, бізде жұмыс істейтін нәрсе бар.
Gamepad каскадты жөндеу құралы
түймешігін басыңыз
Бұл жай ғана жәшіктер. Әзірге қызық емес, бірақ ол бізге кейінірек CSS және JavaScript арқылы алуға мүмкіндік береді. Жарайды, мен бұл жерде каскадты қабаттарды пайдаланып жатырмын, себебі ол көбірек күйлерді қосқанда, материалды ретке келтіреді. Міне, өрескел өту:
/* ================================== КАСКАДЫ ҚАБАТТАРДЫ ОРНАТУ Тапсырыс маңызды: негізгі → белсенді → жөндеу ==================================== */
/* Қабат ретін алдын ала анықтау */ @layer негізі, белсенді, жөндеу;
/* 1-деңгей: Негізгі стильдер - әдепкі көрініс */ @қабат негізі { .button { фон: №333; шекара радиусы: 50%; ені: 70px; биіктігі: 70px; дисплей: икемді; ақтау-мазмұны: орталық; элементтерді туралау: орталық; }
.кідірту { ені: 20px; биіктігі: 70px; фон: №333; дисплей: кірістірілген блок; } }
/* 2-деңгей: Белсенді күйлер - басылған түймелерді өңдейді */ @layer белсенді { .button.active { фон: #0f0; /* Басқан кезде ашық жасыл */ түрлендіру: масштаб(1.1); /* Түймені сәл үлкейтеді */ }
.pause.active { фон: #0f0; түрлендіру: scaleY(1.1); /* Басқан кезде тігінен созылады */ } }
/* 3-деңгей: қабаттасуды түзету - әзірлеуші туралы ақпарат */ @layer debug { .button::кейін { мазмұны: attr(деректер-мәні); /* Сандық мәнді көрсетеді */ шрифт өлшемі: 12px; түсі: #fff; } }
Бұл тәсілдің сұлулығы - әр қабаттың нақты мақсаты бар. Негізгі қабат ешқашан белсендіні жоққа шығара алмайды және белсенді ешқашан ерекшелікке қарамастан жөндеуді қайта анықтай алмайды. Бұл әдетте отладтау құралдарына кедергі келтіретін CSS ерекшелігі соғыстарын жояды. Енді кейбір кластерлер қараңғы фонда отырған сияқты. Шынымды айтсам, жаман емес.
JavaScript қосу JavaScript уақыты. Бұл жерде контроллер бірдеңе жасайды. Біз мұны кезең-кезеңімен құрастырамыз. 1-қадам: Мемлекеттік басқаруды орнату Біріншіден, жөндеуші күйін бақылау үшін айнымалы мәндер қажет: // =================================== // МЕМЛЕКЕТТІК БАСҚАРУ // ===================================
let run = false; // Отладчиктің белсенді екенін бақылайды rafId болсын; // Болдырмау үшін requestAnimationFrame идентификаторын сақтайды
Бұл айнымалылар геймпад кірісін үздіксіз оқитын анимация циклін басқарады. 2-қадам: DOM сілтемелерін алыңыз Әрі қарай, біз жаңартылатын барлық HTML элементтеріне сілтеме аламыз: // =================================== // DOM ЭЛЕМЕНТІ СІЛТЕМЕЛЕРІ // ===================================
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 күйі = document.getElementById("күй");
Бұл сілтемелерді алдын ала сақтау DOM жүйесін қайталап сұрауға қарағанда тиімдірек. 3-қадам: Пернетақтаны қалпына келтіруді қосыңыз Физикалық контроллерсіз тестілеу үшін пернетақта пернелерін түймелермен салыстырамыз: // =================================== // КЕРНЕТКАТТАҒА ҚОЙЫЛУ (контроллерсіз тестілеу үшін) // ===================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [пауза1, кідірту2] // 'p' пернесі екі кідірту жолағын да басқарады };
Бұл пернетақтадағы пернелерді басу арқылы пайдаланушы интерфейсін тексеруге мүмкіндік береді. 4-қадам: Негізгі жаңарту циклін жасаңыз Мұнда сиқыр пайда болады. Бұл функция үздіксіз жұмыс істейді және геймпад күйін оқиды: // =================================== // НЕГІЗГІ ОЙЫН ПАРАҚШАСЫН ЖАҢАРТУ циклі // ===================================
updateGamepad() функциясы { // Барлық қосылған геймпадтарды алыңыз const геймпадтары = navigator.getGamepads(); егер (!геймпадтар) қайтарылады;
// Бірінші қосылған геймпадты пайдаланыңыз const gp = геймпадтар[0];
егер (gp) { // "белсенді" сыныпты ауыстырып қосу арқылы түйме күйін жаңарту btnA.classList.toggle("белсенді", gp.buttons[0].басылған); btnB.classList.toggle("белсенді", gp.buttons[1].басылған); btnX.classList.toggle("белсенді", gp.buttons[2].басылған);
// Кідірту түймесін өңдеу (көптеген контроллерлерде 9 түйме индексі) const pausePressed = gp.buttons[9].басылды; pause1.classList.toggle("белсенді", pausePressed); pause2.classList.toggle("белсенді", pausePressed);
// Күйді көрсету үшін ағымдағы басылған түймелердің тізімін жасаңыз басылсын = []; gp.buttons.forEach((btn, i) => { егер (btn.басылған)pressed.push("Түйме" + i); });
// Күй мәтінін жаңарту, егер кез келген түйме басылса егер (басылған. ұзындық > 0) { status.textContent = "Басылды: " + pressed.join(", "); } }
// Егер отладчик жұмыс істеп тұрса, циклды жалғастырыңыз егер (жүгіру) { rafId = requestAnimationFrame(updateGamepad); } }
classList.toggle() әдісі түйменің басылғанына байланысты белсенді классты қосады немесе жояды, бұл біздің CSS қабат мәнерлерімізді іске қосады. 5-қадам: Пернетақта оқиғаларын өңдеу Бұл оқиға тыңдаушылары пернетақтаның резервтік жұмысын жасайды: // =================================== // ПЕРНЕТАҚТА ОҚИҒАЛАРЫН ӨҢДЕУШІЛЕР // ===================================
document.addEventListener("пернемен төмен", (e) => { егер (keyMap[e.key]) { // Бір немесе бірнеше элементтерді өңдеу егер (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("белсенді")); } басқа { keyMap[e.key].classList.add("белсенді"); } status.textContent = "Перне басылды: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { егер (keyMap[e.key]) { // Кілт босатылған кезде белсенді күйді алып тастаңыз егер (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("белсенді")); } басқа { keyMap[e.key].classList.remove("белсенді"); } status.textContent = "Кілт босатылды: " + e.key.toUpperCase(); } });
6-қадам: Бастау/Тоқтату басқару элементін қосыңыз Соңында, жөндеу құралын қосу және өшіру әдісі қажет: // =================================== // ЖАҢА ТАЛАП КЕТКІЗУШІ ҚОСУ/ӨШІРУ // ===================================
document.getElementById("toggle").addEventListener("нұқыңыз", () => { жүгіру = !жүгіру; // Орындалу күйін аударыңыз
егер (жүгіру) { status.textContent = "Оқушы жұмыс істейді..."; updateGamepad(); // Жаңарту циклін бастаңыз } басқа { status.textContent = "Отлағыш белсенді емес"; cancelAnimationFrame(rafId); // Циклды тоқтату } });
Сонымен, иә, түймені басыңыз және ол жарқырайды. Таяқшаны итеріңіз, ол қозғалады. Міне бітті. Тағы бір нәрсе: шикі құндылықтар. Кейде сіз шамдарды емес, сандарды көргіңіз келеді.
Бұл кезеңде сіз мынаны көруіңіз керек:
Қарапайым экрандық контроллер, Сіз олармен әрекеттескенде әрекет ететін түймелер және Басылған түйме индекстерін көрсететін қосымша жөндеу көрсеткіші.
Мұны азырақ дерексіз ету үшін нақты уақытта әрекет ететін экрандық контроллердің жылдам демонстрациясы:
Енді «Жазуды бастау» түймесін басу «Жазуды тоқтату» түймесін басқанша барлығын тіркейді. 2. Деректерді CSV/JSON файлына экспорттау Бізде журнал болғаннан кейін оны сақтағымыз келеді.
1-қадам: Жүктеу көмекшісін жасаңыз Біріншіден, бізге браузерде файлдарды жүктеуді өңдейтін көмекші функция қажет: // =================================== // ФАЙЛДЫ ЖҮКТЕП АЛУ КӨМЕКШІСІ // ===================================
жүктеуФайл функциясы (файл аты, мазмұны, түрі = «мәтін/жазық») { // Мазмұннан блокты жасаңыз const blob = new Blob([мазмұн], {түрі}); const url = URL.createObjectURL(blob);
// Уақытша жүктеп алу сілтемесін жасаңыз және оны басыңыз const a = document.createElement("a"); a.href = url; a.download = файл аты; a.click();
// Жүктеп алғаннан кейін нысанның URL мекенжайын тазалаңыз setTimeout(() => URL.revokeObjectURL(url), 100); }
Бұл функция деректеріңізден Blob (екілік үлкен нысан) жасау, ол үшін уақытша URL мекенжайын жасау және жүктеу сілтемесін бағдарламалық түрде басу арқылы жұмыс істейді. Тазалау жадтың ағып кетпеуін қамтамасыз етеді. 2-қадам: JSON экспортын өңдеу JSON толық деректер құрылымын сақтау үшін өте қолайлы:
// =================================== // JSON РЕТІНДЕ ЭКСПОРТТАУ // ===================================
document.getElementById("export-json").addEventListener("нұқыңыз", () => { // Экспортталатын нәрсенің бар-жоғын тексеріңіз егер (!frames.length) { console.warn("Экспортталатын жазба жоқ."); қайтару; }
// Метадеректермен және кадрлармен пайдалы жүктеме жасаңыз const пайдалы жүктеме = { Жасалған уақыты: new Date().toISOString(), жақтаулар };
// JSON пішімделген ретінде жүктеп алыңыз жүктеп алу файлы( "gamepad-log.json", JSON.stringify(пайдалы жүктеме, нөл, 2), "application/json" ); });
JSON пішімі барлық құрылымды және оңай талдауға мүмкіндік береді, бұл оны әзірлеуші құралдарына қайта жүктеуге немесе командаластармен бөлісуге өте ыңғайлы етеді. 3-қадам: CSV экспортын өңдеу CSV экспорты үшін иерархиялық деректерді жолдар мен бағандарға тегістеу керек:
//==================================== // CSV РЕТІНДЕ ЭКСПОРТТАУ // ===================================
document.getElementById("export-csv").addEventListener("нұқыңыз", () => { // Экспортталатын нәрсенің бар-жоғын тексеріңіз егер (!frames.length) { console.warn("Экспортталатын жазба жоқ."); қайтару; }
// CSV тақырып жолын құру (уақыт белгісіне арналған бағандар, барлық түймелер, барлық осьтер) const headerButtons = frames[0].buttons.map((_, i) => btn${i}); const headerAxes = фреймдер[0].axes.map((_, i) => ось${i}); const тақырыбы = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// CSV деректер жолдарын құрастыру const жолдар = frames.map(f => { const btnVals = f.buttons.map(b => b.мән); return [f.t, ...btnVals, ...f.axes].join(","); }).қосылу("\n");
// CSV ретінде жүктеп алу downloadFile("gamepad-log.csv", тақырып + жолдар, "мәтін/csv"); });
CSV деректерді талдау үшін тамаша, себебі ол тікелей Excel немесе Google Sheets бағдарламасында ашылады, бұл диаграммаларды, деректерді сүзгілеуді немесе нүкте үлгілерін көрнекі түрде жасауға мүмкіндік береді. Экспорттау түймелері қосылғаннан кейін панельде екі жаңа опцияны көресіз: JSON экспорттау және CSV экспорттау. Егер сіз өңдеу құралдарына өңделмеген журналды тастағыңыз келсе немесе құрылымды айналдырғыңыз келсе, JSON жақсы. CSV, керісінше, Excel немесе Google Sheets ішіне тікелей ашылады, осылайша кірістерді диаграммалауға, сүзуге немесе салыстыруға болады. Келесі сурет осы қосымша басқару элементтерімен панельдің қалай көрінетінін көрсетеді.
3. Snapshot жүйесі Кейде сізге толық жазба қажет емес, енгізу күйлерінің жылдам «скриншоты» жеткілікті. Мұнда суретке түсіру түймесі көмектеседі.
Және JavaScript:
// =================================== // СУРЕТ ТҮСІРУ // ===================================
document.getElementById("snapshot").addEventListener("бас",() => { // Барлық қосылған геймпадтарды алыңыз const pads = navigator.getGamepads(); const activePads = [];
// Әрбір қосылған геймпадтың күйін айналдырып, түсіріңіз for (const gp of pads) { егер (!gp) жалғастырса; // Бос ұяшықтарды өткізіп жіберу
activePads.push({ id: gp.id, // Контроллердің аты/үлгі уақыт белгісі: performance.now(), түймелер: gp.buttons.map(b => ({ басылған: б.басылған, мән: b.value })), осьтер: [...gp.axes] }); }
// Геймпадтардың табылғанын тексеріңіз егер (!activePads.length) { console.warn("Суретті түсіру үшін геймпад қосылмаған."); alert («Ешбір контроллер анықталмады!»); қайтару; }
// Тіркеу және пайдаланушыға хабарлау console.log("Суретті сурет:", activePads); ескерту(Суретке түсірілді! ${activePads.length} контроллері(лар) түсірілді); });
Суреттер бір уақытта контроллердің нақты күйін тоқтатады. 4. Ghost Input Replay Енді қызықтысы: елес енгізуді қайталау. Бұл журналды алып, оны фантом ойнатқышы контроллерді пайдаланып жатқандай көрнекі түрде ойнатады.
Қайталау үшін JavaScript: // =================================== // GHOST REPLAY // ===================================
document.getElementById("қайталау").addEventListener("нұқыңыз", () => { // Қайта ойнатылатын жазба бар екеніне көз жеткізіңіз егер (!frames.length) { alert («Қайта ойнату үшін жазба жоқ!»); қайтару; }
console.log("Елес қайталауды бастау...");
// Синхрондалған ойнатуға арналған уақытты қадағалау let startTime = performance.now(); frameIndex = 0 болсын;
// Анимация циклін қайталау қадам() { const now = performance.now(); const elapsed = now - startTime;
// Осы уақытқа дейін орын алған барлық кадрларды өңдеңіз ал (frameIndex < frames.length && frames[frameIndex].t <= өтті) { const кадр = фреймдер[frameIndex];
// Жазылған түйме күйлерімен пайдаланушы интерфейсін жаңартыңыз btnA.classList.toggle("белсенді", frame.buttons[0].басылған); btnB.classList.toggle("белсенді", frame.buttons[1].басылған); btnX.classList.toggle("белсенді", frame.buttons[2].басылған);
// Күй дисплейін жаңарту басылсын = []; frame.buttons.forEach((btn, i) => { if (btn.pressed) pressed.push("Button" + i); }); егер (басылған. ұзындық > 0) { status.textContent = "Елес: " + pressed.join(", "); }
frameIndex++; }
// Егер көп жақтаулар болса, циклды жалғастыру егер (frameIndex < frames.length) { requestAnimationFrame(қадам); } басқа { console.log («Қайталауаяқталды.»); status.textContent = "Қайта ойнату аяқталды"; } }
// Қайталауды бастаңыз қадам(); });
Түзетуді біршама практикалық ету үшін мен елес қайталауды қостым. Сеансты жазып алған соң, қайта ойнатуды басып, UI оның әрекетін фантом ойнатқышы тақтаны басқарып жатқандай көре аласыз. Бұл үшін панельде жаңа Replay Ghost түймесі көрсетіледі.
Жазу түймесін басыңыз, контроллермен біраз араласыңыз, тоқтаңыз, содан кейін қайталаңыз. Пайдаланушы интерфейсі сіздің кірістеріңізді орындайтын елес сияқты сіз жасаған барлық нәрсені қайталайды. Неліктен бұл қосымшалармен алаңдату керек?
Жазу/экспорттау тестерлерге не болғанын дәл көрсетуді жеңілдетеді. Суреттер бір сәтте қатып қалады, бұл таңқаларлық қателерді іздегенде өте пайдалы. Ghost қайта ойнату оқулықтар, қол жетімділікті тексеру немесе басқару параметрлерін қатар салыстыру үшін тамаша.
Қазіргі уақытта бұл жай ғана ұқыпты демонстрация ғана емес, сіз шынымен де жұмыс істей алатын нәрсе. Нақты әлемдегі қолдану жағдайлары Қазір бізде көп нәрсені жасай алатын осы отладчик бар. Ол тікелей енгізуді көрсетеді, журналдарды жазады, оларды экспорттайды және тіпті материалдарды қайталайды. Бірақ нақты сұрақ: кім шын мәнінде алаңдайды? Бұл кімге пайдалы? Ойын әзірлеушілері Контроллерлер жұмыстың бөлігі болып табылады, бірақ оларды жөндеу керек пе? Әдетте ауырсыну. ↓ → + соққы сияқты жекпе-жек ойынының комбосын сынап жатқаныңызды елестетіңіз. Намаз оқудың орнына дәл осылай екі рет басып, бір рет жазып алып, қайта ойнатыңыз. Дайын. Немесе сіздің көп ойыншы кодыңыз олардың машинасында бірдей әрекет ететінін тексеру үшін JSON журналдарын командаласыңызбен ауыстырасыз. Бұл үлкен. Қолжетімділік тәжірибешілері Бұл менің жүрегіме жақын. Барлығы бірдей «стандартты» контроллермен ойнай бермейді. Бейімделетін контроллерлер кейде оғаш сигналдарды шығарады. Бұл құралдың көмегімен сіз не болып жатқанын дәл көре аласыз. Мұғалімдер, зерттеушілер, кім болса да. Олар журналдарды ұстай алады, оларды салыстыра алады немесе кірістерді қатар қайталай алады. Кенеттен көзге көрінбейтін нәрселер анық болады. Сапа кепілдігін тексеру Тестілеушілер әдетте «Мен мұнда түймелерді ездім, ол сынды» сияқты жазбалар жазады. Өте пайдалы емес. Енді? Олар дәл пресстерді түсіріп, журналды экспорттай алады және оны жібере алады. Болжау жоқ. Тәрбиешілер Егер сіз оқулықтар немесе YouTube бейнелерін жасап жатсаңыз, елес қайталау - алтын. Сіз сөзбе-сөз: «Міне, мен контроллермен не істедім» деп айта аласыз, ал UI оның болып жатқанын көрсетеді. Түсініктемелерді анық етеді. Ойындардан тыс Иә, бұл тек ойындарға қатысты емес. Адамдар роботтар, өнер жобалары және қол жетімділік интерфейстері үшін контроллерлерді пайдаланды. Әр жолы бірдей мәселе: браузер шынымен не көреді? Бұл жағдайда сізге болжау қажет емес. Қорытынды Контроллердің кірісін жөндеу әрқашан ұшатын соқыр сияқты болды. DOM немесе CSS-тен айырмашылығы, геймпадтарға арналған кірістірілген инспектор жоқ; бұл жай ғана консольдегі шикі сандар, шуылда оңай жоғалады. Бірнеше жүздеген HTML, CSS және JavaScript жолдары арқылы біз басқа нәрсе құрастырдық:
Көрінбейтін кірістерді көрінетін ететін көрнекі жөндеу құралы. UI таза және жөндеуге болатын деңгейлі CSS жүйесі. Оны демонстрациядан әзірлеуші құралына дейін көтеретін жақсартулар жинағы (жазу, экспорттау, суреттер, елес қайталау).
Бұл жоба CSS Cascade Layers қолданбасында веб-платформаның күшін аздаған шығармашылықпен араластыру арқылы қаншалықты алысқа баруға болатынын көрсетеді. Мен толығымен түсіндірілген құрал ашық бастапқы болып табылады. GitHub репосын клондауыңызға және оны өзіңіз көріңіз. Бірақ ең бастысы, сіз оны өзіңіз жасай аласыз. Өз қабаттарыңызды қосыңыз. Өзіңіздің қайталау логикаңызды жасаңыз. Оны ойын прототипімен біріктіріңіз. Немесе оны мен ойламаған тәсілдермен қолданыңыз. Оқыту, қолжетімділік немесе деректерді талдау үшін. Күннің соңында бұл тек геймпадтарды жөндеу туралы ғана емес. Бұл жасырын кірістерге жарық түсіру және әзірлеушілерге веб әлі толық қабылдамайтын жабдықпен жұмыс істеуге сенімділік беру туралы. Сонымен, контроллерді қосыңыз, редакторды ашыңыз және экспериментті бастаңыз. Браузеріңіз бен CSS-тің шынымен не істей алатынына таң қалуыңыз мүмкін.
